剪贴板项目

基线 2024

新可用

自 2024 年 6 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

安全上下文：此功能仅在 安全上下文 (HTTPS) 中可用，在某些或所有 支持的浏览器 中可用。

ClipboardItem 接口是 剪贴板 API 的一部分，它表示一个单项格式，用于在使用 clipboard.read() 和 clipboard.write() 读取或写入剪贴板数据时使用。

使用 ClipboardItem 接口来表示数据的优势在于它使开发人员能够处理各种文件类型和数据的范围。

注意：要使用文本，请查看 Clipboard.readText() 和 Clipboard.writeText() 方法，它们是 Clipboard 接口的一部分。

构造函数

ClipboardItem()

使用 MIME 类型 作为键和 Blob 作为值创建一个新的 ClipboardItem 对象。

实例属性

此接口提供以下属性。

types 只读

返回一个包含在 ClipboardItem 中可用的 MIME 类型的 Array。

presentationStyle 只读

返回以下之一："unspecified"、"inline" 或 "attachment"。

静态方法

此接口定义以下方法。

ClipboardItem.supports()

检查剪贴板是否支持给定的 MIME 类型。这使网站能够在尝试写入数据之前检测剪贴板是否支持 MIME 类型。

实例方法

此接口定义以下方法。

getType()

返回一个 Promise，该 Promise 解析为请求的 MIME 类型 的 Blob，如果未找到 MIME 类型，则返回错误。

示例

写入剪贴板

这里我们使用 supports() 来检查是否支持 image/svg+xml MIME 数据类型。如果是，我们会使用 "Fetch API" 获取图像，然后将其读取到 Blob 中，我们可以使用该 Blob 创建一个写入剪贴板的 ClipboardItem。

js
async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/svg+xml")) {
      const imgURL = "/myimage.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 对象。

js
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);
  }
}

规范

规范
剪贴板 API 和事件
# clipboarditem

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅