CF_HTML是Windows剪贴板中用于传递带样式HTML片段的特定格式,需用navigator.clipboard.write()配合text/html与text/plain双格式Blob写入,并严格遵循StartFragment/EndFragment等结构规范。

HTML剪贴板格式(CF_HTML)本身不“支持复制粘贴”,它只是 Windows 剪贴板上一种特定的数据格式,用于在应用间传递带样式的 HTML 片段。能否成功复制粘贴,取决于你写入的内容是否符合规范、目标应用是否解析 CF_HTML,以及浏览器或系统是否允许该操作。
为什么直接 writeText() 无法粘贴为富文本
调用 navigator.clipboard.writeText() 只会写入纯文本格式(CF_TEXT),即使传入的是 HTML 字符串,目标应用(如 Word、Outlook、Notion)也只会当作文本渲染,不会解析标签。要让粘贴结果保留加粗、颜色、链接等样式,必须显式写入 CF_HTML 格式。
-
writeText()写入的是纯文本,无格式信息 - Word/Excel 等只识别
CF_HTML中的StartFragment/EndFragment区间内容 - 浏览器内 JS 无法直接调用系统 API 写入
CF_HTML(受限于沙箱) - 所以 Web 页面想实现“粘贴为 HTML”,得靠
navigator.clipboard.write()+Blob构造多格式数据
Web 端写入 CF_HTML 的正确方式:用 write() 而非 writeText()
现代浏览器(Chrome 66+、Edge 79+、Firefox 122+)支持 navigator.clipboard.write(),可同时写入多种格式。关键是要构造一个包含 text/html 和 text/plain 的 ClipboardItem。
- HTML 片段必须包裹在
<!--StartFragment-->和<!--EndFragment-->之间 -
StartHTML/EndHTML/StartFragment/EndFragment偏移量必须精确计算(通常由浏览器自动处理,不用手算) - 推荐用模板字符串生成最小合法结构,例如:
Version:0.9\r\nStartHTML:00000000\r\nEndHTML:00000000\r\nStartFragment:00000000\r\nEndFragment:00000000\r\n<html><body>\r\n<!--StartFragment -->\r\n<b>Hello</b>\r\n<!--EndFragment-->\r\n</body></html>
- 实际代码中应先生成完整 HTML 字符串,再转成
Blob,最后传给write()
常见失败场景和绕过限制的方法
即使代码逻辑正确,仍可能因权限、上下文或目标环境失败:
立即学习“前端免费学习笔记(深入)”;
- 页面未运行在 HTTPS 或
localhost下 →navigator.clipboard为undefined - 调用不在用户手势(如
click)回调中 → 报错"Permission denied" - 目标应用(如某些 Markdown 编辑器)忽略
text/html,只读text/plain→ 必须同时提供降级文本 - Firefox 对
write()支持较晚,且要求document.hasFocus()→ 可加setTimeout微调时机 - 若需兼容 IE 或老版本 Chrome,只能放弃
CF_HTML,改用execCommand("copy")+ 隐藏iframe模拟(效果有限)
后端或桌面程序写入 CF_HTML 更直接
在 Node.js(配合 node-clipboardy)或 C++/C# 桌面程序中,可以直接调用系统 API 注册 "HTML Format" 并写入完整格式字符串。这时无需担心权限和上下文,但要注意:
- 偏移量字段(如
StartFragment)必须是 8 位数字字符串,不足补零 - 换行必须用
\r\n,不能只用\n - UTF-8 BOM 不允许出现,否则 Word 可能解析失败
- 外部上下文(
preceding-context)可为空,但<html><body>结构不能省略
真正难的不是拼格式,而是让不同应用对同一段 CF_HTML 解析出一致结果——Word 和 Excel 对 style 属性的支持程度差异很大,而 Notion 甚至会过滤掉 class。如果目标只是“看起来像 HTML”,优先保证 StartFragment 内容语义清晰、标签闭合、无 JS 依赖;别指望它在所有地方都完美还原 CSS。



















