Clipboard API

Clipboard API提供了响应剪贴板的功能（复制、粘贴、剪贴）和操作的功能，必须使用Permissions API获取权限后才能访问剪贴板，没有授权则是不允许读取剪贴板内容的。

Permissions API

这个api提供了权限的一些操作，但是浏览器只支持查询Permissions.query()和撤销的支持，现在撤销也被废弃，所以只能能使用的方法只有查询权限的方法
使用navigator.permissions来使用Permissions API

const checkAuth = async ()=>{
    const res = await navigator.permissions.query({name: 'clipboard-read'});
    return res.state === 'granted';
}

使用上边的代码可以查看是不是拥有剪贴板的权限
navigator.permissions.query会返回一个对象其中包含state属性，来表示这个权限的状态

granted (授予) 不会再弹出获取权限的弹框
denied (拒绝) 不会再弹出获取权限的弹框，使用剪贴板时候会有报错
prompt (询问) 没有点击同意或者拒绝关闭了获取权限弹框的状态

read方法

read方法可以获取剪贴板的任意内容。该方法需要用户明确给予授权。
read方法会返回一个Promise对象，状态变为fulfilled后会得到一个数组，每个数组成员都是ClipboardItem的实例。
ClipboardItem会有一个属性types和一个方法getType()

types 返回一个可用的MIME类型的数组。比如复制一段文字他的MIME类型就为text/plain、`text/html

getType 这个方法会返回一个Promise对象，状态变为fulfilled会得到一个Blob对象。参数接受一个MIME类型，不传或者找不到MIME类型会返回一个错误。

if(checkAuth()){
    navigator.clipboard.read().then(async data => {
        const res = await data[0].getType(data[0].types[0]);
        console.log(res)
    })
}else{
    alert('没有权限')
}

readText方法

readText方法方法可以获取剪贴板的文本内容。该方法需要用户明确给予授权。
返回一个Promise对象，状态变为fulfilled会得到复制的内容，若复制的不是文本内容则是空字符串

if(checkAuth()){
    navigator.clipboard.readText().then(data => {
        console.log(data);
    })
}else{
    alert('没有权限')
}

write方法

write可以将任意数据写入剪贴板，可以是文本数据，也可以是二进制数据
接受一个ClipboardItem实例作为参数，表示写入剪贴板的数据。

const write = async ()=>{
    const imgURL = 'https://blog-img-joker.oss-cn-nanjing.aliyuncs.com/blogImg/2023/5/29/q7C8OT-I1myzBtHQF.png';
    const data = await fetch(imgURL);
    const blob = await data.blob();
    await navigator.clipboard.write([
        new ClipboardItem({
            [blob.type]: blob
        })
    ]);
}

chrome只支持写入png格式的图片

writeText方法

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

1
2
3

const write = async ()=>{
    await navigator.clipboard.writeText('Hello World')
}

Document.execCommand()

Document.execCommand()是操作剪贴板的传统方法，各种浏览器都支持。但是现在已经被弃用，为了兼容性了解了解。

document.execCommand(‘copy’)

const copy = text=>{
    const input = document.createElement('input');
    document.body.appendChild(input)
    input.value = text;
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
}

document.execCommand(‘paste’)

很多浏览器已经不支持了

const paste = ()=>{
    const input = document.getElementById('input');
    input.focus();
    document.execCommand('paste');
}

js复制粘贴的操作