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>
相关推荐
gnip5 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel5 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休6 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪6 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do6 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选6 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选6 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼6 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——6 小时前
前端登录鉴权详解
前端·javascript
李姆斯7 小时前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理