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 |
浏览器兼容性
加载中…