复制文字功能写入剪切板的坑

搞个锤子哟2025-08-05 14:02

主要解决过程是通义千问+测试。这篇文章写的也不错，本文补充几种情况 juejin.cn/post/718686...

核心提示

navigator.clipboard.writeText 安卓不支持 且需要 https，不建议用该方法
苹果设备，点击事件触发时必须立即往剪切板里写入内容，若点击后要ajax请求后再往剪切板里写会失败！！！

建议处理流程

若写入剪切板前要调用接口。设置一个变量 unsupportCopy: myPlatform.includes('mac') || myPlatform.includes('ios') 判断不支持直接写入剪切板的设备
点击复制按钮时，若设备支持点击事件和写入剪切板直接有时差，就调用下面的方法写入剪切板。若不支持，就弹出弹框，里面展示内容，然后提供一个按钮，点击复制

实现方案

navigator.clipboard (不推荐)

js 复制代码

    copyStrToClipboard(str, successCb) {
      navigator.clipboard
        .writeText(str)
        .then(() => {
          this.$message.success('复制成功！')
          successCb && successCb()
        })
        .catch((err) => {
          this.$message.error(err)
        })
    }

document.execCommand('copy')

js 复制代码

export function copyToClipboard(text, successCB) {
  const textarea = document.createElement('textarea');
  textarea.value = text; // 直接赋值包含换行符的文本
  textarea.style.position = 'fixed'; // 避免滚动问题
  document.body.appendChild(textarea);
  textarea.select();
  try {
    const successful = document.execCommand('copy');
    if (successful) {
      Message.success('复制成功!')
      successCB && successCB()
    } else {
      Message.error('本设备不支持复制!')
    }
  } catch (err) {
    Message.error('复制失败' + err)
  }
  document.body.removeChild(textarea); // 清理
}

注意，此处复制内容的容器是textarea 而不是 document.createElement('input'),若用的是input，若文本里含 \n 是复制不出来换行的