文章目录
1、Clipboard API
Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，其就能提供
系统剪贴板的读写访问能力。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。
所有 Clipboard API 的方法都是异步的;它们返回一个Promise 对象，在剪贴板访问完成后被兑现。如果剪贴板访问被拒绝，promise 也会被拒绝。
在js 上，
navigator.clipboard
- 谷歌浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。
- 读取剪切板的时候，会有一个弹框，只有允许了，才可以读取
2、方法
2.1 read
理论上，该方法可以
返回任意数据（与 readText（） 不同，readText（） 只能返回文本）。 浏览器通常支持读取文本、HTML 和 PNG 图像数据 — 有关详细信息，请参阅浏览器兼容性。
经过测试，只读读取剪切板的第一条内容
- 返回值：promise
navigator.clipboard.read()
2.2 readText
这个方法只能读取剪切板的
文本内容
- 返回值：promise
const destination = document.getElementById("outbox");
destinationImage.addEventListener("click", () => {
navigator.clipboard
.readText()
.then((clipText) => {
// 内容
});
});
2.3 write
Clipboard 接口的 write（） 方法将任意数据（如图像）
写入剪贴板，完成后完成返回的 Promise。 这可用于实现剪切和复制功能。
该方法理论上可以写入任意数据（与 writeText（） 不同，writeText（） 只能写入文本）。浏览器通常支持写入文本、HTML 和 PNG 图像数据 — 有关详细信息，请参阅浏览器兼容性。
实际测试了一下，只有png 支持度最好
// Get canvas can add an event handler for the click event.
const canvas = document.getElementById("canvas");
canvas.addEventListener("click", copyCanvasContentsToClipboard());
async function copyCanvasContentsToClipboard() {
// Copy canvas to blob
const blob = await canvas.toBlob();
// Create ClipboardItem with blob and it's type, and add to an array
const data = [new ClipboardItem({ [blob.type]: blob })];
// Write the data to the clipboard
await navigator.clipboard.write(data);
}
2.4 writeText
剪贴板接口的 writeText（） 方法将指定的文本写入系统剪贴板，返回一个 Promise，该 Promise 在系统剪贴板更新后解析。
3、阻止用户复制内容
右击选择，
复制或者 按键盘的ctrl+c都能触发这个事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="div1">
<h3>禁止复制</h3>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, nostrum provident qui quis eveniet, voluptatum
porro
expedita labore ex quasi numquam eligendi iusto animi deleniti quod obcaecati id cupiditate sint!
</span>
</div>
<hr>
<script>
document.addEventListener('copy', function (e) {
e.preventDefault() // 阻止默认行为，就是阻止用户复制
console.log('正在复制~~~');
// alert('禁止复制')
navigator.clipboard.writeText('禁止复制！！！！')
})
</script>
</body>
</html>
4、在复制的文字后面追加内容
类似于 csdn、掘金，复制别人文章的内容后，后面追加了 一些内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button>复制</button>
<script>
let inputEle = document.querySelector('input')
let btnEle = document.querySelector('button')
btnEle.onclick = function (e) {
navigator.clipboard.writeText(inputEle.value + '\n呆呆狗编写，交钱了吗，让你复制了吗')
}
</script>
</body>
</html>
5、读取剪切板内容
准备一张图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
navigator.clipboard.read()
.then(data => {
data.forEach(clipboardItem => {
console.log('剪贴板数据：', clipboardItem);
clipboardItem.types.forEach(type => {
clipboardItem.getType(type).then(async data => {
console.log('遍历当前项数据', data);
if (type == "text/plain") {
// 文本
let spanEl = document.createElement('span');
spanEl.innerText = await data.text();
document.body.appendChild(spanEl);
} else if (type == "image/png") {
let imgEl = document.createElement('img');
imgEl.src = URL.createObjectURL(data);
document.body.appendChild(imgEl);
} else if (type == "text/html") {
let spanEl = document.createElement('span');
spanEl.innerHTML = await data.text();
document.body.appendChild(spanEl);
}
});
});
});
})
.catch(err => {
console.error('无法读取剪贴板内容：', err);
});
</script>
</body>
</html>
6、让图片插入到剪切板
浏览器支持png，其他的不支持
这个是png的图片
现在的剪切板是空的
执行下面代码后，插入成功了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>让图片插入倒剪切板</button>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script>
let btnEl = document.querySelector('button')
btnEl.addEventListener('click', function () {
axios({
// url: '//resource.teld.cc/teldimage/142/fdb66c6e900e420795bfc2e8a07ba071.png',
url: '//resource.teld.cc/teldimage/142/60602b3255ec4a809beebc75a7743f43.png',
// url: '//resource.teld.cc/teldimage/142/7481cc7f72d94dd6a1bff1312ca66ca9.gif', // Failed to execute 'write' on 'Clipboard': Type image/gif not supported on write.
// url: '//resource.teld.cc/teldimage/142/7f3df4a214f94b2099a41ba249048c8e.jpg',// DOMException: Failed to execute 'write' on 'Clipboard': Type image/jpeg not supported on write.
// url: '//resource.teld.cc/telddoc/142/7bacb70e6d184509a7df1a5a7e76305d.pdf',// PDF 格式不支持写入。DOMException: Failed to execute 'write' on 'Clipboard': Type application/pdf not supported on write.
responseType: "blob"
})
.then(res => {
console.log(res.data);
navigator.clipboard.write([new ClipboardItem({
// 'image/png': res.data
[res.data.type]: res.data
})]).then(res => {
console.log('写入成功', res);
})
})
})
</script>
</body>
</html>