WEB 剪切板操作 navigator.clipboard 的使用

| 2021-09-16

浏览器允许 JavaScript 脚本读写剪贴板，自动复制或粘贴内容，而这一切都是通过 navigator clipboard 的 API 来实现的。剪贴板可以用于存储数据并在应用程序内部或应用程序之间使用的临时空间。这些操作的 API 都是异步操作并返回一个 promise。

Mime 类型

定义了数据的类型，mime 类型在写入和读取剪贴板时给出，以指示传递的数据类型。所有浏览器的导航器 API 都支持这些 mime 类型。

text/plain
text/html
image/png
text/uri-list

Api

navigator.clipboard.writeText：用于将文本内容写入剪贴板
navigator.clipboard.write：用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。
navigator.clipboard.readText ：用于复制剪贴板里面的文本数据
navigator.clipboard.read ：用于复制剪贴板里面的数据，可以是文本数据，也可以是二进制数据（比如图片）

navigator.clipboard.writeText

用于将文本内容写入剪贴板。

支持的浏览器

Chrome、Firefox 和 Safari

代码示例

async function writeDataToClipboard() {
    const result = await navigator.clipboard.writeText("Hello");
    console.log(result);
}

navigator.clipboard.write

用于将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据。

支持的浏览器

Chrome、Safari，Firefox 则需要通过使用about:config设置 asyncClipboard 标志来支持。

代码示例

async function copyImage() {
    const input = document.getElementById("file");
    const blob = new Blob(["sample 2"], { type: "text/plain" });
    const clipboardItem = new ClipboardItem({
        "text/rt": blob,
        "image/png": input.files[0],
    });
    const response = await navigator.clipboard.write([clipboardItem]);
    console.log(response);
}

当写入的 mimeType 不是文本、html 或图像时，Chrome 中会发生错误。

Safari 支持使用对 blob 的 promise 来创建剪贴板项，这在必须从服务器获取要写入的数据的情况下非常实用。

async function copyImage() {
    const fetchImage = ()=>{
        const input = document.getElementById("file");
        return Promise.resolve(input.files[0]);
    };
    const clipboardItem = new ClipboardItem({
        ["image/png"]:fetchImage()
    });
    const reponse = await navigator.clipboard.write([clipboardItem]);
    console.log(reponse)
}

navigator.clipboard.readText

用于复制剪贴板里面的文本数据。

代码示例

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

navigator.clipboard.read

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

错误信息

读取权限被拒绝：在 navigator.clipboard.read 上有一个允许剪贴板访问的提示，如果用户在提示出现时单击阻止剪贴板访问，则会出现此错误。
剪贴板上没有有效数据：当剪贴板中没有文本、html 或图像并且包含一些其他数据类型或空剪贴板时，会出现此错误。
前上下文中用户代理或平台不允许该请求，可能是因为用户拒绝了权限：在 navigator.clipboard.read 上，如果剪贴板数据不是来自同一个浏览器按钮，则 Safari 中会显示一个额外的粘贴按钮。如果未单击此错误，则会引发此错误。

本文文字及图片出自 InfoQ

本文文字及图片出自