如何使用JavaScript向剪贴板写入加粗格式的文本？

要写入带格式的富文本到剪贴板，不能用仅支持纯文本的navigator.clipboard.writeText()，得用navigator.clipboard.write()——它支持多种MIME类型的数据，比如text/html（对应富文本格式）。

核心实现代码 #

// 绑定按钮点击事件
document.querySelector('#copyBtn').addEventListener('click', async () => {
  // 构造带加粗格式的HTML内容
  const htmlContent = `
    <p><strong>From :</strong></p>
    <p><strong>Info :</strong></p>
    <p><strong>Resp :</strong></p>
  `;
  // 构造纯文本降级内容（适配不支持富文本的场景）
  const plainText = "From : \n Info : \n Resp : ";

  try {
    // 创建ClipboardItem，同时提供HTML和纯文本两种格式
    const item = new ClipboardItem({
      'text/html': new Blob([htmlContent], { type: 'text/html' }),
      'text/plain': new Blob([plainText], { type: 'text/plain' })
    });
    // 写入剪贴板
    await navigator.clipboard.write([item]);
    console.log('富文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

关键说明 #

• MIME类型选择：text/html是富文本的核心格式，大部分支持富文本粘贴的应用（如网页编辑器、Word、微信公众号后台等）都能识别这种格式的加粗效果。
• 降级处理：同时提供text/plain格式，确保在不支持富文本的场景（如记事本）也能粘贴出可读的纯文本。
• 权限限制：剪贴板操作必须由用户交互触发（比如点击按钮），浏览器会拒绝非用户主动触发的剪贴板写入请求，避免恶意滥用。
• 兼容性：现代浏览器（Chrome 66+、Firefox 63+、Edge 79+）都支持ClipboardItem和navigator.clipboard.write()。

内容的提问来源于stack exchange，提问作者Shadow of death