低版本浏览器不支持navigator.clipboard API和window.clipboardData API
window.clipboardData
是一个在客户端浏览器中用于访问剪贴板(clipboard)数据的对象。它是在早期的 Internet Explorer 浏览器中引入的,并在一些现代浏览器中仍然保留了兼容性。需要注意的是,window.clipboardData
主要是在过去的浏览器中使用的技术,并不是现代 Web 标准的一部分。由于不是标准的Web API,所以在caniuse
中找不到对应的兼容性信息。
解决方法:
/**
* 将值赋值到系统剪切板
* @param value
* @returns {Promise<Boolean>}
*/
copyToSharePlate(value) {
return new Promise((resolve) => {
if (navigator.clipboard) {
// navigator.clipboard是新版Clipboard API的一部分
navigator.clipboard.writeText(value).then(()=>{
resolve(true)
},(err)=>{
console.error(err);
resolve(false)
})
} else if(window.clipboardData) {
// window.clipboardData仅在早期的 Internet Explorer 浏览器和部分现在浏览器中可用。
window.clipboardData.setData('text', value)
resolve(true)
} else if(document.execCommand){
// 兼容低版本浏览器,document.execCommand('copy')适用于低版本浏览器,兼容性好,但高版本浏览器可能弃用;
// 使用textarea是为了确保换行符能被保留
const input = document.createElement('textarea');
// 注意:赋值不能使用 input.setAttribute('value',value); 该方式无效!
input.value = value
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.removeChild(input)
resolve(true)
} else{
resolve(false)
}
})
}