HTML剪贴板API不能完全替代传统复制粘贴，但能精准控制复制内容和粘贴处理，需用户主动触发、页面活跃且HTTPS环境；writeText()不生效主因是未绑定用户手势事件；execCommand仅作降级方案；read()可同时支持HTML与纯文本粘贴。
HTML 剪贴板 API（navigator.clipboard）不能完全替代传统复制粘贴，但它能精准控制「复制什么」和「粘贴时怎么处理」，前提是用户主动触发、页面处于活跃 tab、且 HTTPS 环境下运行。
为什么 navigator.clipboard.writeText() 有时不生效
最常见原因是调用未绑定在用户手势事件中（如 click、keydown），浏览器会直接拒绝写入剪贴板。不是异步失败，而是根本不会发起权限请求。
- ✅ 正确：在
button.addEventListener('click', () => navigator.clipboard.writeText('hello'))中调用 - ❌ 错误：在
setTimeout、fetch回调或页面加载完成时直接调用 - ⚠️ 注意：
navigator.clipboard在 HTTP 协议下不可用（除localhost外），会抛出SecurityError
document.execCommand('copy') 还要不要用
要，但仅作为降级方案。它兼容 IE11 和旧版 Safari，但行为不可控：只能复制当前选中的 DOM 节点内容，无法指定纯文本、HTML 或自定义格式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
execCommand不支持写入富文本或自定义 MIME 类型（如text/html） - 它依赖
document.getSelection()+range.selectNode()模拟选中，容易因 DOM 变化失败 - 现代项目建议主逻辑用
navigator.clipboard.writeText()，兜底用execCommand判断是否存在并 fallback
粘贴时如何同时支持 HTML 和纯文本
用户 Ctrl+V 粘贴时，剪贴板可能含多个格式（text/plain、text/html、甚至 image/png）。直接读 clipboard.readText() 只拿到纯文本，会丢掉结构。
立即学习“前端免费学习笔记（深入）”；
- 用
navigator.clipboard.read()（返回ClipboardItem数组），再遍历item.types判断支持的 MIME 类型 - 对
text/html类型，需用item.getType('text/html')读取Blob，再转成字符串解析 - 注意：Chrome 对
read()要求更严——必须是用户粘贴动作触发（如监听paste事件），且页面焦点在可编辑区域或contenteditable元素上
真正难的不是调用 API，而是判断该走哪条路径：用户是否点了按钮？是否在粘贴？当前环境是否支持 read()？有没有 fallback 内容？这些分支逻辑一旦漏掉，就会出现「点不动」「粘不出」「HTTP 下白屏」之类问题。
