Came across this SO trying to figure out how to download a png image and found that the other answer didn't quite do it for me as the downloaded file couldn't be opened. Needed to use arraybuffer to convert the image.
Here's the code that worked.
function App() {
const download = e => {
console.log(e.target.href);
fetch(e.target.href, {
method: "GET",
headers: {}
})
.then(response => {
response.arrayBuffer().then(function(buffer) {
const url = window.URL.createObjectURL(new Blob([buffer]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "image.png"); //or any other extension
document.body.appendChild(link);
link.click();
});
})
.catch(err => {
console.log(err);
});
};
return (
<div className="App">
<a
href="https://upload.wikimedia.org/wikipedia/en/6/6b/Hello_Web_Series_%28Wordmark%29_Logo.png"
download
onClick={e => download(e)}
>
<i className="fa fa-download" />
download
</a>
</div>
);
}
Codesandbox: https://codesandbox.io/s/dreamy-gould-h1l72
P.S.
The download approach was taken from, this reply, but used plain fetch instead of axios.
https://stackoverflow.com/a/50220546/10006323
download
attribute only works for same-origin URLs - you can't use it to download a file from another site. – Joe Clay Jul 16 '19 at 12:01