Is it possible to download file from external url using anchor tag in react?

Question

usecase: when use clicks on "Download File", an external file associated with it should get downloaded to user's matchine.

I tried : 1.

<a href={downloadfileUrl} download={downloadfileUrl}>
        <div className="filename" data-testid="download-link-filename">
          Download file
        </div>
      </a>

<Link
        // href={downloadfileUrl}
        target="_blank"
        to={{ pathname: {downloadfileUrl} }}
        download
      >
        Download Template
      </Link>

Tried above with many combinations. It's not working, I can see "Download file" hyperlink on UI but it does not download the file when I click on it. Can someone suggest any solutions

Yes. Anchor tag's download doesn't works for external urls. – bhavya a Jul 10 '22 at 13:05 — bhavya a, Jul 10 '22 at 13:05

score 0 · Answer 1 · answered Jul 09 '22 at 12:31

0

Try this function and replace your url in fetch it might works!

downloadEmployeeData = () => {
    fetch('http://localhost:8080/employees/download')
        .then(response => {
            response.blob().then(blob => {
                let url = window.URL.createObjectURL(blob);
                let a = document.createElement('a');
                a.href = url;
                a.download = 'employees.json';
                a.click();
            });
            //window.location.href = response.url;
    });
}

answered Jul 09 '22 at 12:31

Priyen Mehta

1,096
1
5
19

You shouldnt be doing direct DOM manipulation in react – Suraj Rao Jul 09 '22 at 12:36
ref link: https://stackoverflow.com/questions/58830976/how-to-download-the-file-from-server-location-in-react-js – Priyen Mehta Jul 09 '22 at 12:38
This did not work for my URL, it does not take the fetched url of type string/undefiened – bhavya a Jul 11 '22 at 07:34

score 0 · Answer 2 · answered Jul 09 '22 at 12:32

0

one solution would be the react-download-link package :

install with npm install --save react-download-link
Include with import DownloadLink from "react-download-link";
Use :

<DownloadLink
    label="Save"
    filename="myfile.txt"
    exportFile={() => "My cached data"}
/>

package official link

answered Jul 09 '22 at 12:32

Omar Dieh

500
3
8

this makes the file content overrided by "My cached data". I should see the data which is in the provided filename – bhavya a Jul 11 '22 at 05:19

score 0 · Answer 3 · answered Jul 11 '22 at 14:58

0

This worked for me

import axios from 'axios';
  
  <a
    href={downloadFileUrl}
    onClick={() => axios.get(downloadFileUrl)}
  >
    Download File
  </a>

answered Jul 11 '22 at 14:58

bhavya a

1
1
2

Is it possible to download file from external url using anchor tag in react?

3 Answers3