在 React 中下載檔案

1. 在 React 中使用 download 屬性下載檔案
2. 在 React 中使用 js-file-download 外掛下載檔案
3. 在 React 中下載檔案的前端限制

在構建 React 應用程式時，有時你需要允許使用者下載檔案。例如，如果他們購買了一張票，他們可能希望以 PDF 格式下載。

本文將探討在 React 中下載檔案的多種方法。

在 React 中使用 download 屬性下載檔案

通常，Web 開發人員使用錨元素 <a> 來導航另一個頁面。 <a> 元素也接受 download 屬性。它告訴瀏覽器儲存位於指定 URL 的檔案，而不是更改 URL。

如果沒有指定值，瀏覽器將猜測檔案的名稱及其副檔名。如果你指定該值，它將被解釋為檔名。

<Link> 元件是 react-router 包的一部分。它是單頁應用程式中無縫導航的絕佳工具。與錨元素一樣，它也接受 download 屬性並以相同的方式工作。

目前，全球 94.5% 的網民使用支援該屬性的瀏覽器。它還有其他限制和條件。要了解有關 download 屬性的更多資訊，請閱讀官方文件。

在某些情況下，如果瀏覽器不支援 download 屬性，檔案將在新選項卡中開啟。

在 React 中使用 js-file-download 外掛下載檔案

最方便的是使用外部包下載檔案。有很多選項，但 js-file-download 是最容易使用的。

它告訴瀏覽器從指定的 URL 源儲存檔案。與使用 download 屬性相比，它具有優勢，因為它可以儲存更多檔案。

讓我們看一下這個例子：

import "./styles.css";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

在此示例中，我們指定檔案的源名稱和首選名稱。然後我們將這些值傳遞給從 js-file-download 包匯入的 fileDownload 函式。這個函式為我們做所有其他事情。

如果你在本地 create-react-app 環境中執行此程式碼，它將從連結下載影象。

在 React 中下載檔案的前端限制

在極少數情況下，你可以使用本文中描述的兩種方法之一。但是，作為一般經驗法則，使用前端程式碼來觸發下載是個壞主意。

出於安全原因，瀏覽器通常會阻止立即下載。這樣做是為了阻止網站所有者強迫他們的使用者下載惡意軟體。

相反，你應該建立一個端點，該端點將返回響應標頭以觸發檔案的下載。並且切記不要在未經使用者許可的情況下開始下載檔案。