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

文章目录

复制文本

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

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

复制HTML

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

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({ 'text/html': data })
	// navigator.clipboard.write 将任意数据写入剪贴板,可以是文本数据也可以是二进制数据
	navigator.clipboard.write([item])
}
</script>

复制图片

单图片复制

获取到图片的响应对象,从响应对象中获取图片的 Blob 数据。

使用 ClipboardItem 创建一个包含图片 Blob 数据的 ClipboardItem 对象

在使用 navigator.clipboard.write 方法将包含图片的剪贴板项写入剪贴板

html 复制代码
<button onclick="copyImage()">复制图片</button>
<script>
async function copyImage() {
	const res = await fetch('./image.png');
	const bold = await res.blob()

	const item = new ClipboardItem({ 'image/png': bold })
	navigator.clipboard.write([item])
}
</script>

全代码

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 800px;
            margin: 0 auto;
        }

        .content {
            padding-top: 100px;
        }

        .editor {
            width: 100%;
            height: 160px;
            margin-top: 10px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="content">
        <button onclick="copyText()">复制文本</button>
        <button onclick="copyHTML()">复制HTML</button>
        <button onclick="copyImage()">复制图片</button>

        <div class="editor" contenteditable="true"></div>
    </div>

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

        function copyHTML() {
            const data = new Blob([' <b style="color: red;">这就是个例子</b>'], { type: "text/html" })
            const item = new ClipboardItem({ 'text/html': data })
            // navigator.clipboard.write 将任意数据写入剪贴板,可以是文本数据也可以是二进制数据
            navigator.clipboard.write([item])
        }

        async function copyImage() {
            const res = await fetch('./image.png');
            const bold = await res.blob()

            const item = new ClipboardItem({ 'image/png': bold })
            navigator.clipboard.write([item])
        }
    </script>
</body>

</html>
相关推荐
mrsk几秒前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan2 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE6 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年8 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能19 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房19 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃20 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂23 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7724 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js