在 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 中下载文件的前端限制

在极少数情况下，你可以使用本文中描述的两种方法之一。但是，作为一般经验法则，使用前端代码来触发下载是个坏主意。

出于安全原因，浏览器通常会阻止立即下载。这样做是为了阻止网站所有者强迫他们的用户下载恶意软件。

相反，你应该创建一个端点，该端点将返回响应标头以触发文件的下载。并且切记不要在未经用户许可的情况下开始下载文件。