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

Question

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

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

我该怎么做？

Answer 1

如果您正在使用 create react app，您可以在构建时使用

将 public 路径传递到您的组件中

process.env.PUBLIC_URL

Answer 2

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

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

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

Answer 3

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

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

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

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

在构建时，React 会将此散列替换为该文件夹的路径

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

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

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

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

download sample file in public folder (react)

download

xlsx

reactjs