clipboard polyfill下載 - clipboard polyfill原始碼下載

clipboard polyfill

網站數據

v4.1.1

下載

`clipboard-polyfill`

️您不需要`clipboard-polyfill`來複製文字！ ️

注意：從 2020 年開始，您可以在所有主要瀏覽器的穩定版本中使用navigator.clipboard.writeText(...) 。只有當您想要執行以下操作時，該程式庫才會對您有用：

針對非常舊的瀏覽器（請參閱下面的相容性）進行文字複製，
在 Firefox 中複製text/html ≤126，
在 Firefox ≤126 中使用ClipboardItem API，或者
在非瀏覽器環境中（例如在jsdom中）填入 API 形狀。

有關更多詳細信息，請參閱下面的兼容性部分。

概括

讓網路複製變得如此簡單：

 clipboard . writeText ( "hello world" ) ;

該函式庫是用於現代基於Promise的非同步剪貼簿 API 的 ponyfill/polyfill。

用法

如果您使用npm ，請安裝：

npm install clipboard-polyfill

將文字複製到剪貼簿的範例應用程式：

 import * as clipboard from "clipboard-polyfill" ;

function handler ( ) {
  clipboard . writeText ( "This text is plain." ) . then (
    ( ) => { console . log ( "success!" ) ; } ,
    ( ) => { console . log ( "error!" ) ; }
  ) ;
}

window . addEventListener ( "DOMContentLoaded" , function ( ) {
  const button = document . body . appendChild ( document . createElement ( "button" ) ) ;
  button . textContent = "Copy" ;
  button . addEventListener ( "click" , handler ) ;
} ) ;

筆記：

您需要呼叫剪貼簿操作來回應使用者手勢（例如，按一下button的事件處理程序）。
- 某些瀏覽器可能只允許每個手勢進行一次剪貼簿操作。

`async` / `await`語法

 import * as clipboard from "clipboard-polyfill" ;

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 . body . appendChild ( document . createElement ( "button" ) ) ;
  button . textContent = "Copy" ;
  button . addEventListener ( "click" , handler ) ;
} ) ;

更多 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 . body . appendChild ( document . createElement ( "button" ) ) ;
  button . textContent = "Copy" ;
  button . addEventListener ( "click" , handler ) ;
} ) ;

檢查剪貼簿 API 規格以取得更多詳細資訊。

筆記：

您需要對await語法使用async函數。
目前， text/plain和text/html是大多數瀏覽器中唯一可以寫入剪貼簿的資料類型。
如果您嘗試複製不支援的資料類型，它們可能會被靜默刪除（例如 Safari 13.1），或者呼叫可能會引發錯誤（例如 Chrome 83）。一般來說，無法判斷資料類型何時被刪除。
在目前的某些瀏覽器中， read()可能只會傳回支援的資料類型的子集，即使剪貼簿包含更多資料類型。無法判斷是否有更多資料類型。

`overwrite-globals`版本

如果您希望函式庫用其實作覆蓋全域剪貼簿 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 . body . appendChild ( document . createElement ( "button" ) ) ;
  button . textContent = "Copy" ;
  button . addEventListener ( "click" , handler ) ;
} ) ;

不建議使用這種方法，因為它可能會破壞與剪貼簿 API 全域變數互動的任何其他程式碼，並且可能與未來的瀏覽器實作不相容。

包含`Promise`的平面檔案版本

如果您需要取得「正常運作」的版本，請下載clipboard-polyfill.window-var.promise.es5.js並使用<script>標記包含它：

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

捆綁/搖樹/縮小/CommonJS

由於現代 JS 生態系統的便利，我們不再提供 tree shake、minified 或 CommonJS 建置。要在不失去相容性的情況下獲得此類構建，請透過esbuild傳遞clipboard-polyfill構建。例如：

mkdir temp && cd temp && npm install clipboard-polyfill esbuild

# Minify the ES6 build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify

# Include just the `writeText()` export and minify:
echo ' export { writeText } from "clipboard-polyfill"; ' | npx esbuild --format=esm --target=es6 --bundle --minify

# Minify an ES5 build:
cat node_modules/clipboard-polyfill/dist/es5/window-var/clipboard-polyfill.window-var.promise.es5.js | npx esbuild --format=esm --target=es5 --bundle --minify

# Get a CommonJS build:
echo ' export * from "clipboard-polyfill"; ' | npx esbuild --format=cjs --target=es6 --bundle

為什麼要使用`clipboard-polyfill` ？

隨著時間的推移，瀏覽器已經實現了多個剪貼簿 API，並且在各種舊的和當前的瀏覽器中寫入剪貼簿而不觸發錯誤是相當棘手的。在每個支援以某種方式複製到剪貼簿的瀏覽器中， clipboard-polyfill都會嘗試盡可能接近非同步剪貼簿 API。（有關免責聲明和限制，請參閱上文。）

請參閱此演示文稿，以了解網路上剪貼簿存取的較長歷史。

相容性

☑️：瀏覽器具有本機非同步剪貼簿支援。
✅： clipboard-polyfill增加了支援。
: 無法支援。
粗體瀏覽器名稱表示現代瀏覽器穩定版本的最新功能變更。

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

瀏覽器	`writeText()`	`write()` （HTML）	`write()` （其他格式）
Safari 13.1	☑️	☑️	☑️（ `image/uri-list` ， `image/png` ）
Chrome 86 ᵃ /邊緣 86	☑️	☑️	☑️（ `image/png` ）
Chrome 76ᵃ / 邊緣 79	☑️	✅	☑️（ `image/png` ）
Chrome 66ᵃ / Firefox 63	☑️	✅
Safari 10 / Chrome 42ᵃ / Edgeᵈ / Firefox 41	✅	✅ᵇ
瀏覽器9	✅ᶜ

閱讀支持：

瀏覽器	`readText()`	`read()` （HTML）	`read()` （其他格式）
Safari 13.1	☑️	☑️	☑️（ `image/uri-list` ， `image/png` ）
Chrome 76 ᵃ /邊緣 79	☑️		☑️（ `image/png` ）
Chrome 66ᵃ	☑️
瀏覽器9	✅ᶜ
火狐瀏覽器

ᵃ 還包括基於Chrome對應版本的Edge、Opera、Brave、Vivaldi等版本。
ᵇ 在版本 10 的前幾個版本中，HTML 無法在行動 Safari 上正常運作。
ᶜ 在 Internet Explorer 中，如果您希望庫正常工作，您將需要填充window.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）