javascript写一个复制到剪切板的功能

在JavaScript中，复制内容到剪贴板可以使用Web API中的navigator.clipboard.writeText()方法。这是一个简单的示例：

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(function() {
    console.log('复制成功！');
  }).catch(function(error) {
    console.error('无法复制文本: ', error);
  });
}

// 使用函数
copyToClipboard('需要复制的文本');

请注意，navigator.clipboard.writeText()返回一个Promise。当操作成功完成时，Promise会被解析；如果发生错误，则会捕获到错误。

另外，因为浏览器安全性的原因，navigator.clipboard.writeText()通常只能在用户触发的事件处理器（如点击或按键事件）中使用。如果你在没有用户交互的情况下调用它（例如在页面加载时或在setTimeout回调中），可能会被浏览器阻止。

但是我们在使用过程中，浏览器控制台可能会报错：

Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')

通过搜索chatgpt4.0，得到答案：

这个错误通常发生在navigator.clipboard对象为空或未定义的时候。这可能是由于以下原因：

1. 浏览器不支持Clipboard API：并非所有浏览器都支持这个API，特别是一些旧版本的浏览器。
2. 页面没有得到用户的焦点：由于安全和隐私的原因，页面必须是活动的或者得到了用户的关注才能访问剪贴板。如果页面在后台运行，那么navigator.clipboard可能是未定义的。
3. 在非安全的上下文中使用：Clipboard API只在使用HTTPS（或者localhost）的安全上下文中可用。如果你正在试图在一个非安全（HTTP）的上下文中使用它，那么navigator.clipboard将会是未定义的。

为了解决以上问题，你可以先检查navigator.clipboard是否存在，然后再尝试调用writeText()方法，例如：

function copyToClipboard(text) {
  if (navigator.clipboard) { // 检查clipboard API是否可用
    navigator.clipboard.writeText(text).then(function() {
      console.log('复制成功！');
    }).catch(function(error) {
      console.error('无法复制文本: ', error);
    });
  } else {
    console.error('浏览器不支持clipboard API');
  }
}

// 使用函数
copyToClipboard('需要复制的文本');

此外，如果你想兼容旧的浏览器，你可以使用Document.execCommand()，但是请注意，这个方法已经被弃用，并且在某些情况下可能不起作用：

function fallbackCopyToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;

  // 避免滚动到底部
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? '复制成功' : '复制失败';
    console.log(msg);
  } catch (err) {
    console.error('无法复制', err);
  }

  document.body.removeChild(textArea);
}

因为我使用的是react开发框架，我最后采用的react-copy-to-clipboard；

通过npm或者yarn 安装，直接贴代码

import { message } from 'antd';
import { CopyToClipboard } from 'react-copy-to-clipboard';

 handleCopy = () => {
   message.success('复制成功~');
 };

<CopyToClipboard onCopy={this.handleCopy} text={content}>
    <div className={Styles.copyFont}>复制</div>
</CopyToClipboard>

最后完成的复制的功能。