Clipboard API复制粘贴

105 阅读1分钟

Clipboard是浏览器的一套复制粘贴相关的api,具体用法直接看下方代码

// 监听复制事件
document.addEventListener('copy', (e) => {
    e.preventDefault();// 阻止默认事件,使复制失败
    navigator.clipboard.writeText('hello');// 写入内容到剪贴板
})

// 读取剪贴板的内容
navigator.clipboard.readText().then((text) => {// 因为要获取用户允许,所以返回的是一个promise
    console.log(text);
})

// 监听粘贴事件
document.addEventListener('paste', (e) => {
    if (e.clipboardData?.files.length > 0) {// 如果长度大于0,说明是粘贴的图片
        e.preventDefault();
        const file = e.clipboardData.files[0];
        const reader = new FileReader();// 创建一个文件读取器
        reader.onload = (e) => {
            console.log(e.target.result);// 得到一个base64编码的图片
        }
        reader.readAsDataURL(file);// 读取文件
    }
})