button to download a file in reactJS

Question

I am currently working on a personal portfolio, I am trying to make a button that if you click it should download a Resume.

code

<form method="get" action="fileName">
        <button class="myButton" type="submit">Download!</button>
</form>

let the user download the file.

I am working in REACTJS, create-react-app

Possible duplicate of [how to download file in react js](https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js) — imjared, Jul 17 '19 at 20:50

Nemer · Answer 1 · 2022-07-03T09:59:51.337

4

you can do it by this way

<a href="./yourfile.pdf" download>Download CV</a>

edited Jul 03 '22 at 09:59

answered Jul 17 '19 at 20:46

Nemer

667
1
6
10

3

Actually it does the download but it says the Failed - No file. – Daniel Isaac Chavez Jul 17 '19 at 20:53
1

you have to give the right path: for example if your file in public folder "/filePath.pdf" – Nemer Jul 17 '19 at 21:15
it is in my components folder which my main.js file is too. so what I have is "./document.pdf" – Daniel Isaac Chavez Jul 17 '19 at 21:39
1

try to move the file to public folder and the path will be "/document.pdf" – Nemer Jul 17 '19 at 21:44
@DanielIsaacChavez if it is downloading, but shows an error like "Failed to load PDF document" when trying to open the pdf, it may be that you are using a *relative* path on your href and the final path it generates does not match the one were you have stored your file. Try using an absolute path on href. It should start with a slash / – spuente Sep 05 '22 at 19:08

score 4 · Answer 2 · answered Aug 16 '20 at 17:29

You can use FileSaver.js to achieve this goal:

Install the npm package: npm install file-saver --save

const saveFile = () => {
fileSaver.saveAs(
  process.env.REACT_APP_CLIENT_URL + "/resources/cv.pdf",
  "MyCV.pdf"
);

};

<button className="cv" onClick={saveFile}>
    Download File
</button>

score 2 · Answer 3 · answered Jul 12 '20 at 00:25

I have the exact same problem, and here is the solution I make use of now:

Steps

3 steps:

Make use of file saver in project: npmjs/package/file-saver (npm install file-saver or something)
Place the file in your project You say it's in the components folder. Well, chances are if you've got web-pack it's going to try and minify it.(someone please pinpoint what webpack would do with an asset file in components folder), and so I don't think it's what you'd want. So, I suggest to place the asset into the public folder, under a resource or an asset name. Webpack doesn't touch the public folder and index.html and your resources get copied over in production build as is, where you may refer them as shown in next step.

Refer to the file in your project Sample code:

import FileSaver from 'file-saver';
FileSaver.saveAs(
    process.env.PUBLIC_URL + "/resource/file.anyType",
    "fileNameYouWishCustomerToDownLoadAs.anyType");

Source

Appendix

I also try Link component of react-router react-router-docs/Link. The zip file would download, and somehow would unzip properly. Generally, links have blue color, to inherit parent color scheme, simply add a prop like: style={color: inherit} or simply assign a class of your CSS library like button button-primary or something if you're Bootstrappin'
Other sage questions it's closely related to:

Not useful, still good answers here:

score 0 · Answer 4 · answered Mar 25 '23 at 21:51

0

import MyPDF from '../path/to/file.pdf';    
<a href={myPDF} download="My_File.pdf"> Download Here </a>

Replace with your stuff

answered Mar 25 '23 at 21:51

Dani_justme

1
2

button to download a file in reactJS

4 Answers4

Steps

Source

Appendix

Linked