clipboard-polyfill 復制插件

原文：https://www.5axxw.com/wiki/content/eklia8

使網上復制變得簡單：

clipboard.writeText("hello world"); 

這個庫是現代基於Promise的異步剪貼板API的polyfill。

注意：截至2020年6月底，您可以在所有主流瀏覽器的穩定版本中使用navigator.clipboard.writeText("hello world);（請參閱下面的兼容性）。只有當您1）需要復制text/html，或者2）需要針對舊的瀏覽器時，這個庫才會對您有用。

Usage

如果使用npm，請安裝：

npm install clipboard-polyfill 

將文本復制到剪貼板的示例應用程序：

// Using the `clipboard/text` build saves code size. // This is recommended if you only need to copy text. import * as clipboard from "clipboard-polyfill/text"; function handler() { clipboard.writeText("This text is plain.").then( function () { console.log("success!"); }, function () { console.log("error!"); } ); } window.addEventListener("DOMContentLoaded", function () { const button = document.createElement("button"); button.textContent = "Copy"; button.addEventListener("click", handler); document.body.appendChild(button); }); 

Notes:

• 您需要調用剪貼板操作以響應用戶手勢（例如，button單擊的事件處理程序）。有些瀏覽器可能只允許每個手勢執行一次剪貼板操作。

async/await syntax

import * as clipboard from "clipboard-polyfill/text"; async function handler() { console.log("Previous clipboard text:", await clipboard.readText()); await clipboard.writeText("This text is plain."); } window.addEventListener("DOMContentLoaded", function () { const button = document.createElement("button"); button.textContent = "Copy"; button.addEventListener("click", handler); document.body.appendChild(button); }); 

更多MIME類型（數據類型）

import * as clipboard from "clipboard-polyfill"; async function handler() { console.log("Previous clipboard contents:", await clipboard.read()); const item = new clipboard.ClipboardItem({ "text/html": new Blob( ["<i>Markup</i> <b>text</b>. Paste me into a rich text editor."], { type: "text/html" } ), "text/plain": new Blob( ["Fallback markup text. Paste me into a rich text editor."], { type: "text/plain" } ), }); await clipboard.write([item]); } window.addEventListener("DOMContentLoaded", function () { const button = document.createElement("button"); button.textContent = "Copy"; button.addEventListener("click", handler); document.body.appendChild(button); }); 

有關詳細信息，請查看剪貼板API規范。

Notes:

• 對於await語法，您需要使用async函數。
• 目前，text/plain和text/html是大多數瀏覽器中唯一可以寫入剪貼板的數據類型。
• 如果您試圖復制不受支持的數據類型，它們可能會被自動刪除（例如Safari 13.1），或者調用可能會拋出錯誤（例如Chrome 83）。一般來說，無法判斷何時刪除數據類型。
• 在當前的一些瀏覽器中，read()可能只返回支持的數據類型的子集，即使剪貼板包含更多的數據類型。無法判斷是否有更多的數據類型。

overwrite-globals version

如果希望庫用它的實現覆蓋全局剪貼板API，請導入clipboard-polyfill/overwrite-globals。這將把庫從ponyfill轉換為正確的polyfill，因此您可以編寫代碼，就好像您的瀏覽器中已經實現了異步剪貼板API一樣：

import "clipboard-polyfill/overwrite-globals"; async function handler() { const item = new window.ClipboardItem({ "text/html": new Blob( ["<i>Markup</i> <b>text</b>. Paste me into a rich text editor."], { type: "text/html" } ), "text/plain": new Blob( ["Fallback markup text. Paste me into a rich text editor."], { type: "text/plain" } ), }); navigator.clipboard.write([item]); } window.addEventListener("DOMContentLoaded", function () { const button = document.createElement("button"); button.textContent = "Copy"; button.addEventListener("click", handler); document.body.appendChild(button); }); 

不建議使用這種方法，因為它可能會破壞與剪貼板API全局變量交互的任何其他代碼，並且可能與將來的瀏覽器實現不兼容。

Flat-file版本，包括Promise

如果您需要獲取一個“只起作用”的版本，請下載clipboard-polyfill.promise.js並使用<script>標記將其包括在內：

<script src="./clipboard-polyfill.promise.js"></script> <button onclick="copy()">Copy text!</button> <script> // `clipboard` is defined on the global `window` object. function copy() { clipboard.writeText("hello world!"); } </script> 

Why clipboard-polyfill?

隨着時間的推移，瀏覽器已經實現了幾個剪貼板API，在各種舊的和當前的瀏覽器中寫入剪貼板而不觸發bug是相當困難的。在每一個支持以某種方式復制到剪貼板的瀏覽器中，clipboard-polyfill都試圖盡可能靠近異步剪貼板API。（請參閱上面的免責聲明和limitations.）

有關在web上訪問剪貼板的較長歷史記錄，請參閱此演示文稿。

Compatibility

• ☑️ ：瀏覽器具有本機異步剪貼板支持。
• ✅ ：clipboard-polyfill提供支持。
• ❌ ：無法支持。
• 粗體瀏覽器名稱表示現代瀏覽器穩定版本的最新功能更改。

最早瀏覽器版本的寫入支持：

Browser	writeText()	write() (HTML)	write() (other formats)
Safari 13.1	☑️	☑️	☑️ (image/uri-list, image/png)
鉻76ᵃ/邊緣79	☑️	✅	☑️ (image/png)
Chrome 66ᵃ/火狐63	☑️	✅	❌
Safari 10/Chrome 42ᵃ/Edgeᵈ/Firefox 41	✅	✅ ᵇ	❌
IE 9	✅ ᶜ	❌	❌

Read support:

Browser	readText()	read() (HTML)	read() (other formats)
Safari 13.1	☑️	☑️	☑️ (image/uri-list, image/png)
鉻76ᵃ/邊緣79	☑️	❌	☑️ (image/png)
Chrome 66ᵃ	☑️	❌	❌
IE 9	✅ ᶜ	❌	❌
Firefox	❌	❌	❌

• ᵃ還包括基於相應版本Chrome的Edge、Opera、Brave、Vivaldi等版本。
• ᵇ在版本10的前幾個版本中，HTML在mobile Safari上無法正常工作。
• ᶜ在Internet Explorer中，如果希望庫正常工作，則需要polyfillwindow.Promise。
• ᵈ在舊版本的Edge（Spartan）：可能無法判斷復制操作是否成功（Edge Bug#14110451，Edge Bug#14080262）。clipboard-polyfill在這種情況下將始終報告成功。只有您指定的最后一種數據類型才會復制到剪貼板（Edge Bug#14080506）。考慮將最重要的數據類型放在傳遞給ClipboardItem構造函數的對象中。text/html數據類型不是使用預期的CF_HTML格式編寫的。clipboard-polyfill沒有嘗試解決這個問題，因為1）它需要脆弱的瀏覽器版本嗅探，2）Edge的用戶通常不會停留在版本17以下，3）其他瀏覽器的失敗模式是復制無效的剪貼板HTML。（邊緣缺陷14372529，73）

clipboard-polyfill使用各種啟發式方法來解決兼容性問題。如果您與上面列出的任何瀏覽器有兼容性問題，請告訴我們。

這太復雜了！

如果你只需要復制文本，試試這個要點以獲得更簡單的解決方案。

或者，如果等到iOS14/MacOS11，navigator.clipboard.writeText()將在所有主流現代瀏覽器的穩定版本中得到支持。