js实现复制拷贝的兼容方法

1. 定义复制拷贝的方法

在某个工具类方法中定义该方法，兼容不同浏览器处理

/*** @description 拷贝的类方法*/
class CopyClass {// constructor() {}setRange(input) {return new Promise((resolve, reject) => {try {//  创建range对象const range = document.createRange();// 获取复制内容的 id 选择器range.selectNode(input);// 创建 selection对象const selection = window.getSelection();// 如果页面已经有选取了的话，会自动删除这个选区，没有选区的话，会把这个选取加入选区if (selection.rangeCount > 0) {selection.removeAllRanges();} else {//}// 将range对象添加到selection选区当中，会高亮文本块selection.addRange(range);resolve();} catch (error) {reject(error);}});}createInput(val) {return new Promise((resolve, reject) => {try {const input = document.createElement('input'); // 创建input对象input.type = 'hidden';input.value = val;resolve(input);} catch (error) {reject(error);}});}execCommand() {return new Promise((resolve, reject) => {try {//  该方法已弃用document.execCommand('Copy');resolve();} catch (error) {reject(error);}});}inputSelectCopy(input) {return new Promise((resolve, reject) => {try {document.body.appendChild(input);input.select(); // 选择对象;this.execCommand().then(() => {input.remove();resolve();}).catch(e => {reject(e);});} catch (error) {reject(error);}});}clipboardWriteText(val) {return new Promise((resolve, reject) => {try {navigator.clipboard.writeText(val).then(res => {resolve();}).catch(e => {reject(e);});} catch (error) {reject(error);}});}copy(val) {return new Promise((resolve, reject) => {if (val && typeof val === 'string') {const errorObj = new Error('页面复制内容失败！');this.clipboardWriteText(val).then(res => {resolve();}).catch(e => {this.createInput(val).then(res => {this.setRange(res).then(() => {this.execCommand().then(() => {resolve();}).catch(e => {reject(errorObj);});}).catch(e => {this.inputSelectCopy(res).then(() => {resolve();}).catch((e) => {reject(errorObj);});});}).catch(e => {reject(errorObj);});});} else {reject(new Error('不能复制无效内容！'));}});}
}/*** @description 拷贝*/
export function copy(val) {const copyClass = new CopyClass();return copyClass.copy(val);
}

2. 实际调用

import copy from '@/utils/index';copy('需要拷贝的内容').then((res) => {//	成功提示
}).catch(e => {//	报错提示
});

3. 涉及方法

1. document.createRange: 返回一个 Range 对象。
2. selectNode: Range.selectNode() 方法将 Range 设置为包含整个 Node 及其内容。Range 的起始和结束节点的父节点与 referenceNode 的父节点相同。
3. window.getSelection: 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
4. removeAllRanges: 从Selection对象里移除Range对象。
5. addRange: 将一个Range对象添加到Selection对象中。
6. document.execCommand: 当一个 HTML 文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。这里我们使用copy命令来复制所选内容。 需要注意的是，该方法已经被弃用了！！！
7. navigator.clipboard.writeText: Clipboard 接口的 writeText() 方法可以写入特定字符串到操作系统的剪切板, 该方法返回一个关于执行情况的Promise。