应改用 navigator.clipboard API 实现复制，优先调用 clipboard.write() 支持 HTML 格式，降级为 writeText() 和 execCommand；需确保 HTTPS/localhost、用户手势触发、正确处理错误反馈。
复制操作卡在 document.execCommand 被弃用怎么办
Chrome 87+、Firefox 87+ 和 Safari 已废弃 document.execCommand，调用 execCommand('copy') 会触发控制台警告，且在某些上下文（如 iframe、非用户手势触发）下直接失败。这不是兼容性问题，而是标准层面的移除。
替代方案必须基于 navigator.clipboard API，它要求页面运行在 HTTPS 或 localhost 下，且复制行为必须由明确的用户手势（如 click、keydown）触发。
- 不能在
setTimeout或异步回调中调用clipboard.writeText()，否则报错"Permission denied" or "Document is not focused" - 需主动捕获拒绝权限的情况：
navigator.clipboard.writeText(...).catch(e => console.error('复制失败:', e)) - 旧版 Safari（≤13.1）不支持
clipboard.writeText，需降级 fallback 到execCommand（仅限仍支持它的环境）
如何安全写入 HTML 字符串到剪贴板（含样式/标签）
原生 navigator.clipboard.writeText() 只接受纯文本，直接传入 <strong>Hello</strong> 会被当作文本粘贴，而非富文本。要实现“复制 HTML 内容并保留格式”，必须用 clipboard.write() 配合 ClipboardItem，且只在 Chromium 和新版 Edge 中稳定支持。
- 构造
ClipboardItem时需同时提供'text/html'和'text/plain'格式，否则部分编辑器（如微信、钉钉）可能退化为纯文本 new ClipboardItem({ 'text/html': new Blob([htmlString], {type: 'text/html'}), 'text/plain': new Blob([plainText], {type: 'text/plain'}) })- 注意：Firefox 当前（v120+）仍不支持
ClipboardItem的text/html，只能走纯文本降级 - 不要对 HTML 字符串做二次编码（如
encodeURIComponent），Blob构造器已处理字节流
一键复制按钮点击后没反应？检查这三点
90% 的“点不动”问题不是代码逻辑错，而是运行时约束未满足。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 当前页面协议不是
https://或http://localhost——navigator.clipboard在 HTTP 非本地域下完全不可用 - 事件绑定没挂到用户可交互元素上，比如绑在
div上但没设tabindex="0"+role="button"，导致键盘用户或屏幕阅读器无法触发 - 复制目标是动态生成的 DOM 节点，但你复制的是节点的
innerHTML而非渲染后的真实 HTML（例如 Vue/React 组件未完成挂载）——应确保在nextTick或useEffect(() => {}, [])后再读取
要不要封装成通用 hook / 工具函数
可以，但别过度抽象。一个健壮的 copyHTML 函数只需处理两层回退：
- 首选
clipboard.write(new ClipboardItem(...))（带 HTML + plain 双格式） - 降级到
clipboard.writeText(plainText) - 再降级到老式
execCommand（仅当clipboard不存在且document.queryCommandSupported('copy')为 true）
真正容易被忽略的是错误反馈：用户点了按钮，既没成功提示，也没失败提示，就当功能正常。至少应监听 .catch() 并用 toast 或按钮状态切换（如文字从“复制”变“已复制”再自动恢复）给出确定响应。
