本文介绍如何在不依赖外部库、不使用已废弃的 document.execCommand() 的前提下，利用现代浏览器提供的 navigator.clipboard API 安全、可靠地复制带格式的 HTML 内容（如富文本）到系统剪贴板。
本文介绍如何在不依赖外部库、不使用已废弃的 `document.execcommand()` 的前提下，利用现代浏览器提供的 `navigator.clipboard` api 安全、可靠地复制带格式的 html 内容（如富文本）到系统剪贴板。
现代 Web 开发中，复制“格式化文本”（例如加粗、颜色、列表、链接等 HTML 渲染效果）比纯文本更复杂——因为 navigator.clipboard.writeText() 仅支持纯文本，而真正保留样式的复制需写入 HTML 格式数据，并设置对应 MIME 类型。
幸运的是，navigator.clipboard.write() 方法支持多格式写入，可同时提供 text/plain 和 text/html 两种表示，使粘贴时目标应用（如 Word、Notes、富文本编辑器）能智能选择最合适的格式。
✅ 正确实现步骤如下：
- 确保安全上下文：navigator.clipboard 仅在 HTTPS 或 localhost 环境下可用；
- 获取源元素的 HTML 内容：使用 .innerHTML（保留格式）而非 .innerText（纯文本）；
- 构造 ClipboardItem：将 HTML 字符串和纯文本分别封装为不同 MIME 类型的数据；
- 调用 write() 并处理异常：需 async/await，且必须由用户手势（如点击）触发。
以下是完整、可直接运行的示例代码：
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<div id="contentToCopy">
<h3 style="color: #2c3e50;">欢迎使用富文本复制功能</h3>
<p>这是一段<strong>加粗</strong>且包含<a href="https://example.com">超链接</a>的 HTML 内容。</p>
<ul><li>项目一</li><li>项目二</li></ul>
</div>
<button id="copyBtn">? 复制格式化内容</button>
<script>
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
const htmlContent = document.getElementById('contentToCopy').innerHTML;
const plainText = document.getElementById('contentToCopy').textContent;
// 构造多格式 ClipboardItem
const item = new ClipboardItem({
'text/plain': new Blob([plainText], { type: 'text/plain' }),
'text/html': new Blob([htmlContent], { type: 'text/html' })
});
await navigator.clipboard.write([item]);
console.log('✅ 格式化文本已复制到剪贴板！');
} catch (err) {
console.error('❌ 复制失败：', err.name === 'NotAllowedError'
? '请确保操作由用户点击触发，且页面处于安全上下文（HTTPS/localhost）'
: err.message);
}
});
</script>
</body>
</html>⚠️ 注意事项：
- 浏览器兼容性：ClipboardItem 支持 Chrome 66+、Edge 79+、Firefox 116+（需启用 dom.events.asyncClipboard）、Safari 暂不支持 HTML 格式写入（仅支持 writeText）；
- 若需兼容 Safari，建议降级方案：先尝试 write()，失败后回退至 writeText() 并提示“仅复制纯文本”；
- 不要直接复制 <script> 或内联事件（如 onclick），多数应用会自动过滤以保障安全；
- innerText 会丢失样式与结构，务必用 innerHTML 获取格式化内容；
- 所有剪贴板写入操作必须是用户显式交互（如 click、keydown）触发，否则会被浏览器拒绝（NotAllowedError）。
总结：对于初学者，掌握 navigator.clipboard.write() + ClipboardItem 是实现专业级富文本复制的现代标准方案。它既规避了 execCommand 的废弃风险，又无需引入第三方库，兼顾简洁性与功能性。只需注意环境限制与错误处理，即可稳定交付用户体验良好的复制功能。
