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

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

• javascript
• reactjs

• 2 where is this file stored? – hysoftwareeng Commented Jul 17, 2019 at 20:42
• I have the file in my ponents folder. – Daniel Isaac Chavez Commented Jul 17, 2019 at 20:46
• Possible duplicate of how to download file in react js – imjared Commented Jul 17, 2019 at 20:50

4 Answers 4

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>

you can do it by this way

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

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

Steps

3 steps:

1. Make use of file saver in project: npmjs/package/file-saver (npm install file-saver or something)
2. Place the file in your project You say it's in the ponents 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 ponents 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.
3. 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

• Create-React-App.dev | Using the public folder
• Github | File saver documentation

Appendix

• I also try Link ponent 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:
  • how to download file in react js
  • download file in react
  • how to download file in react js
  • button to download a file in reactJS
  • download sample file in public folder (react)

Not useful, still good answers here:

• How to create an HTML button that acts like a link?
• When will an <a> tag not inherit color attribute of parent tag?

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

Replace with your stuff