将 Blob 数据保存到剪贴板

发表于 更新于 分类于 Waline： 阅读次数： 本文字数： 206 阅读时长 ≈ 1 分钟

将 Blob 数据保存到剪贴板，需要调用浏览器的 Clipboard API，浏览器会做一些安全限制，不是所有情况都能调用的到。

示例

1
2
3
4
5
6
7
8
9
10
11
12
async function writeClipboard(blob) {
  try {
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob,
      }),
    ]);
    console.log("Blob copied.");
  } catch (err) {
    console.error(err.name, err.message);
  }
}

限制

要将 Blob 数据保存到剪贴板，需要构建一个 ClipboardItem 对象，然后通过 Clipboard API 写入到剪贴板。

  1. 浏览器支持

    首先你的浏览器要能够支持此接口，可以根据 MDN 上的说明来确定是否兼容。

  2. 仅支持通过在 Https 加密的安全域名或 localhost 下调用

    Clipboard API 包含 Clipboard、ClipboardItem、ClipboardEvent 三个接口。在满足要求的时候，是都可以调用到的；否则将只能调用 ClipboardEvent 接口，其他两个将会表现为未定义。