随着时间的推移，浏览器已经实现了多个剪贴板 API，并且在各种旧的和当前的浏览器中写入剪贴板而不触发错误是相当棘手的。在每个支持以某种方式复制到剪贴板的浏览器中，clipboard-polyfill都会尝试尽可能接近异步剪贴板 API。

github地址：https://github.com/lgarron/clipboard-polyfill

特别提醒：

以前有个类库叫clipboard-js，已经被废弃，迁移到了clipboard-polyfill

安装

npm install clipboard-polyfill

引入

import * as clipboard from "clipboard-polyfill"

使用

用JavaScript访问OS剪贴板已经有几年了，往往使用的都是document.execCommand()，不幸的是，存在一些问题：

• 剪贴板访问是同步的，这会对性能和安全性产生影响
• 支持不完整，尤其是在macOS和iOS上的Safari较旧版本上
• 权限访问因浏览器而异，并且该API永远不会被认为是优雅的

最终，它已被新的异步Clipboard API取代。虽然目前还没有被所有浏览器所支持，但是更易于使用和更强大。

为什么应用程序需要访问剪贴板？

作为开发人员，您将了解剪贴板的工作原理，并定期使用以下键盘快捷键：

• Ctrl | Cmd+C 复制
• Ctrl | Cmd+X 剪切
• Ctrl | Cmd+V 粘贴

在编程中您可能需要访问操作板，来完成你的业务逻辑，包括在剪贴板操作完成（例如添加或删除格式）后修改内容。

剪贴板访问很危险！

以编程方式访问剪贴板会引发一些安全问题：

• 用户经常复制密码或私人信息，因此任何页面都不能随意读取剪贴板数据。
• 将数据添加到剪贴板时，应限制页面。恶意页面可能会用危险命令甚至可执行文件替换复制的文本。

为避免潜在的问题，剪贴板API仅可用于通过HTTPS服务的页面（localhost也是允许的）。在iframe中运行时，父页面还必须授予clipboard-read和/或clipboard-write许可：

该API仅可用于活动的浏览器选项卡（不适用于背景选项卡），并且只能通过用户交互（例如单击）来触发。必要时，将提示用户读取剪贴板数据的权限：

当页面首次请求剪贴板访问权限时显示此警报。鉴于API是异步的并返回Promise，因此不会造成任何问题。也可以使用Permissions API检查和请求状态。

剪贴板API功能检测

当navigator.clipboard返回真实结果时，说明剪贴板API可用。例如：

但是，这不能保证浏览器支持所有功能，因此有必要进行进一步检查。例如，在撰写本文时，Chrome支持API的readText()方法，而Firefox不支持。

复制和粘贴文字

在大多数应用程序中，复制和粘贴文本将是一个有用的选项。该API非常简单：

您将需要更多的代码来检测支持并处理错误……

代码示例

剪贴板API的readText()和writeText()是更通用read()和write()方法的便捷选项，但他们无法操作二级制数据，而read()和write()能够复制和粘贴任何类型的数据，例如二进制图像。

复制需要通常由fetch() or canvas.toBlob()方法返回的Blob数据，这被传递给ClipboardItem构造函数，因此可以将其写入剪贴板：

粘贴更加复杂，因为ClipboardItem可以使用不同的内容类型返回多个对象。因此，有必要遍历每种类型，直到找到有用的格式为止。例如：

剪切，复制和粘贴事件

大多数浏览器都支持此剪贴板事件，并且处理程序函数可以使用作为参数传递的clipboardData对象，来拦截事件以进行更改。

以下函数将所有剪切或复制的文本强制为大写。请注意，将e.preventDefault()停止将覆盖它的默认剪切/复制操作：

以下代码将粘贴处理程序附加到特定<textarea>字段，该函数清除现有内容并为文本加上前缀"pasted:"：

准备使用？

Clipboard API是新的，但具有合理的浏览器支持，并且感觉比旧document.execCommand()选项更健壮，赶快试试吧！

T之家 12 月 5 日消息，有外媒发现，微软正在与谷歌合作开发一个名为“选择剪贴板”的全新 API。该 API 将升级 Chrome 和 Edge 等浏览器的现有剪贴板功能。

外媒认为，全新的剪贴板更新将大大改善 Windows 10 和 Windows 11 上的复制和粘贴功能，此次更新对于那些需要在线图像编辑、Office 应用和上传平台的人特别有用。

微软新 API 将扩展复制和粘贴功能。现在，您可以使用浏览器在网站和 Windows 应用程序之间复制和粘贴一小部分文件。支持的文件格式列表包括 .JPG 或 .JPEG、PNG、HTML 和一些其他格式。

基于 Chromium 的浏览器目前依赖于 Async Clipboard API，它也将为新的 Pickling Clipboard 提供支持，它已经允许应用程序读取和写入操作系统剪贴板的常用格式，以便网站和本机 Windows 应用程序可以与它们交互。例如，文本和图像。

使用建议的 Picple Clipboard API，您将能够复制和粘贴各种流行的文件类型，例如 .docx 和 TIFF。docx 格式用于 Microsoft Word，而 TIFF 用于图形设计。预计此更改将使依赖于用户上传内容的各种 Web 应用程序受益。

IT之家了解到，微软官方已经确认该功能现在很可能会随 Chrome 98 或 Edge 98 一起出现。值得一提的是，目前该功能仍处于开发阶段，有可能无法准确在 Chrome 98 上线。

除了这些 Chromium 改进之外，Microsoft 还在开发 Edge 独有的功能，例如 Windows Search 集成等。

Pickle Clipboard API 允许网站使用标准化的 pickle 格式读取和写入任意未净化的有效负载，以及读取和写入操作系统特定格式的有限子集（用于支持旧应用）。剪贴板格式的名称由浏览器以标准化方式进行修改，以表明内容来自网络，这允许本机应用程序选择接受未经处理的内容。

动机

强大的 Web 应用程序希望通过操作系统剪贴板（复制粘贴）与 Web 和本机应用程序交换数据负载。现有的 Web 平台有一个 API，它支持所有平台上最流行的标准化数据类型（文本、图像、富文本）。但是，此 API 不会扩展到专用格式的长尾。尤其是，当前的 Web 平台不支持自定义格式、非 Web 标准格式（如 TIFF（一种大图像格式））和专有格式（如 .docx（一种文档格式））。

演示
https://glitch.com/edit/#!/sequoia-innovative-date

文档
https://docs.google.com/document/d/1afc45MQuwxEWgoUeJCO-sOWRSzs31V4JS-kKXJNMTXw/edit