0

I am working on a react project using typescript. I have an excel file (.xlsx) in a folder in my project. My task is to create a button or a link on the UI and when clicked on this UI, download the file which is stored in my project folder. I looked up a bit online and found the <a> tag which has the href and the download attributes. But the href attribute is for links only.. How do we download an excel sheet or any file specified in a folder in our project?

Any help would be appreciated.

skate_23
  • 447
  • 1
  • 11
  • 25

2 Answers2

0

You can pass relative path to href attribute of your a tag, something like this:

<a href="/files/my-fyle.xlsx" download>Download</a>
Kuzzy
  • 562
  • 1
  • 9
  • 24
  • Nope, this did not work. It does download .. but then is says ... Failed - no file on that file. And I cannot open that download file either. – skate_23 Oct 05 '21 at 20:09
  • This may be due to you react app settings, perhaps, file should be placed in `public` folder. Other folders may be under react routing control and will return to your link not a file but generated html page. In any case to make it work in real life you will need to configure your server to response on such request in proper way. See similar question https://stackoverflow.com/questions/50694881/how-to-download-file-in-react-js – Kuzzy Oct 05 '21 at 20:59
0

If you are using react router .. try this

<Link to="/files/file.xlsx" target="_blank" download>Download</Link>
Mohamed BOUSSAKSSOU
  • 341
  • 5
  • 5