一、Clipboard API

在現(xiàn)代 Web 開(kāi)發(fā)中，復(fù)制文本到剪切板是一個(gè)常見(jiàn)的需求，特別是在一些社交分享、復(fù)制鏈接等場(chǎng)景下。通過(guò) JavaScript，我們可以輕松實(shí)現(xiàn)這一功能。

Clipboard API 是現(xiàn)代瀏覽器提供的一組 JavaScript 接口，用于訪問(wèn)和操作用戶(hù)剪貼板中的內(nèi)容。它提供了異步讀取和寫(xiě)入剪貼板的功能，可以處理多種類(lèi)型的數(shù)據(jù)，如文本、圖像等。通過(guò)使用navigator.clipboard對(duì)象，開(kāi)發(fā)者可以調(diào)用相關(guān)方法來(lái)讀取和寫(xiě)入剪貼板中的內(nèi)容。

相關(guān)屬性方法

屬性：

• clipboardData：表示剪貼板中的數(shù)據(jù)對(duì)象。

• types：返回剪貼板中數(shù)據(jù)的類(lèi)型列表。

方法：

• readText()：異步讀取剪貼板中的文本內(nèi)容。

• writeText(text)：異步將文本內(nèi)容寫(xiě)入剪貼板。

• read()：異步讀取剪貼板中的數(shù)據(jù)對(duì)象。

• write(data)：異步將自定義數(shù)據(jù)對(duì)象寫(xiě)入剪貼板。

示例

const copyText = () => {
  const text = "Hello, Clipboard API!";
  navigator.clipboard
    .writeText(text)
    .then(() => {
      console.log("Text copied to clipboard");
    })
    .catch((error) => {
      console.error("Failed to copy text: ", error);
    });
};

二、document.execCommand

document.execCommand()是一個(gè)舊的瀏覽器 API，用于執(zhí)行命令并影響瀏覽器行為。其中包括一些與剪貼板相關(guān)的命令，如復(fù)制、粘貼等。

通過(guò)調(diào)用document.execCommand('copy')或document.execCommand('paste')等命令，可以實(shí)現(xiàn)對(duì)剪貼板內(nèi)容進(jìn)行讀取或?qū)懭搿?/p>

const copyText = () => {
  const text = "Hello, Clipboard!";
  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "absolute";
  textarea.style.opacity = "0";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
};

優(yōu)點(diǎn)：

• 使用簡(jiǎn)單，無(wú)需額外引入 API。

• 兼容性好。

如下圖所示的瀏覽器兼容性

缺點(diǎn)：

• 功能相對(duì)有限，只能處理文本類(lèi)型的數(shù)據(jù)。

• 不支持異步操作。

• 安全性和用戶(hù)隱私保護(hù)較差。

需要注意的是，document.execCommand()在現(xiàn)代瀏覽器中已經(jīng)被廢棄，不再推薦使用。而 Clipboard API 是未來(lái)發(fā)展的趨勢(shì)，提供了更好的功能和安全性。

因此，在支持 Clipboard API 的瀏覽器中，建議使用 Clipboard API 來(lái)進(jìn)行剪貼板操作。對(duì)于不支持 Clipboard API 的瀏覽器，可以使用document.execCommand()作為降級(jí)方案。

三、useClipboard

• 檢測(cè)瀏覽器是否支持navigator.clipboard：

const isClipboardSupported = () => {
  return (
    !!navigator.clipboard && typeof navigator.clipboard.writeText === "function"
  );
};

• 創(chuàng)建一個(gè)名為fallbackCopyText的函數(shù)，用于在不支持 Clipboard API 的瀏覽器中實(shí)現(xiàn)復(fù)制功能：

const fallbackCopyText = (text) => {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  textarea.style.position = "absolute";
  textarea.style.opacity = "0";
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();
};

• 在自定義 hooks 中，根據(jù)瀏覽器是否支持 Clipboard API 來(lái)選擇使用哪種復(fù)制方式：

const useClipboard = () => {
  const copied = ref(false);

  const copyText = (text) => {
    if (isClipboardSupported()) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          copied.value = true;
        })
        .catch((error) => {
          console.error("Failed to copy text: ", error);
        });
    } else {
      fallbackCopyText(text);
      copied.value = true;
    }
  };

  return { copied, copyText };
};

通過(guò)以上降級(jí)方案，我們首先檢測(cè)瀏覽器是否支持navigator.clipboard。如果支持，則使用navigator.clipboard.writeText()來(lái)復(fù)制文本。如果不支持，則調(diào)用fallbackCopyText()函數(shù)來(lái)實(shí)現(xiàn)復(fù)制功能。

在使用自定義 hooks 的 Vue 組件中，無(wú)需更改任何代碼，因?yàn)樽远x hooks 已經(jīng)處理了瀏覽器兼容性問(wèn)題。無(wú)論瀏覽器是否支持 Clipboard API，都可以正常使用復(fù)制功能。

降級(jí)方案中的fallbackCopyText()函數(shù)使用了document.execCommand('copy')來(lái)執(zhí)行復(fù)制操作。這是一種舊的方式，在現(xiàn)代瀏覽器中仍然有效，但并不推薦使用。因此，在支持 Clipboard API 的瀏覽器中，盡量?jī)?yōu)先使用navigator.clipboard.writeText()來(lái)實(shí)現(xiàn)復(fù)制功能。

總結(jié)

在文章中，我們首先介紹了復(fù)制文本到剪切板的兩種方法：使用 document.execCommand 方法和使用 Clipboard API。對(duì)于 execCommand 方法，我們?cè)敿?xì)介紹了其使用步驟和注意事項(xiàng)，并提供了一個(gè)示例代碼。對(duì)于 Clipboard API，我們介紹了其基本概念和使用方法，同時(shí)也提到了瀏覽器兼容性的問(wèn)題。

然后，我們對(duì)比了這兩種方法的優(yōu)缺點(diǎn)。execCommand 方法雖然簡(jiǎn)單易用，但是在某些瀏覽器中可能存在兼容性問(wèn)題。而 Clipboard API 雖然相對(duì)復(fù)雜一些，但是它是瀏覽器原生支持的 API，并且具有更好的擴(kuò)展性和安全性。

到此這篇關(guān)于JS 實(shí)現(xiàn)復(fù)制到剪貼板的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)JS 復(fù)制到剪貼板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！