协助在我的 localhost 应用程序上下载文件答案

【问题标题】：Assistance with downloading a file on my localhost application协助在我的 localhost 应用程序上下载文件
【发布时间】：2017-03-31 03:41:37
【问题描述】：

我有一个 reactjs 网络应用程序。在其中一个页面上，我希望用户单击下载按钮，然后能够下载我在assetsfolder 中的 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 };

【问题讨论】：

您的文件夹结构是什么样的？该文件相对于 HTML 文件在哪里？
@Timo 感谢您的快速回复。我已经更新了答案以反映结构。
只是为了超级清楚。当你说你在 localhost 上运行它时，你的意思是你的浏览器显示 http://localhost/ 或类似的东西，还是你的意思是它显示 file:///C:/whatever/index.html？
我运行npm start并使用localhost:3000查看我的网络应用程序
那么它应该可以工作，根据您显示的代码。您可能希望指定包含扩展名的文件名（例如，Resume.pdf）。这也可能是您正在运行的服务器的问题，如果由于某种原因它没有设置为正确提供 pdf 文件或其他什么。

标签： javascript html

【解决方案1】：

任何尝试使用导入 csv、xls、xlsx 或其他类型的文件作为对象的人：

import X from '../<some_path>/<file_name>.xls';
<a href={X} download="<file_name>.xls"> Download Here </a>

您还需要确保已安装文件加载器。并像这样在webpack.config.js 中声明类型：

module: {
    rules: [
      ...
      {
        test: /\.(csv|xls|xlsx|<someType>)$/,
        use: ["file-loader"],
      },
    ],
  },

这将确保js将文件解析为文件，而不是对象。

【讨论】：

【解决方案2】：

我曾经遇到过这个问题。但这对我有用

我将简历导入到下载按钮所在的位置然后将文件传递给我的（a）标签，下载选项为下载（resume.pdf）

从'../MyCv.pdf'导入MyCv

a href={MyCv} download="MyCv.pdf" className="btn">下载简历

【讨论】：

【解决方案3】：

这些简单的步骤对我有用。

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

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

【讨论】：

【解决方案4】：

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

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

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

放在 public 文件夹的文件不会被 webpack 编译，直接转移到 build 文件夹，不碰。

你可能会得到更多的细节 https://create-react-app.dev/docs/using-the-public-folder/

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

嘿@Timo 我仍然遇到同样的错误，但要清楚，我需要从我的index.html 指定pdf 文件，而不是我的skills.js 文件正确吗？对吗？
嘿@Tim 你有什么别的建议吗？当我尝试单击skills.js 中的<a> 标记时，我仍然收到相同的错误失败 - 未找到文件。我已将我的 resume.pdf 填充移动到 index.html 旁边，并将其引用为 <a href="resume.pdf"> in skills.js` 仍然没有运气。或者，我如何查看文件是否公开可用？现在我只是在 localhost 上运行它，所以它应该可用。