前端调接口拿到数据之后,复制文本

一、使用navigator.clipboard对获取的内容进行复制。

需要注意navigator.clipboard使用的条件是：

1.通过 HTTPS 协议访问的页面

2.本地开发服务器上的页面，即 URL 为 http://localhost。经测试http://127.0.0.1，这个是不能使用的。

3.直接打开本地文件，即 URL 以 file:// 开头（某些浏览器可能有不同的实现）。

二、解决navigator.clipboard不支持的情况下，使用document.execCommand('copy')，来实现复制文本

async function copyHandler(copyText) {
  try {
    if (!navigator.clipboard) {
      // 创建一个隐藏的 textarea 元素
      const textArea = document.createElement('textarea');
      textArea.value = copyText;
      // 使 textarea 不可见
      textArea.style.position = 'fixed';
      textArea.style.left = '-9999px';
      // 将 textarea 添加到文档中
      document.body.appendChild(textArea);
      // 选择 textarea 中的文本
      textArea.select();
      // 执行复制命令
      document.execCommand('copy');
      // 从文档中移除 textarea
      document.body.removeChild(textArea);
      return console.log('复制成功')
    }
    // 复制到剪贴板
    await navigator.clipboard.writeText(copyText);
    console.log('复制成功')
  } catch (error) {
    console.log('复制失败')
  }
}

三、直接使用clipboard三方库实现

地址：clipboard - npm