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>
相关推荐
草莓熊Lotso几秒前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
JS.Huang6 分钟前
【JavaScript】原生函数
开发语言·javascript·ecmascript
Olrookie13 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6451 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
ftpeak2 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
莫的感情2 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥2 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python2 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_2 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js