navigator.clipboard
- 属性：
clipboardData：表示剪贴板中的数据对象；
types：返回剪贴板中数据的类型列表； - 方法：
readText()：异步读取剪贴板中的文本内容；
writeText(text)：异步将文本内容写入剪贴板；
read()：异步读取剪贴板中的数据对象；
write(data)：异步将自定义数据对象写入剪贴板； - 优点：
异步操作，调用 clipboard 对象的相关方法后会返回一个Promise；
安全性增加； - 缺点：
需要在https安全协议下才可使用，本地开发环境下可用非加密的协议，例如http；
document.execCommand()
- document.execCommand()是一个旧的浏览器API，用于执行与剪贴板相关的命令，如复制、剪切、粘贴等；
- 优点：
使用简单，无需额外引入API；
兼容性好； - 缺点：
功能相对有限，只能处理文本类型的数据且不支持异步操作；
在复制数据量大的的数据时有可能会出现页面卡顿；
复制: document.execCommand('copy')
剪切: document.execCommand('cut')
粘贴: document.execCommand('paste')
/**
* 复制文本至剪切板
* @param {*} text
*/
export function copyText(text, container = document.body) {
try {
// 创建一个textarea元素
let textarea = document.createElement('textarea');
// 设置textarea的值为text
textarea.value = text;
// 将textarea添加到container中
container.appendChild(textarea);
// 如果浏览器是ipad，则执行以下操作
if (navigator.userAgent.match(/ipad/i)) {
// 创建一个range和selection变量
let range, selection;
// 创建一个range，用于选择textarea中的文本
range = document.createRange();
// 选择textarea中的文本
range.selectNodeContents(textarea);
// 获取当前的selection
selection = window.getSelection();
// 移除当前的selection
selection.removeAllRanges();
// 添加新的range
selection.addRange(range);
// 设置焦点
textarea.focus();
// 设置textarea的选中范围
textarea.setSelectionRange(0, 999999);
} else {
// 如果浏览器不是ipad，则执行以下操作
// 选择textarea中的文本
textarea.select();
}
// 执行复制操作
document.execCommand('copy');
// 从container中移除textarea
container.removeChild(textarea);
} catch (error) {
// 如果出现异常，则打印错误信息
console.log(error);
}
}
navigator.clipboard + document.execCommand 结合使用
- 判断当前浏览器的 navigator 对象是否支持 clipboard
const isClipboardApiSupported = () => {
return !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
}
- 若当前浏览器支持 clipboard 则使用，若不支持则使用 execCommand('copy') 进行处理；
document.body.createTextRange() + document.execCommand('copy') 方法
在某些浏览器中，document.execCommand('copy') 方法可能无法正常工作，这时可以使用 document.body.createTextRange() 和 document.execCommand('copy') 方法实现复制功能。例如：
// 获取需要复制的元素
var element = document.getElementById('my-element');
// 创建 TextRange 对象
var range = document.body.createTextRange();
// 设置 TextRange 对象的范围
range.selectNode(element);
// 执行复制操作
document.execCommand('copy');
