如何使用JavaScript实现同时复制文本和图片到剪贴板

结论 #

该需求完全可以通过原生JavaScript实现，你之前的实现思路没有问题，遗漏的核心技术点是Clipboard API支持在同一个ClipboardItem中写入多MIME类型的内容，无需分开复制。

实现前提 #

• 页面必须运行在HTTPS环境下，localhost本地开发不受限制
• 剪贴板写入操作必须由用户主动交互触发（如点击、按键事件，浏览器禁止静默调用）

核心实现方案（推荐） #

用Clipboard API的write方法，将文本、图片等多类型内容封装到同一个ClipboardItem中写入剪贴板，示例代码如下：

// 给按钮绑定点击事件
document.querySelector('#copyBtn').addEventListener('click', async () => {
  try {
    // 1. 构造文本Blob
    const textBlob = new Blob(['这是需要同步复制的文本内容'], { type: 'text/plain' });
    // 2. 构造图片Blob，如果是本地已加载的图片也可以直接用canvas转blob
    const imgRes = await fetch('/path/to/your/image.png');
    const imgBlob = await imgRes.blob();
    // 3. 构造富文本HTML Blob（可选，粘贴到富文本场景时会保留排版）
    const htmlBlob = new Blob([
      `<div><p>这是需要同步复制的文本内容</p><img src="/path/to/your/image.png"></div>`
    ], { type: 'text/html' });
    // 4. 写入剪贴板
    await navigator.clipboard.write([
      new ClipboardItem({
        [textBlob.type]: textBlob,
        [imgBlob.type]: imgBlob,
        [htmlBlob.type]: htmlBlob
      })
    ]);
    console.log('复制成功');
  } catch (e) {
    console.error('复制失败：', e);
  }
});

注意事项 #

• 粘贴效果取决于目标应用的支持度：纯文本输入框只会读取剪贴板中的text/plain内容，富文本编辑器、办公软件、即时通讯软件等支持富内容的应用才会同时展示文本和图片。
• 该方案兼容Chrome 66+、Firefox 63+、Safari 13.1+，覆盖95%以上的全球用户。

降级兼容方案 #

如果需要兼容不支持Clipboard API的老旧浏览器，可以用document.execCommand('copy')方案，该API已被官方废弃但仍被所有主流浏览器兼容，示例代码如下：

document.querySelector('#copyBtn').addEventListener('click', () => {
  // 创建临时可编辑容器
  const tempContainer = document.createElement('div');
  // 填充需要复制的内容
  tempContainer.innerHTML = `<p>这是需要同步复制的文本内容</p><img src="/path/to/your/image.png">`;
  // 移到可视区域外避免干扰用户
  tempContainer.style.cssText = `
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
  `;
  document.body.appendChild(tempContainer);
  // 选中容器内容
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNode(tempContainer);
  selection.removeAllRanges();
  selection.addRange(range);
  // 执行复制
  document.execCommand('copy');
  // 清理临时内容
  document.body.removeChild(tempContainer);
  selection.removeAllRanges();
  console.log('复制成功');
});

内容的提问来源于stack exchange，提问作者Antonín Karásek