剪贴板操作 Clipboard API

介绍

一共有三种方法可以实现剪贴板操作

• Document.execCommand()方法
• 异步的 Clipboard API
• copy 事件和 paste 事件

Document.execCommand()

Document.execCommand() 是操作剪贴板的传统方法，各种浏览器都支持，支持复制、剪切和粘贴这三个操作。

• document.execCommand(‘copy’)（复制）
• document.execCommand(‘cut’)（剪切）
• document.execCommand(‘paste’)（粘贴）

复制：

复制时，先选中文本，然后调用 document.execCommand('copy')，选中的文本就会进入剪贴板

const inputElement = document.querySelector("#input");
inputElement.select();
document.execCommand("copy");

粘贴
粘贴时，调用document.execCommand('paste')，就会将剪贴板里面的内容，输出到当前的焦点元素中

const pasteText = document.querySelector("#output");
pasteText.focus();
document.execCommand("paste");

缺点：

• 首先，它只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容。
• 其次，它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应

为了解决这些问题，还是使用 Clipboard API

---

异步 Clipboard API

比传统的document.execCommand()方法更强大、更合理。

它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。

navigator.clipboard 属性返回 Clipboard 对象，所有操作都通过这个对象进行

// 如果navigator.clipboard属性返回undefined，就说明当前浏览器，不支持这个 API
const clipboardObj = navigator.clipboard;

由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。

首先，Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。【开发环境 localhost 也可以】

其次，调用时需要明确获得用户的许可。权限的具体实现使用了 Permissions API，跟剪贴板相关的有两个权限：clipboard-write（写权限）和clipboard-read（读权限）。”写权限”自动授予脚本，而”读权限”必须用户明确同意给予。
也就是说，写入剪贴板，脚本可以自动完成，但是读取剪贴板时，浏览器会弹出一个对话框，询问用户是否同意读取。

Clipboard 对象

Clipboard 对象提供了四个方法，用来读写剪贴板。它们都是异步方法，返回 Promise 对象

1. Clipboard.readText() 用于复制剪贴板里面的文本数据

document.body.addEventListener("click", async (e) => {
  try {
    const text = await navigator.clipboard.readText();
    console.log(text);
  } catch {
    console.log("用户拒绝读取");
  }
});

2. Clipboard.read() 用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）。该方法需要用户明确给予许可。

该方法返回一个 Promise 对象。一旦该对象的状态变为 resolved，就可以获得一个数组，每个数组成员都是 ClipboardItem 对象的实例。

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);
        console.log(URL.createObjectURL(blob));
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

• ClipboardItem 对象表示一个单独的剪贴项，每个剪贴项都拥有 ClipboardItem.types 属性和 ClipboardItem.getType()方法。

• ClipboardItem.types 属性返回一个数组，里面的成员是该剪贴项可用的 MIME 类型，比如某个剪贴项可以用 HTML 格式粘贴，也可以用纯文本格式粘贴，那么它就有两个 MIME 类型（text/html 和 text/plain）。

• ClipboardItem.getType(type)方法用于读取剪贴项的数据，返回一个 Promise 对象。该方法接受剪贴项的 MIME 类型作为参数，返回该类型的数据，该参数是必需的，否则会报错。

3. Clipboard.writeText() 方法用于将文本内容写入剪贴板

document.body.addEventListener("click", async (e) => {
  await navigator.clipboard.writeText("Yo");
});

4. Clipboard.write() 方法用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。

该方法接受一个 ClipboardItem 实例作为参数，表示写入剪贴板的数据

try {
  const imgURL = "https://dummyimage.com/300.png";
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob,
    }),
  ]);
  console.log("Image copied.");
} catch (err) {
  console.error(err.name, err.message);
}

---

copy 事件，cut 事件

用户向剪贴板放入数据时，将触发 copy 事件

const source = document.querySelector(".source");

source.addEventListener("copy", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  event.preventDefault();
});

事件对象的 clipboardData 属性包含了剪贴板数据。它是一个对象，有以下属性和方法

• Event.clipboardData.setData(type, data)：修改剪贴板数据，需要指定数据类型。
• Event.clipboardData.getData(type)：获取剪贴板数据，需要指定数据类型。
• Event.clipboardData.clearData([type])：清除剪贴板数据，可以指定数据类型。如果不指定类型，将清除所有类型的数据。
• Event.clipboardData.items：一个类似数组的对象，包含了所有剪贴项，不过通常只有一个剪贴项。

下面是拦截用户复制 👇

const clipboardItems = [];

document.addEventListener("copy", async (e) => {
  e.preventDefault();
  try {
    let clipboardItems = [];
    for (const item of e.clipboardData.items) {
      if (!item.type.startsWith("image/")) {
        continue;
      }
      clipboardItems.push(
        new ClipboardItem({
          [item.type]: item,
        })
      );
      await navigator.clipboard.write(clipboardItems);
      console.log("Image copied.");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

---

paste 事件

用户使用剪贴板数据，进行粘贴操作时，会触发 paste 事件。

document.addEventListener("paste", async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  console.log("Pasted text: ", text);
});