JS通过 navigator.clipboard 操作粘贴板代码示例

JS通过 navigator.clipboard 操作粘贴板代码示例

• 目标：通过示例，快速了解 JS navigator.clipboard 如何使用和注意事项
• 学习准备：打开掘金页面，在控制台复制代码即可运行，代码测试于 Chrome 106
• 学习时长：约 10 分钟
• 写作时间：2022-10-26

介绍

MDN - Clipboard

📢：这个功能必须在 HTTPS 下才生效。以 Chrome 为例，不满足则 navigator.clipboard 的值为 undefined 。

所有的 API 都是异步的，返回 Promise 。 有如下方法：

1. readText() —— 读取文本内容
2. read() —— 可以读取任意数据（如图片）
3. write() —— 写任意数据
4. writeText() —— 写文本呢绒

readText() 🌰

先在控制台执行如下代码，同时剪贴板中有文本内容，然后及时把焦点放到页面内即可。

为了方便直接在 DevTools 控制台调试，特意加了一个 setTimeout 3 秒，方便把焦点移到页面内。

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

📢：可以看到，这个 API 首次在某个域名使用时，会弹出如下确认框：

💡执行的时候「焦点」必须在页面内，否则 Promise Reject ，以 Chrome 为例（通常使用场景是用户点击某个按钮触发剪贴板操作，这里是在控制台中演示代码，因此需特意提醒下。也需注意不能在没有用户交互的时候操作剪贴板）：

焦点不在页面时报错：Uncaught (in promise) DOMException: Document is not focused.

writeText() 🌰

先在控制台执行如下代码，然后及时把焦点放到页面内即可。

setTimeout(async () => {
    if (window.getSelection(0).type === 'Range') {
        const content = window.getSelection(0).toString();
        await navigator.clipboard.writeText(content);
        console.log('选中内容已复制到系统粘贴板，内容：', content);
    } else {
        console.log('未选中内容', window.getSelection(0));
    }
}, 3000)

read() 读取图片 🌰

先在网页中右键复制图片，然后在控制台执行如下代码，最后及时把焦点放到页面内即可。

setTimeout(async () => {
    const clipboardContents = await navigator.clipboard.read();
    console.log(clipboardContents);
    for (const item of clipboardContents) {
        if (!item.types.includes('image/png')) {
            throw new Error('Clipboard contains non-image data.');
        }
        const blob = await item.getType('image/png');
        console.log(URL.createObjectURL(blob));
        document.body.innerHTML = `<img src="${URL.createObjectURL(blob)}" />` + document.body.innerHTML
        var reader = new FileReader();
        reader.readAsDataURL(blob); 
        reader.onloadend = function() {
            var base64data = reader.result;                
            console.log(base64data);
        }
    }
}, 3000)