Skip to content

Instantly share code, notes, and snippets.

@spacemudd
Last active April 27, 2023 13:56
Show Gist options
  • Save spacemudd/4d142fc8b1429d18697e692b9c3680af to your computer and use it in GitHub Desktop.
Save spacemudd/4d142fc8b1429d18697e692b9c3680af to your computer and use it in GitHub Desktop.
Blob downloading for Firefox / Chrome using VueJS / Axios
/*
* 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);
}
@s890081tonyhsu
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment