Last active
April 27, 2023 13:56
-
-
Save spacemudd/4d142fc8b1429d18697e692b9c3680af to your computer and use it in GitHub Desktop.
Blob downloading for Firefox / Chrome using VueJS / Axios
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* Blob is retrieved using an axios call and downloaded to the client side | |
* as if they were doing Right Click -> Save As. | |
* appendChild() and removeChild() are used because without them, downloading via FF doesn't work. | |
* | |
* Don't forget to give `{responseType: 'arraybuffer'}` as the third parameter if you're doing a POST request to fetch a file. | |
* | |
* @param blob Blob object (e.g. response.data from axios' callback) | |
* @param filename Filename of the file (taken from the content-headers of the call back or assigned at runtime) | |
*/ | |
export function downloadBlob(blob, filename) { | |
let link = document.createElement('a') | |
link.href = window.URL.createObjectURL(blob) | |
link.download = filename | |
document.body.appendChild(link); | |
link.click() | |
document.body.removeChild(link); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for this answer.
I've tried to download from canvas to png file by this link, but it didn't work on firefox.
https://stackoverflow.com/questions/53772331/vue-html-js-how-to-download-a-file-to-browser-using-the-download-tag
From line 17 on this script, it seems that clickable link on firefox should be in the DOM.