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 |
瀏覽器相容性
載入中…