Clipboard: write() 方法
write() 方法属于 Clipboard 接口，它将任意的 ClipboardItem 数据（例如图像和文本）写入剪贴板，并在完成时解析返回的 Promise。这可用于实现剪切和复制功能。
该方法理论上可以写入任意数据（与只能写入文本的 writeText() 不同）。浏览器通常支持写入文本、HTML 和 PNG 图像数据。
语法
write(data)
参数
data-
一个包含要写入剪贴板数据的
ClipboardItem对象数组。
返回值
一个 Promise，当数据已写入剪贴板时解析。请注意，如果底层操作系统不支持系统剪贴板上的多个原生剪贴板项，则只会写入数组中的第一个 ClipboardItem。
如果剪贴板无法写入，则 Promise 会被拒绝。
异常
NotAllowedErrorDOMException-
如果不允许写入剪贴板，则抛出异常。
安全注意事项
写入剪贴板只能在 安全上下文 中进行。
其他安全要求已在 API 概述主题的 安全注意事项 部分介绍。
示例
将文本写入剪贴板
此示例函数在按下按钮时，用指定的字符串替换剪贴板的当前内容。请注意，对于这种情况，您也可以轻松使用 Clipboard.writeText()。
button.addEventListener("click", () => setClipboard("<empty clipboard>"));
async function setClipboard(text) {
const type = "text/plain";
const clipboardItemData = {
[type]: text,
};
const clipboardItem = new ClipboardItem(clipboardItemData);
await navigator.clipboard.write([clipboardItem]);
}
setClipboard() 函数在 type 常量中指定了 "text/plain" MIME 类型，然后指定一个 clipboardItemData 对象，其键是 MIME 类型，值是我们想要写入剪贴板的传入文本。然后，我们构造一个新的 ClipboardItem 对象，并将 clipboardItemData 对象传递进去。
最后，使用 await 调用 write() 将数据写入剪贴板。
将 Canvas 内容写入剪贴板
此示例在 Canvas 上绘制一个蓝色矩形。您可以单击该矩形将 Canvas 的内容作为图像复制到剪贴板，然后选择另一个元素并在其中粘贴剪贴板中的内容。
HTML
HTML 仅定义了我们的 <canvas> 元素和 id 为 target 的 <div> 元素，Canvas 图像将粘贴到此处。
<canvas id="canvas" width="100" height="100"></canvas>
<div id="target">Paste here.</div>
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
JavaScript
首先，我们定义一个 async 函数来将 Canvas 复制为 blob。它将旧的回调风格的 HTMLCanvasElement.toBlob() 方法包装成更直观的基于 Promise 的函数。
// Async/await method replacing toBlob() callback
async function getBlobFromCanvas(canvas) {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (blob) {
resolve(blob);
} else {
reject(new Error("Canvas toBlob failed"));
}
});
});
}
接下来，我们设置我们的 Canvas 并为 click 事件添加事件监听器。
当您单击蓝色矩形时，显示该矩形的 Canvas 会被复制为 blob，然后该 blob 被添加到 ClipboardItem 中，最后写入剪贴板。
const canvas = document.getElementById("canvas");
// Set up canvas
const ctx = canvas.getContext("2d");
ctx.fillStyle = "cornflowerblue";
ctx.fillRect(0, 0, 100, 100);
canvas.addEventListener("click", copyCanvasContentsToClipboard);
const target = document.getElementById("target");
async function copyCanvasContentsToClipboard() {
// Copy canvas to blob
try {
const blob = await getBlobFromCanvas(canvas);
// 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);
log("Copied");
} catch (error) {
log(error);
}
}
请注意，如果您正在获取不太常见的ファイル类型或您事先不知道类型的文件资源，您可能需要使用 ClipboardItem.supports() 来检查文件类型是否受支持，并在不支持的情况下向用户提供友好的错误消息。
然后，我们在要显示剪贴板内容的元素上定义一个 paste 事件 的事件监听器。 FileReader API 允许我们使用 readAsDataUrl 方法读取 blob，并创建一个包含 Canvas 内容的 <img> 元素。
target.addEventListener("paste", (event) => {
const items = (event.clipboardData || window.clipboardData).items;
const blob = items[0].getAsFile();
const reader = new FileReader();
reader.addEventListener("load", (event) => {
const img = new Image();
img.src = event.target.result;
target.appendChild(img);
});
reader.readAsDataURL(blob);
});
结果
结果如下所示。首先单击蓝色方块，然后选择文本“Paste here”（在此处粘贴），并使用特定于操作系统的键盘组合键从剪贴板粘贴（例如，Windows 上的 Ctrl+V）。
规范
| 规范 |
|---|
| Clipboard API 和事件 # dom-clipboard-write |
浏览器兼容性
加载中…