uni-app无法直接复制富文本,只能通过降级为纯文本或条件编译写html实现;微信等主流app不解析html,最稳方案是提供干净纯文本副本。

uni-app 不能直接复制富文本
uni-app 的 uni.setClipboardData() 只接受纯字符串,传入 HTML、Markdown 或带样式的节点会自动转成 [object Object] 或空串——这不是 bug,是设计限制。所谓“复制富文本”,实际只有两个可行路径:复制 HTML 字符串(供其他支持 HTML 粘贴的场景用),或降级为纯文本(最通用)。没有第三个选项。
HTML 字符串能被哪些端识别
不是所有平台都把 HTML 当富文本处理:
- 微信小程序:
wx.setClipboardData()内部只收字符串,粘贴到微信聊天框/备忘录里仍是纯文本,不渲染 HTML 标签 - App(iOS/Android):原生剪贴板可存 HTML 格式,但能否被目标 App 解析取决于对方是否实现
NSPasteboardTypeHTML或ClipData.MIMETYPE_TEXT_HTML支持;微信、钉钉、飞书等主流 App 基本忽略 HTML,只取纯文本 fallback - H5:
navigator.clipboard.writeText()只写文本;要写 HTML,必须用navigator.clipboard.write()+Blob+text/htmlMIME type,但仅 Chrome/Firefox 支持,Safari 完全不认,且需用户手势+HTTPS
结论:如果你的目标只是“让用户在微信里粘贴出加粗/换行”,别走 HTML 路线——微信根本不解析它。
真正可用的富文本复制方案
按场景选,没有银弹:
- 想保留换行、缩进、简单格式 → 先用正则或 DOM API 把 HTML 转成带
\n和空格的纯文本,再调uni.setClipboardData()。例如:<p>第一段</p> <p>第二段</p>→"第一段\n\n第二段" - 需要兼容 H5 且必须传 HTML → 必须条件编译,H5 单独走
navigator.clipboard.write(),并 fallback 到document.execCommand('copy')+ 隐藏iframe注入 HTML(极少见,维护成本高) - 内容来自
<rich-text></rich-text>组件 → 它不提供 DOM 访问,只能靠服务端返回纯文本字段,或前端预存一份 plainText 备份 - 用户自己编辑的富文本(如 uView 的
u-parse)→ 提前在编辑器提交时,用DOMParser或正则提取纯文本,不要等点击复制时再解析
容易被忽略的坑
很多人卡在最后一步:
-
uni.setClipboardData({ data: htmlString })看似成功,但粘贴出来全是标签源码 —— 因为你没转义也没降级,用户看到的是<strong>加粗</strong> - H5 端用
navigator.clipboard.write()写 HTML,却忘了加{ 'text/plain': plainText, 'text/html': htmlString }多格式数据,导致 Safari/Edge 粘贴失败 - 在
onLoad或mounted里预处理 HTML 再赋值给 data,结果复制时还是空 ——uni.setClipboardData()必须由用户点击直接触发,中间不能隔 Promise.then 或 setTimeout - 微信小程序未在
manifest.json配置"scope.writeClipboard",真机调试时报permission-denied且无提示
富文本复制不是“把 HTML 塞进去就行”,而是判断目标粘贴环境后,主动做一次内容降级或格式适配。最稳的落地方式,永远是提供一份干净的纯文本副本。











