Clipboard API
剪贴板 Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。从权限 Permissions API 获取权限之后，才能访问剪贴板内容；如果用户没有授予权限，则不允许读取或更改剪贴板内容
Clipboard对象获取
我们不需要手动创建Clipboard对象，通过 navigator.clipboard获取Clipboard对象：
浏览器兼容性
常用的方法
read
用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。该方法需要用户明确给予许可。该方法返回一个Promise对象。一旦该对象的状态变为resolved，就可以获得一个数组，每个数组成员都是ClipboardItem对象的实例。
async function getClipboardContents() {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log(URL.createObjectURL(blob));
}
}
} catch (err) {
console.error(err.name, err.message);
}
}
readText
用于复制剪贴板里面的文本数据。
document.body.addEventListener(
'click',
async (e) => {
const text = await navigator.clipboard.readText();
console.log(text);
}
)
write
方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。该方法接受一个 ClipboardItem 实例作为参数，表示写入剪贴板的数据。
try {
const imgURL = xxx';
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob
})
]);
} catch (err) {
console.error(err.name, err.message);
}
writeText
用于将文本内容写入剪贴板。
document.body.addEventListener(
'click',
async (e) => {
await navigator.clipboard.writeText('Yo')
}
)
实践
文本复制
async clipboardText() {
const text = this.$refs.textClipboard.innerText; // 获取需要复制的文本内容
const textBlob = this.createTextBlob(text);
try {
const item = new ClipboardItem({
[textBlob.type]: textBlob
});
this.select(document.querySelector(".container"));
await navigator.clipboard.write([item]);
console.log("文本复制成功");
} catch (error) {
console.error("文本复制失败", error);
}
},
// 普通文本
createTextBlob(text) {
return new Blob([text], { type: "text/plain" });
},
// 用于实现选择的效果
select(element) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
},
图片复制
async clipboardImg() {
try {
const imageBlob = await this.createImageBlob(
"xxx"
);
const res = await navigator.clipboard.write([
new ClipboardItem({
[imageBlob.type]: imageBlob
})
]);
const text = await navigator.clipboard.readText();
console.log(res, "Image copied.");
console.log("已读取剪贴板中的内容：", text);
} catch (err) {
console.error(err.name, err.message);
}
},
// 往剪贴板写入图像
async createImageBlob(url) {
const response = await fetch(url);
return await response.blob();
},
复制文本图片
//// 复制文本图片
async writeDataToClipboard() {
if (this.askWritePermission()) {
if (navigator.clipboard && navigator.clipboard.write) {
const textBlob = this.createTextBlob("大家好，我是小花！");
const imageBlob = await this.createImageBlob(
"xxx"
);
try {
const tempItem = {};
tempItem["text/plain"] = textBlob;
tempItem["image/png"] = imageBlob;
const item = new ClipboardItem(tempItem);
this.select(document.querySelector(".container"));
await navigator.clipboard.write([item]);
console.log("文本和图像复制成功");
} catch (error) {
console.error("文本和图像复制失败", error);
}
}
}
},
// 请求剪贴板权限
async askWritePermission() {
try {
const { state } = await navigator.permissions.query({
name: "clipboard-write"
});
return state === "granted";
} catch (error) {
return false;
}
},
// 往剪贴板写入图像
async createImageBlob(url) {
const response = await fetch(url);
return await response.blob();
},
// 普通文本
createTextBlob(text) {
return new Blob([text], { type: "text/plain" });
},
// 用于实现选择的效果
select(element) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
},
//// 读取剪贴板中已写入的数据
async readDataFromClipboard() {
if (this.askReadPermission()) {
if (navigator.clipboard && navigator.clipboard.read) {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
console.dir(clipboardItem);
for (const type of clipboardItem.types) {
const blob = await clipboardItem.getType(type);
console.log("已读取剪贴板中的内容：", await blob.text());
}
}
} catch (err) {
console.error("读取剪贴板内容失败: ", err);
}
}
}
},
// 向用户请求剪贴板读取权限
async askReadPermission() {
try {
const { state } = await navigator.permissions.query({
name: "clipboard-read"
});
return state === "granted";
} catch (error) {
return false;
}
}
// 模版内容
<template>
<div class="container">
<div ref="textClipboard">
<div>客户名称：XX客户</div>
<div>序号：XX</div>
<div>事件名称：xx事件</div>
<div>受影响资产：1.1.1.1</div>
<div>恶意IOC（如有）：XX.com</div>
<div>风险等级：xxxxx</div>
<div>处置建议：xxxx</div>
</div>
<div class="img-list">
<div v-for="(item, index) in imgList" :key="index" class="img-box">
<img :src="item.url" alt="" />
</div>
</div>
<el-button @click="clipboardText">复制文本</el-button>
<el-button @click="clipboardImg">复制图片</el-button>
<el-button @click="writeDataToClipboard">复制图片和文本</el-button>
<el-button @click="readDataFromClipboard">粘贴图片和文本</el-button>
</div>
</template>
// script
data() {
return {
imgList: [
{
url: require("xxx")
},
{
url: require("xxx")
},
{
url: require("xxx")
}
]
};
},
注意事项
- Chrome浏览器规定，只有HTTPS协议的页面才能使用这个API。不过，开发环境（
localhost）允许使用非加密协议 - 调用时需要明确获得用户的许可。权限的具体实现使用了Permissions API，跟剪贴板相关的有两个权限：
clipboard-write（写权限）和clipboard-read（读权限）。"写权限"自动授予脚本，而"读权限"必须用户明确同意给予。也就是说，写入剪贴板，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取 - 只支持写入PNG格式的图片，其他格式需要转换为png
- ClipboardItem对象中可以写入多个不同格式的数据，接收一个MIME格式作为key的对象，value是blob数据
参考网址：
