Question

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

很久以前，我能够在线托管文件，但似乎应该很容易将文件放在目录系统中，就像图像和样式表一样。我在这里错过了什么吗？帮助将不胜感激。

------ ----- EDIT

文件结构如下所示：

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

放置在公用文件夹中的文件将不会被webpack编译，而不会被直接移到构建文件夹中。

您可能会详细了解 https://create-react-app.dev/docs/using-the-public-folder/

Answer 4

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

我将简历导入到下载按钮所在的位置然后将文件直接传递给我的 (a) 标签，并带有下载选项 (resume.pdf)

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

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

Answer 5

任何试图使用导入 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 将文件解析为文件，而不是对象。

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

5 个答案: