在 React 中下载文件
![在 React 中下载文件](/img/React/feature-image---react-download-file.webp)
在构建 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