JavaScript 复制内容到剪贴板

复制方法

/**
 * 复制功能
 * text 传入要复制的文本
 * callback 复制完成后的回调
*/
function copyText(text, callback) {
    // 实现复制方法一：
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
        callback && callback(true);
        return;
    }
}

调用方法

copyText('传入你要复制的文本');

相关文章

navigator.clipboard

问题解决

navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘）

本文上述结论在本地运行没有什么问题，但是部署到服务器就会出错，查资料发现是浏览器禁用了非安全域的 navigator.clipboard 对象。所以要解决这个bug就是要做一个兼容写法，在安全域下使用 navigator.clipboard 提升效率，非安全域退回到 document.execCommand('copy'); 保证功能一直可用。

代码如下：

// 先给要复制的文本或者按钮加上点击事件后，并将要复制的值传过来
async copyValue(val) {
  if (navigator.clipboard && window.isSecureContext) {
    // navigator clipboard 向剪贴板写文本
    this.$message.success('复制成功')
    return navigator.clipboard.writeText(val)
  } else {
    // 创建text area
    const textArea = document.createElement('textarea')
    textArea.value = val
    // 使text area不在viewport，同时设置不可见
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    this.$message.success('复制成功')
    return new Promise((res, rej) => {
      // 执行复制命令并移除文本框
      document.execCommand('copy') ? res() : rej()
      textArea.remove()
    })
  }
}