ClipboardItem - 表示单个剪贴板项目格式

ClipboardItem 是 Clipboard API 的接口，表示单个剪贴板项目格式，当通过 Clipboard API 读取或写入数据（即 clipboard.read() 和 clipboard.write()）时使用。

使用 ClipboardItem 接口来表示数据的好处是，它使开发人员能够轻松应对文件类型和数据范围的变化。

对剪贴板内容的访问是通过 Permissions API 授予的：当页面是活动选项卡时，将自动向页面授予 clipboard-write 权限。要从剪贴板读取数据，必须请求 clipboard-read 权限。

注意：要使用文本，请参见 Clipboard 接口的 Clipboard.readText() 和 Clipboard.writeText() 方法。

注意：您一次只能传递一个剪贴板项目。

构造函数

ClipboardItem.ClipboardItem()

创建一个新的 ClipboardItem 对象，以 MIME type 作为键，并以 Blob 作为值。

属性

此接口提供以下属性。

types 只读

返回一个 Array，表示 ClipboardItem 中可用的 MIME 类型。

方法

此接口定义了以下方法。

getType()

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

实例

写入剪贴板

在这里，我们通过使用 Fetch API 请求 png 图像，然后使用响应的的 blob() 方法来创建新的 ClipboardItem.ClipboardItem()，从而将新的 ClipboardItem.ClipboardItem() 写入剪贴板。

async function writeClipImg() {
  try {
    const imgURL = '/myimage.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();

    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    console.log('提取的图像已复制。');
  } 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);
        // 我们现在可以在这里使用 blob
      }

    }

  } catch (err) {
    console.error(err.name, err.message);
  }
}

规范

规范 状态 备注
Clipboard API and events
ClipboardItem 的定义		 工作草案 初始定义。

桌面浏览器兼容性

暂无兼容数据

注意：图像格式支持因浏览器而异。请参见 Clipboard 接口的浏览器兼容性表。

相关链接