如何在ReactJS中实现页面指定内容复制到剪贴板？

1. 修正Ref绑定（核心问题） #

你当前代码的useRef没有绑定到要复制的邮件签名元素上，而是指向了按钮的父容器，导致获取的内容完全错误。首先要把ref挂载到目标签名元素：

// 定义ref
const signatureRef = useRef(null);

// 在签名的DOM元素上绑定ref
<div ref={signatureRef}>
  {/* 这里是你的邮件签名内容，比如姓名、联系方式、公司信息等 */}
</div>

2. 复制纯文本内容 #

如果只需要复制签名的纯文本（不含格式），直接获取元素的textContent，用navigator.clipboard.writeText写入剪贴板：

const [copySuccess, setCopySuccess] = useState(false);

const copyToClipboard = async () => {
  try {
    const textContent = signatureRef.current?.textContent.trim();
    if (!textContent) return;
    
    await navigator.clipboard.writeText(textContent);
    setCopySuccess(true);
    setTimeout(() => setCopySuccess(false), 3000);
  } catch (err) {
    console.error('复制失败:', err);
    // 兼容旧浏览器的降级方案
    const textArea = document.createElement('textarea');
    textArea.value = textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    setCopySuccess(true);
    setTimeout(() => setCopySuccess(false), 3000);
  }
};

3. 复制带格式的富文本内容（邮件签名常用） #

邮件签名通常需要保留换行、加粗、链接等格式，这时候需要复制富文本（粘贴后是带格式的内容，而非HTML代码），可以用ClipboardItem实现：

const copyRichTextToClipboard = async () => {
  try {
    const signatureElement = signatureRef.current;
    if (!signatureElement) return;

    const htmlContent = signatureElement.innerHTML;
    // 创建HTML格式的Blob
    const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
    // 同时提供纯文本作为降级选项
    const plainTextBlob = new Blob([signatureElement.textContent], { type: 'text/plain' });

    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': htmlBlob,
        'text/plain': plainTextBlob
      })
    ]);
    setCopySuccess(true);
    setTimeout(() => setCopySuccess(false), 3000);
  } catch (err) {
    console.error('富文本复制失败:', err);
    // 降级为纯文本复制
    copyToClipboard();
  }
};

4. 按钮绑定示例 #

把复制函数绑定到按钮上：

{user.name && (
  <button
    type="button"
    style={{
      marginTop: '30px',
      marginBottom: '10px',
      height: '45px',
      width: '85px',
      backgroundColor: '#1d71a5',
      color: '#fff',
      border: 'none',
      borderRadius: '5px',
      fontSize: '16px',
      cursor: 'pointer',
    }}
    onClick={copyRichTextToClipboard} // 根据需求选择纯文本或富文本函数
  >
    Copy
  </button>
)}
{copySuccess && (
  <div style={{ color: 'green' }}> ✔︎ 复制成功！ </div>
)}

关键注意事项 #

• navigator.clipboard仅支持HTTPS环境（本地localhost除外）
• 必须用async/await处理剪贴板API的异步逻辑
• 始终添加错误捕获和降级方案，兼容旧浏览器

内容的提问来源于stack exchange，提问作者Douglas Fernandes