navigator.clipboard api需用户手势触发且仅限https环境，writetext()等方法在非交互上下文会静默失败；readtext()仅返回纯文本，保留格式须用read()配合clipboarditem；document.execcommand('copy')仅作降级兼容。

navigator.clipboard 不会“影响”复制粘贴，它只是提供了一套可控的、需用户授权的接口；传统复制粘贴（Ctrl+V / 右键粘贴）行为本身完全不受其存在与否干扰。

为什么 navigator.clipboard.writeText() 有时点不动

不是 API 坏了，而是浏览器直接拒绝调用——根本不会弹权限框，也不会进 catch。

• 最常见原因：调用不在用户手势事件内，比如放在 setTimeout、fetch 回调、或页面 load 后自动执行
• 必须绑定在 click、keydown（且 event.key === 'Enter'）、contextmenu 等明确由用户触发的事件中
• HTTP 环境下（非 localhost）会抛 SecurityError，不是兼容性问题，是硬性拦截

粘贴时只读 readText() 会丢 HTML 结构

用户 Ctrl+V 粘贴的可能是带样式的富文本，但 navigator.clipboard.readText() 强制返回纯文本，所有 <a></a>、<strong></strong>、换行、缩进全被抹平。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 要保留格式，必须用 navigator.clipboard.read()，它返回 ClipboardItem[]
• 遍历每个 item.types，检查是否含 'text/html'，再用 item.getType('text/html') 读取 Blob 并转字符串
• read() 要求更严：仅在 paste 事件中调用有效，且焦点必须落在 contenteditable 元素或可编辑区域（如 textarea）内

要不要继续用 document.execCommand('copy')

要，但只作为降级路径。它不推荐用于主逻辑，因为行为不可控。

• 只能复制当前选中内容，无法指定任意字符串；若 DOM 变化导致 selection 失效，就静默失败
没有 MIME 类型控制能力，不能写入 text/html 或自定义格式
• IE11 和旧版 Safari 仍依赖它，现代项目应先检测 navigator.clipboard 是否可用，再 fallback

真正难的从来不是写几行 writeText()，而是判断此刻该走哪条路：用户是点了按钮还是正在粘贴？当前环境支持 read() 还是只能退到 event.clipboardData？有没有为 HTTP 环境准备提示文案？这些分支一旦漏掉，功能就断在看不见的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！