JavaScript >> Javascript 文檔 >  >> Tags >> API

如何使用剪貼板 API 在 JavaScript 中復製到剪貼板

簡介

複製/粘貼功能無疑是現代計算中最常用的功能之一,它是指將文本或圖像從基於計算機的應用程序的一部分複制/傳輸到另一部分的過程。最近,以編程方式將一些內容複製到用戶的剪貼板已成為一種常見做法,這樣他們就不必這樣做了。

例如,在頁面或電子郵件上彈出的激活碼和驗證碼。您可以自動複製它們,也可以使用允許某人將內容複製到剪貼板的按鈕,這樣他們就不必自己複製了。此外,代碼片段是您可能希望將內容複製到剪貼板的一個很好的示例!

注意: 除非你在 localhost ,新的剪貼板 API 僅當您的網站託管在安全域(HTTPS )。

在 JavaScript 中復製到剪貼板

整個過程可以簡化為觸發代碼的按鈕(或其他元素)!您也可以在頁面加載時執行此操作 ,但在自動與用戶交互並執行影響其本地計算機的操作(例如向剪貼板添加內容)時,通常建議保持保守:

<textarea id="content"></textarea>
<button onclick="copyToClipboard()">Copy</button>

<script>
  function copyToClipboard() {
    var copyText = document.getElementById("content").value;
    navigator.clipboard.writeText(copyText).then(() => {
        // Alert the user that the action took place.
        // Nobody likes hidden stuff being done under the hood!
        alert("Copied to clipboard");
    });
  }
</script>

但是,這裡還有更多內容要說 - 它的工作原理、限制、如何復製圖像等。在本指南的其餘部分中,我們將準確介紹這些內容。

以前,JavaScript 開發人員依賴 document.execCommand() .然而,一個相對較新的 剪貼板 API 最近發布了通過複製/粘貼無縫傳輸數據!

讀取瀏覽器的權限

根據您使用剪貼板 API 執行的操作(讀取或寫入),建議在嘗試任何操作之前檢查瀏覽器的權限。檢查你是否有 write 訪問,您將使用 navigator.permissions 並查詢 clipboard-write 權限:

navigator.permissions.query({ name: "clipboard-write" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Write access ranted!");
  }
});

同樣,您可以檢查您是否有 clipboard-read 也可以訪問:

navigator.permissions.query({ name: "clipboard-read" }).then((result) => {
  if (result.state == "granted" || result.state == "prompt") {
    alert("Read access ranted!");
  }
});

複製文本到剪貼板

讓我們從將文本複製到剪貼板上開始。我們在第一個示例中已經簡要地看到了這一點,它實際上並沒有比這更複雜。使用新的 剪貼板 API 複製文本 ,我們使用異步 writeText() 方法,並且此方法只接受一個參數 - 要復製到剪貼板的文本。

作為異步,它返回一個promise,如果剪貼板更新成功則resolve,否則拒絕:

navigator.clipboard.writeText("TEXT_TO_COPY_TO").then(() => {
  /* Resolved - text copied to clipboard */
},() => {
  /* Rejected - clipboard failed */
});

讀取剪貼板內容

與寫作類似,你也可以閱讀 剪貼板的內容。這確實會引起隱私問題,您應該在使用該功能時始終保持透明和謹慎。您可能希望將寫作和閱讀鏈接在一起,以確保您閱讀的內容只是您已經寫過的內容。

我們使用 readText() 方法來讀取剪貼板中的最新條目。此方法還返回一個承諾,如果瀏覽器可以訪問剪貼板內容,則該承諾將被解析,否則將被拒絕:

navigator.clipboard
  .readText()
  .then((copiedText) => {
        // Do something with copied text
   });

與寫入剪貼板不同,請求讀取瀏覽器剪貼板內容會額外顯示一個要求用戶同意的一次性提示,如下圖所示:

將圖像和富文本複製到剪貼板

富文本 指允許樣式的文本內容,例如 - bold , 斜體 , 和 下劃線 ,以及不同的字體系列和字體大小。複製文本內容時,可能是富文本 格式,這意味著關於內容的元數據不僅僅是文本本身。

我們也可以使用 Clipboard API 的 write() 方法來複製任意數據,例如富文本和圖像,並且該函數只接受一個參數,該參數是一個包含要寫入剪貼板的數據的數組。 writeText() 方法專門用於純文本,而 write() 可以寫入任意數據。

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

例如,您可以從遠程 URL 獲取圖像並將其複製到剪貼板:

const copyImage = async () => {
    const response = await fetch("/path/to/image.png");
    const blob = await response.blob();
    await navigator.clipboard.write([
      new ClipboardItem({ "image/png": blob }),
    ]);
  };

當您將項目的類型更改為 "text/html" 時,上面的示例也適用於復制富文本 :

const copyRichText = async () => {
    const content = document.getElementById("richTextInputId").innerHTML;
    const blob = new Blob([content], { type: "text/html" });
    const richTextInput = new ClipboardItem({ "text/html": blob });
    await navigator.clipboard.write([richTextInput]);
};

這確實假設 richTextInputId 元素本身支持富文本。

從剪貼板讀取圖像和富文本

Clipboard API 還提供了一個獨特的 read() 方法,用於讀取任意數據而不是純文本,和之前的readText()類似 功能,但可以讀取任意數據。例如讀取之前複製到剪貼板的圖像數據:

<img src="" alt="" id="sample-img" />
<script>
const img = document.getElementById("sample-img");
  navigator.clipboard.read().then((data) => {
  for (let i = 0; i < data.length; i++) {
    if (!data[i].types.includes("image/png")) {
      // Clipboard does not contain image data
    } else {
      data[i].getType("image/png").then((blob) => {
          img.src = URL.createObjectURL(blob);
      });
    }
  }
});
</script>

結論

在這個簡短的指南中,我們已經能夠介紹使用新的剪貼板 API 將文本和其他數據(例如圖像)複製到剪貼板的過程。每當您向用戶的本地計算機寫入或讀取時,請注意該過程的透明和安全!


Tutorial JavaScript 教程
  1. 循環刪除數組中多次出現的元素

  2. 對任何對象列表使用 Java 的 Arrays.sort()

  3. 按日期排序數組 JavaScript |示例代碼

  4. Laravel Mix,如何在混合時傳遞變量?

  5. ⏱ 3 分鐘在 AppEngine 上部署靜態 Nuxt.js 應用

  6. 在 Angular 中上傳圖片

  7. 如何使用 Node.js 將內容附加到文件

  1. 2022 年的 React 狀態管理

  2. 在 React 16 中從 setState 返回 null

  3. 每日反應 1 - useState

  4. 重構:萬物皆有類?

  5. 使用令牌桶進行速率限制

  6. 什麼時候在 React 中使用 Refs?

  7. 如何在預售中實現自動配送功能?

  1. 具有多個條件的過濾器數組

  2. 函數式 JavaScript 中的數據變異

  3. 解決方案:兩個鍊錶的交集

  4. Angular 教程:Angular 2+ 入門