在日常业务开发中，比如复制后添加版权信息，点击复制等，需要在场景中进行复制粘贴操作。以下是几种实现方案。剪贴板API剪贴板API提供了响应剪贴板命令（剪切、复制和粘贴）以及异步读取和写入系统剪贴板的能力。在从PermissionsAPI获得权限之前，无法访问剪贴板内容；如果用户不授予权限，则不允许读取剪贴板内容。可以使用全局Navigator.clipboard访问剪贴板。Navigator.clipboard属性返回剪贴板对象，通过它执行所有操作。Clipboard对象提供四种读取和写入剪贴板的方法。它们都是返回Promise对象的异步方法。read()方法read()方法可以从剪贴板中读取任意数据，可以是文本数据，也可以是二进制数据（比如图片）。此方法需要用户的明确许可。read()方法返回一个Promise对象。一旦对象的状态被解析，一个数组就可用，它的每个成员都是ClipboardItem对象的一个??实例。ClipboardItem对象表示一个单独的剪贴板项目，每个剪贴板项目都有一个类型属性和一个getType()方法。ClipboardItem.types属性返回一个数组，其成员是剪贴板项目的可用MIME类型。例如，如果剪贴板项目可以以HTML格式或纯文本格式粘贴，则它有两种MIME类型（text/html和text/plain）。ClipboardItem.getType(type)方法用于读取剪贴板项的数据并返回一个Promise对象。此方法接受报废项目的MIME类型作为参数并返回此类型的数据。这个参数是必须的，否则会报错。示例：//获取权限navigator.permissions.query({name:'clipboard-read'}).then(result=>{if(result.state=='granted'||result.state=='prompt'){//读取剪贴板navigator.clipboard.read().then(data=>{console.log(data)})}else{alert('请允许读取剪贴板！')}})readText()方法readText()方法可以从剪贴板读取文本内容。此方法需要用户的明确许可。示例：//获取权限navigator.permissions.query({name:'clipboard-read'}).then(result=>{if(result.state=='granted'||result.state=='prompt'){//读取剪贴板navigator.clipboard.readText().then(text=>{console.log(text)})}else{alert('请允许读取剪贴板！')}})write()方法write()方法可以向剪贴板写入任意数据，可以是文本数据，也可以是二进制数据。此方法不需要用户许可。write()方法接受一个ClipboardItem实例作为参数，表示写入剪贴板的数据。示例：//写入图像constimgURL='https://dummyimage.com/300.png'constdata=awaitfetch(imgURL)constblob=awaitdata.blob()awaitnavigator.clipboard.write([newClipboardItem({[blob.type]:blob})])注意Chrome目前只支持写入PNG格式的图片。writeText()方法writeText()方法可以将文本内容写入剪贴板。此方法不需要用户许可。示例：navigator.clipboard.writeText('writeclipboardtextcontent')安全限制由于用户可能将敏感数据（如密码）放入剪贴板，允许脚本任意读取会造成安全隐患，因此该API的安全限制较多.首先，Chrome浏览器规定只有HTTPS协议的页面才能使用这个API。但是，开发环境（本地主机）允许使用非加密协议。其次，调用时需要明确获得用户的许可。权限的具体实现使用PermissionsAPI。与剪贴板相关的权限有两种：clipboard-write（写权限）和clipboard-read（读权限）。“写入权限”自动授予脚本，而“读取权限”必须在用户明确同意的情况下授予。也就是说，写入剪贴板可以由脚本自动完成，但是在读取剪贴板时，浏览器会弹出对话框询问用户是否同意读取。Document.execCommand()API已被弃用，不推荐使用它，但让我们了解一下它的兼容性。document.execCommand()方法用于操作可编辑区域的内容。document.execCommand('copy')document.execCommand('copy')复制操作示例：
