在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn