在 React 中下載檔案

Irakli Tchigladze 2023年1月30日
  1. 在 React 中使用 download 屬性下載檔案
  2. 在 React 中使用 js-file-download 外掛下載檔案
  3. 在 React 中下載檔案的前端限制
在 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 中下載檔案的前端限制

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

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

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn