JS 读写剪贴板

document.execCommand API

1. 复制操作

   复制时，先选中文本，然后调用document.execCommand('copy'):

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

   注意：复制操作最好由用户触发，如果脚本自主执行，可能某些浏览器会报错

2. 剪贴操作：

   同复制操作

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

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

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

缺点：

1. 只能将选中的内容复制到剪贴板，无法写入任意内容
2. 同步操作遇到大量数据，容易卡顿，有些浏览器还会跳出提示框，要求用户许可，
   在用户选择前页面会失去响应

Clipboard API

1. 申请权限

   浏览器规定，只有 HTTPS 协议的页面和开发环境（localhost）才能使用 clipboard API。
   其次，在调用时需要明确获得用户许可，权限使用 Permission API 获取：

   const queryOpts = {
     // 'clipboard-read' 为读取剪贴板权限， 'clipboard-write' 为写权限
     name: "clipboard-read",
     // 控制调用 clipboard API 时是否需要用户触发，默认值因浏览器而异，不要省略该参数
     allowWithoutGesture: false,
   };
   const permissionStatus = await navigator.permissions.query(queryOps);
   // permissionStatus 可能返回这三个值：
   // 1. 'granted': 表示用户允许
   // 2. 'denied': 表示用户拒绝
   // 3. 'prompt': 表示用户未明确允许，与拒绝相同
   

2. 从剪贴板读取数据

   // 读取文本
   const text = await navigator.clipboard.readText();
   // 读取任意数据
   const clipboardItems = await navigator.clipboard.read();
   clipboardItems.forEach(clipboardItem => {
     // 通过 mime type 获取 Blob 对象
     const blob = await clipboardItem.getType('text/plain');
   })
   

3. 将数据写入剪贴板

   // 写纯文本数据
   await navigator.clipboard.writeText("text");
   // 同时写入多个数据
   const canvas = document.getElementById("canvas");
   const blob = await canvas.toBlob();
   const text = new Blob(["text"], { type: "text/plain" });
   const item = new ClipboardItem({
     [blob.type]: blob,
     [text.type]: text,
   });
   await navigator.clipboard.write([item]);
   

注意：

1. 只有 HTTPS 协议的页面和开发环境可以使用
2. 需要 permission API 获得用户许可
3. 页面窗口失去焦点时调用 clipboard API 会报错