如何使用JavaScript复制带样式、图片的选中内容到剪贴板

可行实现（全现代浏览器兼容，含Firefox） #

不需要使用已废弃的document.execCommand("copy")，直接使用标准的异步Clipboard API即可实现和原生复制完全一致的效果。

原生复制的本质是向系统剪贴板同时写入多份不同格式的内容：纯文本内容对应text/plain类型，带标签、样式的富文本内容对应text/html类型。粘贴时，目标软件（MS Word、邮件客户端、纯文本编辑器）会自动选择自身支持的格式读取，我们只需要通过API往剪贴板写入和原生复制一致的两种格式内容，就能达到完全相同的效果。

核心实现代码如下：

async function copySelectedRichContent() {
  // 获取当前用户选中的内容范围
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  const selectedRange = selection.getRangeAt(0);

  // 提取选中内容的HTML结构，保留标签、内联样式、图片节点
  const tempWrapper = document.createElement('div');
  tempWrapper.appendChild(selectedRange.cloneContents());

  // 可选处理：将图片相对路径转为绝对路径，避免粘贴到外部软件后图片加载失败
  tempWrapper.querySelectorAll('img').forEach(imgEl => {
    const src = imgEl.getAttribute('src');
    if (src && !src.startsWith('http') && !src.startsWith('data:')) {
      imgEl.src = new URL(src, window.location.origin).href;
    }
  });

  const plainTextContent = selection.toString();
  const htmlContent = tempWrapper.innerHTML;

  try {
    // 向剪贴板写入多格式内容
    await navigator.clipboard.write([
      new ClipboardItem({
        'text/plain': new Blob([plainTextContent], { type: 'text/plain' }),
        'text/html': new Blob([htmlContent], { type: 'text/html' })
      })
    ]);
    return true;
  } catch (err) {
    console.error('复制执行失败:', err);
    return false;
  }
}

// 绑定到自定义弹窗的复制按钮点击事件即可，注意必须在用户主动触发的事件回调中调用
document.querySelector('#your-custom-copy-button').addEventListener('click', async () => {
  const isSuccess = await copySelectedRichContent();
  // 这里添加你自己的复制成功/失败提示逻辑
});

兼容性与限制说明 #

• 浏览器兼容：上述方案支持Chrome 86+、Firefox 127+、Safari 13.1+，覆盖所有主流现代浏览器，无废弃API依赖。
• 安全限制：Clipboard API仅在HTTPS环境（或本地localhost开发环境）下生效，且必须在用户主动交互的事件回调（如点击、按键事件）中直接调用，不允许页面无感知自动操作剪贴板，这是浏览器为防范恶意网站篡改剪贴板内容设置的统一安全规则，和原生复制的权限边界一致，不存在能力缺口。
• 样式保留说明：如果页面使用外部CSS文件定义样式、而非内联style属性，外部样式不会被包含在提取的HTML中，粘贴到外部软件时会丢失这部分样式——这不是API的限制，浏览器原生的Ctrl+C、右键复制行为也是如此，仅会保留标签语义、内联样式、图片等节点内容。如果需要100%匹配页面显示的样式，可以在提取HTML时遍历节点，将元素的计算样式转为内联style属性写入，绝大多数业务场景不需要做这层额外处理。

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