前端需要知道的3种“复制”方法

clipboard.js是前端最常用的一个实现「复制」功能的库，大部分人应该都使用过。

这里介绍 3 种不借助第三方库，实现「复制」功能，最后一种支持「图片复制」。

1️⃣ 最传统的方案

方法

使用隐藏的<textarea>+document.execCommand('copy')。

function copyTextFallback(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = 0;
  document.body.appendChild(textarea);
  textarea.select();
  try {
    const success = document.execCommand('copy');
    console.log(success ? '复制成功' : '复制失败');
  } catch (err) {
    console.error('复制失败', err);
  }
  document.body.removeChild(textarea);
}

copyTextFallback('Hello execCommand');

特点

• ✅ 兼容性最好
• ⚠️ 已废弃，不推荐使用
• ⚠️ 只能复制纯文本

2️⃣ 现代首选方案

方法

使用浏览器的navigator.clipboard.writeText()API。

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

copyText('Hello, world!');

特点

• ✅ 简洁、不需要额外的 DOM
• ✅ 现代 Promise 风格
• ⚠️ 需要 HTTPS 环境
• ⚠️ 需要用户触发（比如 click 事件）

3️⃣ 复制带格式内容

方法

使用浏览器的navigator.clipboard.write()API，允许复制带格式的内容，比如：图片、HTML 等。

复制 HTML

async function copyHtml() {
  const html = `<b style="color: red">这是带有格式的加粗文本</b>`;
  const blob = new Blob([html], { type: 'text/html' });
  const data = [new ClipboardItem({ 'text/html': blob })];
  await navigator.clipboard.write(data);
  console.log('复制 HTML 成功');
}

这与复制文本不同，它复制的是带有格式的内容模板，而复制文本只是单纯的文本字符串。

在支持富文本的地方粘贴时，会带有格式：

复制图片

async function copyImage() {
  const img = await fetch('https://cdn.jsdelivr.net/gh/moohng/bucket@oss/images/articles/1757749025610-baby-8797092_640.png');
  const blob = await img.blob();
  await navigator.clipboard.write([
    new ClipboardItem({ [blob.type]: blob })
  ]);
  console.log('图片复制成功');
}

图片复制成功之后，按Win + V就可以查看复制的图片信息。

总结

总的来说，就两种实现「复制」方案：

1. document.execCommand('copy')
2. navigator.clipboard

如果对兼容性要求比较高，就选择第 1 种方案，否则更推荐使用第 2 种方案。

navigator.clipboard可以访问读写剪贴板内容的 Clipboard 对象，通过此对象就可以实现剪切、复制和粘贴功能。