I'm trying to download a document with react. I have this in my code right now:

<li><a href={this.state.invoice.pathToFile}>Download Invoice</a></li>

The path to the file looks like this:

C:\bin\documents\invoices\invoice-01-01-2021.pdf

Everytime we click the link to download the file, We are sent back to the homepage. I would expect it to just download the file. When I hover over the download link it does display the file location:

Not sure what's going on or causing this.

CodePudding user response：

This is not a react issue. Add the download attribute to the anchor <a> so that the browser will download the file

<li><a href={this.state.invoice.pathToFile} download>Download Invoice</a></li>

CodePudding user response：

You can use download attribute to the anchor element to save files, if you reference the file correctly, like this:

<a href="Your file location" download>Download</a>

And in your case it should be like this:

<li><a href={this.state.invoice.pathToFile} download>Download Invoice</a></li>