网页前端开发中有时会出现这样的场景：让用户点击某个按钮，然后就能直接复制对应的文本内容，让用户可以将文本内容粘贴到想要粘贴的地方，常用于分享功能模块中。如果想要实现这种效果就需要我们去访问用户的剪贴板，然后把想要复制的内容写入其中即可，本文主要讲解两种解决方案： 和 。

先上代码：

?为了同时兼容新旧浏览器（IE！），我们一般采取下面的方式：

? 剪贴板是用于短期数据存储或者转移的数据缓存区，数据转移可以发生在不同的文档或应用程序之间。剪贴板常常实现为一个匿名的、临时的数据缓存，有时也叫做粘贴缓存，可由绝大部分位于已定义应用程序接口的环境中的程序访问。

? API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代 这种剪贴板访问方式的。但是该API需要通过 API获取用户授予的权限（ 或 ）之后，才能访问剪贴板，如果用户拒绝授予相应权限，则无法访问剪贴板，调用 对象的方法就会失败。而且该API仅在一些安全上下文环境中可用（HTTPS、localhost、127.0.0.1等），我们可以通过 的返回值来判断当前环境是否为安全上下文环境。

? 我们可以通过 和 来判断当前网页是否拥有读写剪贴板的权限（Firefox不支持！）。

? 该API在 接口上添加了只读属性 ，该属性返回一个可以读写剪切板内容的 对象，我们前端大多是通过 来访问剪贴板。

? 由于该API是一个较新的API，而且涉及的安全问题和技术复杂性太多，所以浏览器兼容性相对差一点（不支持IE）：

浏览器兼容性（Navigator.clipboard）：

? 该接口实现了 API，用于读写系统剪贴板上的文本和数据的接口，前端规范称其为异步剪贴板API（Async Clipboard API），因为该API下的所有方法都是异步的，它们会返回一个 对象，操作成功后调用 ，操作失败后调用 。

相关方法：

①

? 该方法用于从系统剪贴板中读取任意数据的副本（文本、图片等），返回一个 对象，在经过异步数据检索之后， 返回一个包含相关数据的 对象的数组，该数组含有两个数据对象，第一个对象中仅包含剪贴板中的文本数据，第二个对象中包含剪贴板中的所有内容数据。

? 该方法必须在网页获取焦点时，才能正常调用，否则会报错。而且该方法不能在JS中直接调用，只能在处理用户行为（点击等交互行为）时才能正常调用，否则会报错。

? 如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法只能访问到文件名，而无法访问到文件本身的内容。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法能正常获取到文本信息，但图片无法被获取到。

②

? 该方法从系统剪贴板读取中文本数据的副本，返回一个 对象，在经过异步数据检索之后， 返回一个包含相关文本数据的 字符串数据。

? 该方法必须在网页获取焦点时，才能正常调用，否则会报错。但是与 不同的是，该方法可以在JS中直接调用，不需要等待用户行为。

? 如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法可以访问到文件名。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法只能获取到其中文本信息。

案例代码：

页面未获取剪贴板访问权限时：

有权限但页面未获取焦点时：

有权限且页面获取焦点时：

有权限且页面获取焦点，并触发用户行为：

文本内容base64查看：

所有内容base64查看：

③ write() 

? 该方法用于写入任意数据至系统剪贴板，参数为一个 对象数组（但每次只能包含一个 对象），里面包含了要写入剪贴板的数据，返回值为一个 对象，经过异步操作之后，返回执行结果。

? 目前主流浏览器都支持写入的 MIME 数据类型有： 、 、 、 。

④ writeText() 

? 该方法用于写入文本数据至系统剪贴板，参数为一个 字符串，表示要写入剪贴板的文本数据，返回值为一个 对象，经过异步操作之后，返回执行结果。

案例代码：

执行结果：

? 该接口继承了 接口，提供了有关系统剪贴板信息修改的事件，即 、 、 事件，前端规范称其为剪贴板事件（Clipboard Event API）。

? 我们可以通过 构造函数来创建 对象，第一个参数 ，是一个字符串，表示当前事件类型的名字，可以为： 、 、 ，大小写敏感；第二个参数 是可选的，内包含一个 属性，该属性的值是一个 对象，包含了剪贴板事件所涉及的数据。

? 属性保存了一个 对象，该对象有两个用途：① 用于指定通过 和 事件写入到剪贴板中的数据，通常使用 来指定数据。② 用于从 事件中获取想要从剪贴板中读取的数据，通常使用 来获取。 表示数据类型，例如： 、 。

案例代码：

执行结果：

? 该接口表示在使用read()和write()读写剪贴板数据时，单个数据的数据格式，该数据格式中将 MIME 类型作为 ，将数据作为 。

① 创建ClipboardItem对象

? 可通过构造函数 来创建该对象，第一个参数为想要存储的数据，可以为 、 或 （但个人开发发现 对象也可以）；第二个对象参数表示数据的呈现形式，该对象只包含 属性，属性值有三种： 、 和 . 默认值为 ，但是该属性支持性特别差：Chrome、Edge、Firefox、Opera都不支持该属性， 支持该属性，所以该属性了解即可。

? 我们也可以通过 来获取当前对象的数据呈现形式。

② 读取ClipboardItem对象中的数据

? 首先我们可以通过 获取当前 对象中所有MIME 类型组成的数组，然后再通过 方法来异步读取对应的数据，返回一个Promise，读取的数据为Blob类型：

? 该方法用来操作当前聚焦的可编辑元素（ 、 ）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果，有些富文本编辑器组件就是基于该API进行开发。而且该API的兼容性很好，可以兼容到 及以上。该API已经不推荐使用了，因为现在该API已经被 全面替代，虽然目前多数主流浏览器还支持使用，但随时有可能被完全弃用。

浏览器兼容性：

参数：

? ① ：一个命令字符串，表示要执行操作的名称，常用的有： 、 、 、 等等，具体可查询：execCommand。

? ② ：一个布尔值，表示是否展示用户界面，一般为 （Firefox不支持）。

? ③ ：第一个参数中的某些命令需要的额外参数，默认为 ，例如： 需要提供插入 的 。

返回值：

? ① 一个 ：表示要执行操作是否执行成功（ ），若为 ，则表示操作不被支持或操作失败。

Clipboard

navigator.permissions.query()

MIME

ClipboardItem

ClipboardEvent

document.execCommand

PerMissions