Javascript如何实现复制到剪贴板_有哪些现代API？

夢幻星辰 2025-12-25 00:00:00 次阅读

现代主流方式是使用 navigator.clipboard API，它比旧的 document.execCommand 更安全可靠，支持文本和二进制数据，但需安全上下文和用户手势触发。

JavaScript 实现复制到剪贴板，现代主流方式是使用 navigator.clipboard API，它比旧的 document.execCommand 更安全、更可靠，且支持文本和二进制数据（如图片）。但需注意权限与上下文限制。

使用 navigator.clipboard.writeText() 复制纯文本

这是最常用的方法，适用于复制字符串内容。调用前需确保页面处于安全上下文（HTTPS 或 localhost），且必须由用户手势（如 click、keydown）触发。

成功时返回 Promise.resolve()，失败则 reject 错误（如用户拒绝权限、不在用户操作中调用）
示例代码：

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

// 绑定到按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('Hello, Clipboard!');
});

使用 navigator.clipboard.readText() 读取剪贴板文本

允许网页主动读取用户剪贴板中的文本内容（同样需用户手势触发 + 安全上下文）。常用于粘贴功能或内容预览。

浏览器会弹出权限提示（首次使用时），用户可授权“仅在此网站”或“始终允许”
注意：部分浏览器（如 Safari）对 readText 支持较晚，建议检查兼容性或降级处理

复制 HTML 或富文本内容（需 write() 配合 ClipboardItem）

如果想复制带格式的 HTML（比如保留加粗、链接），不能只用 writeText，而要用 clipboard.write() 和 ClipboardItem。

需构造 Blob 并指定 type（如 'text/html'、'text/plain'）
目前 Chrome、Edge 支持较好；Firefox 有限支持；Safari 暂不支持 ClipboardItem 写入
示例（复制 HTML 片段）：

async function copyHtml(htmlString) {
  const htmlBlob = new Blob([htmlString], { type: 'text/html' });
  const plainBlob = new Blob(['Plain version'], { type: 'text/plain' });

  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/html': htmlBlob,
        'text/plain': plainBlob
      })
    ]);
  } catch (err) {
    console.error('HTML 复制失败:', err);
  }
}