JS实现复制富文本到剪贴板/粘贴板的最佳实践
背景
最近有想实现一个功能，通过点击一个button按钮，来复制网页内容(含html)来实现复制后粘贴到邮件或者word具有富文本的效果。在网站翻了一些资料，要么就是方法已经被弃用，要么就是兼容性特别差，要么就是不能复制成为富文本。最后还是通过clipboard-polyfill.js(https://github.com/lgarron/clipboard-polyfill)来解决了问题。下面来介绍怎么使用。
使用
npm install clipboard-polyfill
然后从node_modules dist文件夹里面找出来核心的js(clipboard-polyfill.js)放于html同级目录。
- 编写html，实现复制功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>gen_codereview</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script src="clipboard-polyfill.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(() =>{
var item = new clipboard.ClipboardItem({
"text/html": new Blob(
[document.getElementById('div1').outerHTML],
{ type: "text/html" }
)
});
clipboard.write([item]);
alert('复制成功，请前去word粘贴')
})
});
</script>
</head>
<body>
<button id="btn1">
点击复制如下div内容
</button>
<div contenteditable="true" id="div1" style="font-size: 12px;border: 1px dashed;margin-top: 20px;padding: 10px;width: fit-content;color: red;">
this is content
</div>
</body>
</html>
- 页面展示如下，点击按钮复制。
- 进入work，粘贴内容效果如下。
结语
今天的内容就先分享到这里，使用过程中有什么问题，欢迎下方留言讨论哟。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」