4

I have a reactjs web app. On one of the pages, I want a user to click on a download button and then be able to download a pdf file that I have in my assetsfolder. I seem to be having some problems trying to do this. Here is what I've tried.

For reference, I have tried the solution proposed in this question

The answer states to do this:

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

So for my first attempt I have a button that looks like this:

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

The error I receive on my browser is Failed- No file. I figured that my path was wrong so I've tried many variations even an absolute path and the result is the same. The file cannot be found.

In the second attempt I found this other stack overflow question

This question's answer declares this answer:

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

When I try to implement the second answer with my own directory paths, I receive a Failed - Network error problem. Is there something I'm missing.

A long time ago, I was able to host the file online but it seems like it should be an easy thing to do to have the file in your directory system the way images and stylesheets are. Am I missing something here? Help would be appreciated.

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

The file structure looks like this:

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

------- EDIT #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 };
Community
  • 1
  • 1
Dan Rubio
  • 4,709
  • 10
  • 49
  • 106
  • What does your folder structure look like? Where is the file relative to the HTML file? – TimoStaudinger Nov 16 '16 at 19:30
  • @Timo thanks for the quick reply. I've updated my answer to reflect the structure. – Dan Rubio Nov 16 '16 at 19:37
  • Just to be super-clear. When you say you're running it on localhost, do you mean your browser shows `http://localhost/` or something similar, or do you mean it shows `file:///C:/whatever/index.html`? – Heretic Monkey Nov 16 '16 at 20:13
  • I run `npm start` and view my web app with `localhost:3000` – Dan Rubio Nov 16 '16 at 20:15
  • Then it should be working, according to the code you've shown. You might want to specify a filename that includes the extension (e.g., `Resume.pdf`). It might also be a problem with the server you're running, if for some reason it's not setup to serve pdf files correctly or something. – Heretic Monkey Nov 16 '16 at 20:18
  • Maybe it must be the server. I have specified 'Download' and the file is adjacent to index.html and it still doesn't work. – Dan Rubio Nov 16 '16 at 20:24
  • I may have missed this but what browser are you trying this in? – War10ck Nov 16 '16 at 20:39
  • can you see the file if you write this in your browser: localhost:3000/resume.pdf – Frazer Kirkman Nov 16 '16 at 20:43
  • Thanks for the comments guys. So I was using Chrome and I just tried this out on FireFox and I think it may be a react-router error. When I go to `localhost:3000/resume.pdf` on Chrome, the hashHistory from react router adds cruft to it and I just saw on Firefox that react-router doesn't even work to switch pages. So now I'm lead to believe that it could be an issue with react-router now – Dan Rubio Nov 16 '16 at 20:54
  • I cleaned up the cruft with the url's switching hashHistory to browserHistory. Going to localhost:3000/resume.pdf now just gives me a blank page. – Dan Rubio Nov 16 '16 at 20:59

5 Answers5

1

You have to specify the file location relative to your HTML file, i.e.

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

Make sure that this folder is publicly available on the web server. You may also want to move it out of the src folder, as this may be misleading.

TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
1

These simple steps work for me.

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

<a href={CSVFile} download="CSVFile.csv"> Download Here </a>
Mahesh Gareja
  • 1,652
  • 2
  • 12
  • 23
1

I once face this problem. but this is what worked for me

I imported my resume to where my download button goes then pass in the file right to my (a) tag with download option of download (resume.pdf)

import MyCv from '../MyCv.pdf'

a href={MyCv} download="MyCv.pdf" className="btn">Download CV</a

Prince Azubuike
  • 21
  • 1
  • 2
0

We can place pdf file in public folder and get file from the public folder directly on download 

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

Where process.env.PUBLIC_URL will point to the public folder

File placed on public folder will not be compiled by webpack and directly shifted to the build folder without touched.

you may get more detail on https://create-react-app.dev/docs/using-the-public-folder/

shrijan tripathi
  • 155
  • 1
  • 7
0

Anyone who is trying to use import csv, xls, xlsx or other kind of file as object like this:

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

You also need to make sure you have file-loader installed. And declare the type in your webpack.config.js like this:

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

This will make sure that js parse the file as a file, not a object.

yuanheng zhao
  • 59
  • 1
  • 6