帮助在我的本地主机应用程序上下载文件

Question

我有一个reactjs web应用程序。在其中一个页面上，我希望用户单击下载按钮，然后能够下载我的assets文件夹中的pdf文件。我似乎在尝试这样做时遇到了一些问题。这是我尝试过的方法。

作为参考，我已经尝试了此question中提出的解决方案

答案是这样做的：

<a href="path_to_file" download="proposed_file_name">Download</a>

因此，对于我的第一次尝试，我有一个如下所示的按钮：

<a href="../assets/resume.pdf" download="Resume">Download</a>

我在浏览器上收到的错误是Failed- No file。我认为我的路径是错误的，所以我尝试了许多变体，甚至是绝对路径，结果都是一样的。找不到该文件。

在第二次尝试中，我发现了另一个堆栈溢出question

这个问题的答案声明了这个答案：

<a href="file:///C:\Programs\sort.mw">Link 1</a>

当我尝试用我自己的目录路径实现第二个答案时，我收到了一个Failed - Network error问题。我是不是漏掉了什么。

很久以前，我可以在线托管该文件，但在您的目录系统中以图像和样式表的方式保存该文件似乎是一件容易的事情。我是不是漏掉了什么？如果能帮上忙，我们将不胜感激。

-编辑

文件结构如下所示：

react-site
  -- node_modules
  -- package.json
  -- index.html
  -- resume.pdf
  -- README.md
  -- src
     |
     | -- a bunch of files
     | -- assets
     |     
     | -- modules
          |
           - skill.js * This is where I reference the download

-编辑#2

skills.js：

40   class Skills extends Component {
 41   render() {
 42     return (
 43       <div>
 44         <ReactHighcharts config={highchartConfig} domProps={{id: 'chartId'}}></ReactHighcharts>
 45         <div>
 46           <a href="resume.pdf" download="Resume">Download</a>
 47           <RaisedButton label="Download Resume" primary={true}/>
 48         </div>
 49       </div>
 50     );
 51   }
 52 }
 53
 54 export { Skills };

Answer 1

您必须指定相对于HTML文件的文件位置，即

<a href="src/assets/resume.pdf" download="Resume">Download</a>

确保此文件夹在web服务器上公开可用。您可能还希望将其移出src文件夹，因为这可能会产生误导。

Answer 2

这些简单的步骤对我来说很有效。

import CSVFile from '../assets/sample/CSVFile.csv'

<a href={CSVFile} download="CSVFile.csv"> Download Here </a>

Answer 3

我们可以将pdf文件放在公共文件夹中，并在下载时直接从公共文件夹中获取文件

<a href={`${process.env.PUBLIC_URL}/FileInPublicFolder.pdf`} target='_blank' download>

process.env.PUBLIC_URL将指向公用文件夹的位置

放置在公用文件夹中的文件不会被webpack编译，并直接原封不动地转移到build文件夹中。

您可能会获得有关https://create-react-app.dev/docs/using-the-public-folder/的更多详细信息