在公共文件夹中下载示例文件（反应）

Question

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

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

我该怎么做？

Answer 1

首先，我们必须考虑在哪里存储文件，考虑在构建时响应将做什么。在开发中，你不能100%相信你在构建应用程序后使用的路径是相同的。在这里创建反应应用文档中有一些关于何时使用公共文件夹以及如何使用它的信息。

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

从公用文件夹中引用文件
您必须使用您提到的de%public\u URL%。例如，如果要在主HTML文件中使用fav图标，则必须先在公用文件夹中添加该图标，然后在索引中添加该图标。html您将使用%PUBLIC\u URL%前缀引用此文件。

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

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

引用src文件夹中的文件
要从src文件夹中引用文件，必须访问公用文件夹URL。React将此路径保存在环境变量中。要使用该文件，您必须使用过程。环境。公共URL路径
要从公用文件夹下载文件，您可以按如下方式访问：

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

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

Answer 2

如果您正在使用creat反应应用程序，您可以通过使用以下方法在构建时将公共路径传递到您的组件

process.env.PUBLIC_URL

Answer 3

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

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

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