在 React 中下载文件

Irakli Tchigladze 2023年1月30日 2022年5月18日
  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