隨著時(shí)間的推移，瀏覽器已經(jīng)實(shí)現(xiàn)了多個(gè)剪貼板 API，并且在各種舊的和當(dāng)前的瀏覽器中寫(xiě)入剪貼板而不觸發(fā)錯(cuò)誤是相當(dāng)棘手的。在每個(gè)支持以某種方式復(fù)制到剪貼板的瀏覽器中，clipboard-polyfill都會(huì)嘗試盡可能接近異步剪貼板 API。

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

特別提醒：

以前有個(gè)類庫(kù)叫clipboard-js，已經(jīng)被廢棄，遷移到了clipboard-polyfill

安裝

npm install clipboard-polyfill

引入

import * as clipboard from "clipboard-polyfill"

使用

用JavaScript訪問(wèn)OS剪貼板已經(jīng)有幾年了，往往使用的都是document.execCommand()，不幸的是，存在一些問(wèn)題：

• 剪貼板訪問(wèn)是同步的，這會(huì)對(duì)性能和安全性產(chǎn)生影響
• 支持不完整，尤其是在macOS和iOS上的Safari較舊版本上
• 權(quán)限訪問(wèn)因?yàn)g覽器而異，并且該API永遠(yuǎn)不會(huì)被認(rèn)為是優(yōu)雅的

最終，它已被新的異步Clipboard API取代。雖然目前還沒(méi)有被所有瀏覽器所支持，但是更易于使用和更強(qiáng)大。

為什么應(yīng)用程序需要訪問(wèn)剪貼板？

作為開(kāi)發(fā)人員，您將了解剪貼板的工作原理，并定期使用以下鍵盤(pán)快捷鍵：

• Ctrl | Cmd+C 復(fù)制
• Ctrl | Cmd+X 剪切
• Ctrl | Cmd+V 粘貼

在編程中您可能需要訪問(wèn)操作板，來(lái)完成你的業(yè)務(wù)邏輯，包括在剪貼板操作完成（例如添加或刪除格式）后修改內(nèi)容。

剪貼板訪問(wèn)很危險(xiǎn)！

以編程方式訪問(wèn)剪貼板會(huì)引發(fā)一些安全問(wèn)題：

• 用戶經(jīng)常復(fù)制密碼或私人信息，因此任何頁(yè)面都不能隨意讀取剪貼板數(shù)據(jù)。
• 將數(shù)據(jù)添加到剪貼板時(shí)，應(yīng)限制頁(yè)面。惡意頁(yè)面可能會(huì)用危險(xiǎn)命令甚至可執(zhí)行文件替換復(fù)制的文本。

為避免潛在的問(wèn)題，剪貼板API僅可用于通過(guò)HTTPS服務(wù)的頁(yè)面（localhost也是允許的）。在iframe中運(yùn)行時(shí)，父頁(yè)面還必須授予clipboard-read和/或clipboard-write許可：

該API僅可用于活動(dòng)的瀏覽器選項(xiàng)卡（不適用于背景選項(xiàng)卡），并且只能通過(guò)用戶交互（例如單擊）來(lái)觸發(fā)。必要時(shí)，將提示用戶讀取剪貼板數(shù)據(jù)的權(quán)限：

當(dāng)頁(yè)面首次請(qǐng)求剪貼板訪問(wèn)權(quán)限時(shí)顯示此警報(bào)。鑒于API是異步的并返回Promise，因此不會(huì)造成任何問(wèn)題。也可以使用Permissions API檢查和請(qǐng)求狀態(tài)。

剪貼板API功能檢測(cè)

當(dāng)navigator.clipboard返回真實(shí)結(jié)果時(shí)，說(shuō)明剪貼板API可用。例如：

但是，這不能保證瀏覽器支持所有功能，因此有必要進(jìn)行進(jìn)一步檢查。例如，在撰寫(xiě)本文時(shí)，Chrome支持API的readText()方法，而Firefox不支持。

復(fù)制和粘貼文字

在大多數(shù)應(yīng)用程序中，復(fù)制和粘貼文本將是一個(gè)有用的選項(xiàng)。該API非常簡(jiǎn)單：

您將需要更多的代碼來(lái)檢測(cè)支持并處理錯(cuò)誤……

代碼示例

剪貼板API的readText()和writeText()是更通用read()和write()方法的便捷選項(xiàng)，但他們無(wú)法操作二級(jí)制數(shù)據(jù)，而read()和write()能夠復(fù)制和粘貼任何類型的數(shù)據(jù)，例如二進(jìn)制圖像。

復(fù)制需要通常由fetch() or canvas.toBlob()方法返回的Blob數(shù)據(jù)，這被傳遞給ClipboardItem構(gòu)造函數(shù)，因此可以將其寫(xiě)入剪貼板：

粘貼更加復(fù)雜，因?yàn)?/span>ClipboardItem可以使用不同的內(nèi)容類型返回多個(gè)對(duì)象。因此，有必要遍歷每種類型，直到找到有用的格式為止。例如：

剪切，復(fù)制和粘貼事件

大多數(shù)瀏覽器都支持此剪貼板事件，并且處理程序函數(shù)可以使用作為參數(shù)傳遞的clipboardData對(duì)象，來(lái)攔截事件以進(jìn)行更改。

以下函數(shù)將所有剪切或復(fù)制的文本強(qiáng)制為大寫(xiě)。請(qǐng)注意，將e.preventDefault()停止將覆蓋它的默認(rèn)剪切/復(fù)制操作：

以下代碼將粘貼處理程序附加到特定<textarea>字段，該函數(shù)清除現(xiàn)有內(nèi)容并為文本加上前綴"pasted:"：

準(zhǔn)備使用？

Clipboard API是新的，但具有合理的瀏覽器支持，并且感覺(jué)比舊document.execCommand()選項(xiàng)更健壯，趕快試試吧！

T之家 12 月 5 日消息，有外媒發(fā)現(xiàn)，微軟正在與谷歌合作開(kāi)發(fā)一個(gè)名為“選擇剪貼板”的全新 API。該 API 將升級(jí) Chrome 和 Edge 等瀏覽器的現(xiàn)有剪貼板功能。

外媒認(rèn)為，全新的剪貼板更新將大大改善 Windows 10 和 Windows 11 上的復(fù)制和粘貼功能，此次更新對(duì)于那些需要在線圖像編輯、Office 應(yīng)用和上傳平臺(tái)的人特別有用。

微軟新 API 將擴(kuò)展復(fù)制和粘貼功能。現(xiàn)在，您可以使用瀏覽器在網(wǎng)站和 Windows 應(yīng)用程序之間復(fù)制和粘貼一小部分文件。支持的文件格式列表包括 .JPG 或 .JPEG、PNG、HTML 和一些其他格式。

基于 Chromium 的瀏覽器目前依賴于 Async Clipboard API，它也將為新的 Pickling Clipboard 提供支持，它已經(jīng)允許應(yīng)用程序讀取和寫(xiě)入操作系統(tǒng)剪貼板的常用格式，以便網(wǎng)站和本機(jī) Windows 應(yīng)用程序可以與它們交互。例如，文本和圖像。

使用建議的 Picple Clipboard API，您將能夠復(fù)制和粘貼各種流行的文件類型，例如 .docx 和 TIFF。docx 格式用于 Microsoft Word，而 TIFF 用于圖形設(shè)計(jì)。預(yù)計(jì)此更改將使依賴于用戶上傳內(nèi)容的各種 Web 應(yīng)用程序受益。

IT之家了解到，微軟官方已經(jīng)確認(rèn)該功能現(xiàn)在很可能會(huì)隨 Chrome 98 或 Edge 98 一起出現(xiàn)。值得一提的是，目前該功能仍處于開(kāi)發(fā)階段，有可能無(wú)法準(zhǔn)確在 Chrome 98 上線。

除了這些 Chromium 改進(jìn)之外，Microsoft 還在開(kāi)發(fā) Edge 獨(dú)有的功能，例如 Windows Search 集成等。

Pickle Clipboard API 允許網(wǎng)站使用標(biāo)準(zhǔn)化的 pickle 格式讀取和寫(xiě)入任意未凈化的有效負(fù)載，以及讀取和寫(xiě)入操作系統(tǒng)特定格式的有限子集（用于支持舊應(yīng)用）。剪貼板格式的名稱由瀏覽器以標(biāo)準(zhǔn)化方式進(jìn)行修改，以表明內(nèi)容來(lái)自網(wǎng)絡(luò)，這允許本機(jī)應(yīng)用程序選擇接受未經(jīng)處理的內(nèi)容。

動(dòng)機(jī)

強(qiáng)大的 Web 應(yīng)用程序希望通過(guò)操作系統(tǒng)剪貼板（復(fù)制粘貼）與 Web 和本機(jī)應(yīng)用程序交換數(shù)據(jù)負(fù)載。現(xiàn)有的 Web 平臺(tái)有一個(gè) API，它支持所有平臺(tái)上最流行的標(biāo)準(zhǔn)化數(shù)據(jù)類型（文本、圖像、富文本）。但是，此 API 不會(huì)擴(kuò)展到專用格式的長(zhǎng)尾。尤其是，當(dāng)前的 Web 平臺(tái)不支持自定義格式、非 Web 標(biāo)準(zhǔn)格式（如 TIFF（一種大圖像格式））和專有格式（如 .docx（一種文檔格式））。

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

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