Anchor tag with download attribute opens file instead of downloading

Question

In my Reactjs application I used the anchor tag to download a txt file like below.

downloa         


        

Answer 1

Looking at your example seems you're not using same origin and that might have cause the problem.

If you're trying to download the file which exists in same origin then I suggest you to use relative url rather than absolute url.

Example:

download

Please take a look at the note from docs:

Attribute: download

Notes:

• This attribute only works for same-origin URLs.
• Although HTTP(s) URLs need to be in the same-origin, blob: URLs and data: URLs are allowed so that content generated by JavaScript, such as pictures created in an image-editor Web app, can be downloaded.
• If the HTTP header Content-Disposition: gives a different filename than this attribute, the HTTP header takes priority over this attribute.
• If Content-Disposition: is set to inline, Firefox prioritizes Content-Disposition, like the filename case, while Chrome prioritizes the download attribute.