Javascript 使用 navigator.clipboard 实现复制功能

navigator.clipboard 为前端提供复制以及粘贴功能，这个 api 提供了四个异步的操作方法，返回的都是 Promise 对象。

writeText 将文本内容写入剪贴板

async function writeToClipboard(content) {
    try {
        await navigator.clipboard.writeText(content);
        
        console.log('Successfully copied to clipboard!');
    } catch (err) {
        console.error('Failed to write text: ', err);
    }
}

readText 读取剪贴板里的文本内容

async function readFromClipboard() {
    try {
        const clipboardContents = await navigator.clipboard.readText();
        
        console.log('clipboardContents', clipboardContents);
    } catch (err) {
        console.error('Failed to read text: ', err);
    }
}

write 将文本数据、二进制数据、图片数据等写入剪贴板

async function writeToClipboard(content) {
    try {
        const type = "text/plain";
        const blob = new Blob([content], { type });
        const data = [new ClipboardItem({ [type]: blob })];
        await navigator.clipboard.write(data);
        
        console.log('Successfully copied to clipboard!');
    } catch (err) {
        console.error('Failed to write content: ', err);
    }
}

read 读取剪贴板里的文本数据、二进制数据、图片数据等

const copyBtn = document.querySelector('#js_copy');
const containerEle = document.querySelector('#js_container');

copyBtn.addEventListener('click', copyToClipboard);

async function readFromClipboard() {
    containerEle.innerText = '';
    
    try {
        const clipboardContents = await navigator.clipboard.read();

        for (const item of clipboardContents) {
            for (const mimeType of item.types) {
                if (mimeType === 'text/plain') {
                    continue;
                }

                if (mimeType === 'image/png') {
                    const image = new Image();

                    image.src = 'image.png';
                    image.alt = 'PNG image from clipboard';

                    const blob = await item.getType('image/png');
                    image.src = URL.createObjectURL(blob);
                    containerEle.appendChild(image);
                } else if (mimeType === 'text/html') {
                    const blob = await item.getType('text/html');
                    const blobText = await blob.text();

                    const clipHTML = document.createElement('div');
                    clipHTML.innerHTML = blobText;
                    containerEle.appendChild(clipHTML);
                }
            }
        }
    } catch (err) {
        console.error('Failed to copy text: ', err);
    }
}