下载公共文件夹中的示例文件（反应）答案

【问题标题】：download sample file in public folder (react)下载公共文件夹中的示例文件（反应）
【发布时间】：2019-08-06 11:03:06
【问题描述】：

我想将一个示例 xlsx 文件放在我的公共文件夹（react 项目）中，其他人可以下载此文件。

<Button><link rel="chargeSample" href="%PUBLIC_URL%/chargeSample.xlsx"></link></Button>

我该怎么做？

【问题讨论】：

【解决方案1】：

标签定义了文档和外部资源之间的链接。要在您的网站上提供下载功能，您应该更改链接标签

import chargeSample from './public/chargeSample.xlsx';

<Button><a href={chargeSample} download="your file name">Download</a></Button>

【讨论】：

【解决方案2】：

如果您使用的是 creat react app，您可以在构建时使用

将公共路径传递到您的组件中

process.env.PUBLIC_URL

【讨论】：

【解决方案3】：

首先，我们必须考虑将文件存储在哪里，考虑在构建时 react 会做什么。在开发中，您不能 100% 相信您使用的路径在构建应用程序后会保持不变。 Here 在 create react app 文档中有一些关于何时使用公用文件夹以及如何使用它的信息。

要下载存储在公用文件夹中的文件，您必须使用 PUBLIC_URL 引用它。有两种方法可以做到这一点：

从公用文件夹中引用文件
正如您所提到的，您将不得不使用 de %PUBLIC_URL%。例如，如果您想在主 HTML 文件中使用收藏图标，则必须将图标添加到公用文件夹中，然后在 index.html 中使用 %PUBLIC_URL% 前缀引用此文件。

// public/index.html
// ...other stuff
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
// ...

在构建时，React 会将该哈希替换为该文件夹的路径

引用 src 文件夹中的文件
要从 src 文件夹中引用文件，您必须访问公用文件夹 URL。 React 将此路径保存在环境变量中。为了能够使用该文件，您必须使用 process.env.PUBLIC_URL 路径。
要从公共文件夹下载文件，您可以这样访问它：

<a
  href={process.env.PUBLIC_URL + "/my-file.txt"}
  download={"file-name-to-use.txt"}
>
    Download file
</a>

单击锚标记时，它将尝试下载存储在/public 中的名为my-file.txt 的文件，并将使用download 属性中指定的文件作为占位符名称。

【讨论】：