HTML/JavaScript实现复制文本、复制HTML、复制图片功能

最新推荐文章于 2025-03-26 11:57:45 发布

会编码的派大星

最新推荐文章于 2025-03-26 11:57:45 发布

阅读量2k

点赞数 8

分类专栏： JavaScript HTML 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_67584973/article/details/139066021

版权

文章目录

复制文本

navigator.clipboard.writeText 接收一个字符串参数，写入到剪贴板中。

<button onclick="copyText()">复制文本</button>
<script>
function copyText() {
     
	// navigator.clipboard.writeText 将文本内容写入剪贴板
	navigator.clipboard.writeText("这是复制的内容")
}
</script>

复制HTML

通过指定的文本类型来构建Blob、在结合 navigator.clipboard.write 将带有样式的 HTML 内容写入剪贴板

<button onclick="copyHTML()">复制HTML</button>
<script>
function copyHTML() {
     
	const data = new Blob([' <b style="color: red;">这就是个例子</b>'], {
      type: "text/html" })
	const item = new ClipboardItem(