前言

在现代的网页开发中，复制功能几乎一个不可或缺的部分，无论是复制文本、代码片段，还是表单内容，提供一个方便快捷的复制功能不仅可以提升用户体验，还能提高网站的交互性和易用性

当然，复制功能不仅只能提供复制纯文本，其更大的能力应该是复制富文本，如：图片、带有样式的文本等

举个栗子

在某些富文本编辑器，或者网页中，我们复制了一些东西，将其粘贴到另一个编辑器，可以发现，它保持了原位置的样式

如：我们在Typora内复制内容，将其粘贴到公众号编辑器，其内容样式会共同复制过去，与Typora内预览保持一致，利用这特性可以将Typora作为公众号的编辑器，换样式只需改变主题即可

基本原理

复制命令本质上就是通过程序控制，将内容复制到用户的剪贴板

目前，浏览器主要提供了两种方法，用于实现复制操作，分别为document.execCommand方法和Clipboard API

Document.execCommand()

其是一个传统的Web API，用于执行一些剪切、复制和粘贴等编辑操作，其兼容性如下：

document.execCommand()是大约在 1990 年代末期，于早期的 Web 标准中引入的

尽管该API仍然在许多浏览器中受到支持，但其使用逐渐减少；在许多主流浏览器的开发者文档中，document.execCommand() 已经被标记为弃用，不建议使用；主要原因是其存在一些安全和隐私方面的问题，可能会被恶意使用进行未经授权的数据访问；同时，由于不同浏览器对其API的实现存在差异，可能会给开发带来无法预料的BUG

该API现在主要作为一些兼容性开发需要，用于处理在不支持新API的浏览器内使用

execCommand()主要有三个操作：

• document.execCommand('copy') — 复制

使用该API，需要先选中目标文本，然后再调用API执行复制，复制结果就会出现在剪切板

代码示例

以上代码将复制操作封装为一个函数，调用即可复制传入内容，具体使用时，可在页面提供一个按钮，由用户点击触发复制

注意：复制操作尽量不要有脚本自主执行，某些浏览器(由于安全考虑)可能会报错，可放在监听函数(如点击事件内)，由用户主动触发操作

• document.execCommand('cut') — 剪切

剪切命令与复制命令使用上几乎一致，只需在选择后，调用document.execCommand("cut")执行剪切即可

• document.execCommand('paste') — 粘贴

首先需获取粘贴位置焦点，然后再调用命令执行粘贴

代码如下

与复制等操作一致，粘贴最好也由用户主动触发执行，尽量避免脚本自动执行，防止报错

虽然，在一般情况下，document.execCommand依旧能实现目标，并且兼容性也可以

但在一些需要复杂内容复制情况下，document.execCommand就难以实现了，其只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容；并且，由于它是同步的API，如果操作大量数据，页面会出现卡顿

Clipboard API

其是一个现代的Web API，旨在提供对剪贴板的更好控制和更安全的操作，能够访问剪贴板，并且处理文本、图像等多种数据类型

Clipboard API最早是在2015年左右，提出初步提案，其设计为一个异步API，并能够提供比 document.execCommand() 更细粒度的控制；在2017年，其规范逐步成熟，在部分浏览器得到实验性支持，最终在2019年左右得到广泛支持和采用

其兼容性大致如下：

主要特点

• 异步操作：所有操作都是异步的，返回一个Promise，不会阻塞主线程，提升了用户体验
• 安全性：使用时，浏览器会要求用户明确授权，防止恶意网站未经许可访问剪贴板数据；在某些浏览器中(如Chrome)，规定只有HTTPS协议的页面(生产环境；开发环境localhost允许使用非加密协议)才能使用这个API
• 数据类型支持：能处理多种数据类型，不仅限于纯文本，还包括图像、HTML等
• 事件处理：提供了copy、cut和paste事件，使开发者能够更灵活地处理剪贴板操作

主要API

在浏览器在，使用Clipboard API主要通过navigator.clipboard属性，其返回一个Clipboard对象，关于Clipboard API的操作都通过这个对象进行

如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持该API

Clipboard对象主要提供了四个方法，用于读写操作剪切板，都是异步方法，返回一个Promise对象；在使用时，浏览器有时会弹出确认权限授权的弹出，同意后即可正常使用，如用户拒绝，脚本将会报错，可将对应代码放入try ··· catch中，处理报错，防止影响页面

针对权限问题，也可以通过navigator.permissions主动获取权限状态，在回调内再使用Clipboard API

当state为granted或prompt，即可调用API

针对Clipboard的权限名主要有

clipboard-read读操作

clipboard-write写操作

不同浏览器权限名称可能不同

Clipboard.writeText()

用于将纯文本写入剪切板

• text为要写入剪切板的纯文本字符串

Clipboard.readText()

用于从剪贴板读取纯文本

• text为剪贴板中存储的纯文本字符串

读取到文本后，即可对其进行一些粘贴等的操作

Clipboard.write()

用于将各种数据(如文本、图片、HTML)写入剪贴板

• items为包含要写入剪贴板的数据项的数组；每个数据项是一个ClipboardItem对象

创建一个ClipboardItem实例需要传入一个对象，这个对象的键是MIME类型，值是包含数据的Blob对象

• ClipboardItem.types属性可获取该剪贴项可用的MIME类型，结果为一个数组
• ClipboardItem.getType(type)方法可获取剪贴项内对应MIME类型的数据，返回一个Promise对象
• 一个ClipboardItem可以有多个MIME项，如：一个对象有text/html和text/plain两项，表示其既可以粘贴为纯文本，对支持HTML粘贴的，也可以粘贴为富文本

一个复制图片的栗子

Clipboard.read()

用于从剪贴板读取各种数据(如文本、图片、HTML)

• items为一个从剪贴板读取的数据项的数组；每个数据项是一个ClipboardItem对象

事件

除了API外，Clipboard API还提供了一些监听事件，用于监听copy、cut、patse等操作的发生

• copy：当用户执行复制操作(通过快捷键或右键菜单)时触发
• 该事件的默认行为是将当前选中的内容(如有)复制到系统剪贴板
• cut：当用户执行剪切操作(通过快捷键或右键菜单)时触发
• 该事件的默认行为是将当前选中的内容(如有)复制到系统剪贴板，并从当前文档中移除
• paste：当用户执行粘贴操作(通过快捷键或右键菜单)时触发

• 监听回调函数返回一个参数，为一个ClipboardEvent对象，通过其可对剪切板数据做一定操作

通过这些事件，我们可以增强应用的复制、剪切等操作，如：在复制内容后面添加上版权声明或格式化粘贴内容等