定栓
定栓

js操作剪贴板讲解

文章目录

    • 复制（剪切）到剪贴板
      • Document.execCommand()
      • Clipboard复制
        • Clipboard.writeText()
        • Clipboard.write()
      • copy，cut事件
    • 从剪贴板进行粘贴
      • document.execCommand('paste')
      • Clipboard粘贴
        • Clipboard.readText()
        • Clipboard.read()
      • paste 事件
    • 安全性和权限
    • 浏览器兼容性

在操作系统级别，剪贴板允许应用程序之间传输数据。

在现代web应用中，提供复制、剪切、粘贴等与剪贴板交互的功能已成为标配，极大的提高了用户的便利性。

但由于涉及到跨域和隐私问题，浏览器对这种交互进行了严格的限制。例如，当前浏览的网站不应能够无授权地访问从另一来源的网站复制的内容。这样可以防止恶意网站读取或修改剪贴板内容，确保用户数据的安全。

一般来说，脚本不应该改动用户的剪贴板，以免不符合用户的预期。但是，有些时候这样做确实能够带来方便，比如"一键复制"功能，用户点击一下按钮，指定的内容就自动进入剪贴板。

复制（剪切）到剪贴板

Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。它支持复制、剪切以及下文提到的粘贴操作。

  • document.execCommand('copy')（复制）
  • document.execCommand('cut')（剪切）

我们可以使用document.queryCommandSupported()方法来检查当前浏览器是否支持特定的命令。这对于在执行操作之前进行检查非常有用。

如，检测当前浏览器是否支持copy命令，则执行

document.queryCommandSupported('copy') // true

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

我们可以按照自己的“想象”，用脚本自动执行这块逻辑

<input type="text" value="caoyuan" />

const inputElement = document.querySelector('#input'); // 选中元素
inputElement.select(); // 选中输入框
document.execCommand('copy'); // 进行复制

理想很丰满，实际很骨感。代码执行完之后，文本输入框会被选中，但并没有将输入框中的字符写入到剪贴板中。还需要我们自己手动进行下复制操作（ctrl+c）。

这里我们考虑是浏览器阻止了脚本直接访问页面上已存在的元素并进行复制操作。那我们考虑是脚本自己创建输入框，并对输入框的值进行复制呢？

const inputElement = document.createElement("input");
inputElement.value = "caoyuan";
document.body.appendChild(inputElement);
inputElement.select();
document.execCommand("copy");
document.body.removeChild(inputElement);

结果依然是不行，那么考虑的是，这个复制操作需要在用户的操作上下文中，比如执行了点击事件，在点击事件回调函数中执行这块逻辑。

<body>
    <button id="copy">copybutton>
body>

document.querySelector('#copy').onclick = function() {
  if (!document.queryCommandSupported('copy')) return
    
  const inputElement = document.createElement("input");
  inputElement.value = "caoyuan";
  document.body.appendChild(inputElement);
  inputElement.select();
  document.execCommand("copy");
  document.body.removeChild(inputElement);
}

结果符合预期。

在上述代码中

  1. 我们首先创建一个input元素，并将要复制的文本设置为其值。
  2. 然后，我们将input元素添加到文档中，并使用select()方法选中文本。
  3. 最后，我们使用document.execCommand("copy")将选中的文本复制到剪贴板。
  4. 完成后，我们将textarea元素从文档中移除。

剪切过程则修改下执行命令为document.execCommand("cut")，其余操作代码过程完全一致，在此不赘述。

在Clipboard API成为标准之前，document.execCommand()是用来操作剪贴板的主要方法。尽管这个方法在其早期非常有用，但在现今，体现出越来越多的局限性：

  • 无法写入：它只能将选中的内容复制到剪贴板，无法向剪贴板写入任意格式内容。
  • 同步操作: 它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应。
  • 技术过时: 现代浏览器正在逐步弃用此方法，因为它不够安全，也不符合最新的Web标准。可以参考这篇文章document.execCommand。
  • 兼容性问题: 不同浏览器对document.execCommand()的支持有所不同，这可能导致一些不一致的行为，可以参考这里兼容性。

Clipboard复制

Clipboard API 是下一代的剪贴板操作方法，比传统的document.execCommand()方法更强大、更合理。可以看到这个api的兼容性 Clipboard，在主流PC端浏览器上尚可。

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

navigator.clipboard属性返回一个可以读写剪切板内容的 Clipboard 对象，所有操作都通过这个对象进行。

const clipboardObj = navigator.clipboard;

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

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

首先，Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API。不过，开发环境（localhost）允许使用非加密协议。

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

js操作剪贴板讲解_第1张图片

另外，需要注意的是，脚本读取的总是当前focus(聚焦)页面的剪贴板，所以代码执行的上下文应该是用户进行页面操作的回调行为，比如click行为等。

这带来的一个问题是，如果把相关的代码粘贴到开发者工具中直接运行，会报错，因为这时的页面未聚焦。

(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
})();

如果你把上面的代码，粘贴到开发者工具里面运行，就会报错。因为代码运行的时候，开发者工具窗口是当前页，这个页面不存在 Clipboard API 依赖的 DOM 接口。一个解决方法就是，相关代码放到setTimeout()里面延迟运行，在调用函数之前快速点击浏览器的页面窗口，使其聚焦。

setTimeout(async () => {
  const text = await navigator.clipboard.readText();
  console.log(text);
}, 2000);

上面代码粘贴到开发者工具运行后，快速点击一下网页的页面窗口，使其变为当前页，这样就不会报错了。

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

Clipboard.writeText()

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

document.body.addEventListener(
  'click',
  async () => {
    await navigator.clipboard.writeText('cao yuan')
  }
)

上面示例是用户在网页点击后，脚本向剪贴板写入文本数据。

该方法不需要用户许可，但是最好也放在try...catch里面防止报错。

document.body.addEventListener(
  'click',
  async () => {
    try {
      await navigator.clipboard.writeText(location.href);
      console.log('Page URL copied to clipboard');
    } catch (err) {
      console.error('Failed to copy: ', err);
    }
  }
)

Clipboard.write()

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

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

ClipboardItem()是浏览器原生提供的构造函数，用来生成ClipboardItem实例，它接受一个对象作为参数，该对象的键名是数据的 MIME 类型，键值是Blob数据类型。

处理图像:

你可以读取或写入图像到剪贴板。这对于需要允许用户快速复制和粘贴图像的应用程序非常有用。

try {
  // 请求远程图片获取blob数据
  const imgURL = 'https://xxx/xxx.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);
}

上面示例中，脚本向剪贴板写入了一张图片。注意，Chrome 浏览器目前只支持写入 PNG 格式的图片（From version 76, the image/png MIME type is supported.）。

由于远程图片获取受到跨域及业务token限制，我们可以通过本地文件上传png图片来获取File数据类型。

File基于Blob，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件，同时 Blob 对象的API也被列在 File 接口中

<input type="file" id="file" />

document.querySelector('#file').addEventListener('change', async function (e) {
  // 本地上传获取图片blob数据
    const file = e.target.files[0]
    try {
        await navigator.clipboard.write([
            new ClipboardItem({
                [file.type]: file
            })
        ]);
        console.log('Image copied.');
    } catch (err) {
        console.error(err.name, err.message);
    }
})

此处图片写入到剪贴板需要与下文中“Clipboard.read()”段落，配合使用。否则png图片透明背景部分，粘贴到其他软件中，背景被黑色覆盖。

处理HTML：

如果你希望保留复制内容的格式（如字体、颜色等），你可以使用 text/html MIME类型来读写数据。

下面的例子是将同一个剪贴项的多种格式的值，写入剪贴板，一种是文本数据，另一种是二进制数据，供不同的场合粘贴使用。

<button id="button">copybutton>

document.querySelector('#button').onclick = async function() {
    const textPlain = new Blob(['text is plain'], {type: 'text/plain'});
    const textHtml = new Blob(['
text is html
'], {type: 'text/html'});
    await navigator.clipboard.write([
      new ClipboardItem({
          'text/html': textHtml,
          'text/plain': textPlain,
      })
    ]);
}

copy，cut事件

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

下面的示例是将用户放入剪贴板的文本，转为大写。

const inputElement = document.querySelector('#input');

inputElement.addEventListener('copy', (event) => {
  event.preventDefault();
  const selection = window.getSelection();
  event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
});

值得注意的是，目前在 Firefox, Edge (非 Chromium 版本) 及 Internet Explorer 中，getSelection() 对