Clipboard API 是一个强大的 Web API，它允许我们与用户的剪贴板进行交互，实现复制和粘贴的功能。
Clipboard API 的基本方法
Clipboard API 提供了以下方法，用于实现复制和粘贴：
- navigator.clipboard.writeText(text)：这个方法用于将给定的文本复制到剪贴板。如果操作成功完成，它会返回一个已解析的 Promise。我们可以使用 await 来等待复制操作完成，或者使用 then 和 catch 来处理异步操作的结果。
- navigator.clipboard.write(data) ：这个方法用于写入更复杂的数据类型，如文件、图像等。如果操作成功完成，它会返回一个已解析的 Promise。
- navigator.clipboard.readText()：这个方法用于从剪贴板读取文本内容。它会返回一个 Promise，Promise 解析后会提供剪贴板中的文本内容。
- navigator.clipboard.read()：这个方法用于读取更复杂的数据类型，如文件、图像等。它会返回一个 Promise，Promise 解析后会提供剪贴板中的数据。
下文使用 readText、writeText 做一个简单的复制粘贴文本示例。
示例1：复制和粘贴文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clipboard API 示例</title>
<style>
#output {
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Clipboard API 示例</h1>
<input type="text" id="inputField" placeholder="输入要复制的文本">
<button id="copyButton">复制文本到剪贴板</button>
<button id="pasteButton">从剪贴板粘贴文本</button>
<div id="output">粘贴的文本将显示在这里。</div>
<script>
const copyButton = document.getElementById('copyButton');
const pasteButton = document.getElementById('pasteButton');
const inputField = document.getElementById('inputField');
const output = document.getElementById('output');
// 复制文本到剪贴板
copyButton.addEventListener('click', async () => {
const text = inputField.value;
if (text.trim() === '') {
alert('请输入要复制的文本。');
return;
}
try {
await navigator.clipboard.writeText(text);
alert('文本已复制到剪贴板！');
} catch (error) {
console.error('复制失败：', error);
alert('复制失败，请手动复制。');
}
});
// 从剪贴板粘贴文本
pasteButton.addEventListener('click', async () => {
try {
const text = await navigator.clipboard.readText();
output.textContent = `粘贴的文本：${text}`;
} catch (error) {
console.error('粘贴失败：', error);
alert('粘贴失败，请手动输入。');
}
});
</script>
</body>
</html>效果：
注意
复制文本可以成功，点击"粘贴文本"需要用户先进行授权。
如果一不小心点了"禁止"，可以点击如下图的图标，修改为"允许"；或者再次点击"粘贴文本"按钮，点击"允许"。
示例 2：复制和粘贴图片
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clipboard Image Example</title>
<style>
img {
width: 50%;
}
</style>
</head>
<body>
<h1>Clipboard Image Example</h1>
<img id="sourceImage" src="./bing0509.png" alt="Sample Image">
<br />
<button id="copyImageButton">复制图片</button>
<button id="pasteImageButton">粘贴图片</button>
<div id="imageDisplay"></div>
<script>
const copyImageButton = document.getElementById('copyImageButton');
const pasteImageButton = document.getElementById('pasteImageButton');
const sourceImage = document.getElementById('sourceImage');
const imageDisplay = document.getElementById('imageDisplay');
// 复制图片到剪贴板
copyImageButton.addEventListener('click', async () => {
try {
const response = await fetch(sourceImage.src);
const blob = await response.blob();
const item = new ClipboardItem({ 'image/png': blob });
await navigator.clipboard.write([item]);
alert('图片已复制到剪贴板！');
} catch (err) {
console.error('无法复制图片到剪贴板：', err);
}
});
// 从剪贴板粘贴图片
pasteImageButton.addEventListener('click', async () => {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
const types = clipboardItem.types;
if (types.includes('image/png')) {
const blob = await clipboardItem.getType('image/png');
const imageUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = imageUrl;
imageDisplay.appendChild(img);
alert('图片已从剪贴板粘贴！');
break;
}
}
} catch (err) {
console.error('无法从剪贴板粘贴图片：', err);
}
});
</script>
</body>
</html>- 复制图片：当用户点击 "复制图片" 按钮时，我们首先通过 fetch 获取图像的 Blob，然后将其包装到 ClipboardItem 对象中，最后使用 navigator.clipboard.write([item]) 将图像写入剪贴板。
- 粘贴图片：当用户点击 "粘贴图片" 按钮时，我们使用 navigator.clipboard.read() 读取剪贴板中的内容，然后遍历 ClipboardItem 对象，寻找包含图像的项目。如果找到，我们创建一个新图像元素，并将其添加到页面上。
效果： 