ClipboardItem
Baseline 2024 *
新推出
ClipboardItem 介面是 Clipboard API 的一部分，用於表示單個數據項格式。在使用 Clipboard.read() 和 Clipboard.write() 讀取或寫入剪貼簿資料時會用到它。
ClipboardItem 介面允許開發者使用單一型別來表示一系列不同的資料格式。
注意： read() 和 write() 方法可用於處理文字字串和由 Blob 例項表示的任意資料項。但是，如果您僅處理文字，則使用 Clipboard.readText() 和 Clipboard.writeText() 方法會更方便。
建構函式
ClipboardItem()-
建立一個新的
ClipboardItem物件，其中鍵為 MIME 型別，值為資料。
例項屬性
types只讀-
返回一個包含
ClipboardItem中可用 MIME 型別的Array。 presentationStyle只讀-
返回以下值之一：
"unspecified"、"inline"或"attachment"。
靜態方法
ClipboardItem.supports()-
檢查剪貼簿是否支援給定的 MIME 型別。這使得網站在嘗試寫入資料之前可以檢測 MIME 型別是否受支援。
例項方法
示例
將文字寫入剪貼簿
在此示例中，我們首先定義兩個常量，分別引用包含一些文字的 <p> 元素和一個 <button> 元素。
接下來，我們定義一個名為 copyToClipboard() 的函式。該函式首先將 "text/plain" MIME 型別儲存在一個常量中，然後建立一個名為 clipboardItemData 的物件，該物件包含一個屬性，其鍵是 MIME 型別，值是我們想要複製到剪貼簿的文字（在本例中是 <p> 元素的內容）。由於我們處理的是文字，可以直接傳遞它，而無需建立 Blob。
我們使用 ClipboardItem() 建構函式構建一個新的 ClipboardItem 物件，並將其傳遞給 Clipboard.write() 方法以將文字複製到剪貼簿。
最後，我們將一個事件監聽器新增到 <button> 上，以便在按下按鈕時執行該函式。
const textSource = document.querySelector("p");
const copyBtn = document.querySelector("button");
async function copyToClipboard() {
const type = "text/plain";
const clipboardItemData = {
[type]: textSource.textContent,
};
const clipboardItem = new ClipboardItem(clipboardItemData);
await navigator.clipboard.write([clipboardItem]);
}
copyBtn.addEventListener("click", copyToClipboard);
將影像寫入剪貼簿
在此，我們使用 supports() 來檢查 image/svg+xml MIME 資料型別是否受支援。如果受支援，我們將使用 Fetch API 獲取一個 SVG 影像，然後將其讀取為一個 Blob，我們可以使用該 Blob 建立一個 ClipboardItem 並將其寫入剪貼簿。
async function writeClipImg() {
try {
if (ClipboardItem.supports("image/svg+xml")) {
const imgURL = "/my-image.svg";
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
console.log("Fetched image copied.");
} else {
console.log("SVG images are not supported by the clipboard.");
}
} catch (err) {
console.error(err.name, err.message);
}
}
從剪貼簿讀取
在此，我們透過 clipboard.read() 方法返回剪貼簿上的所有項。然後利用 ClipboardItem.types 屬性來設定 getType() 的引數並返回相應的 blob 物件。
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);
// we can now use blob here
}
}
} catch (err) {
console.error(err.name, err.message);
}
}
規範
| 規範 |
|---|
| Clipboard API 和事件 # clipboarditem |
瀏覽器相容性
載入中…