I'm posting this here to have it accessible and maybe somebody will find it useful as well!
Deprecated (see next snippet)
function downloadBlob(blob, name = 'file.txt') {
if (
window.navigator &&
window.navigator.msSaveOrOpenBlob
) return window.navigator.msSaveOrOpenBlob(blob);
// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = data;
link.download = name;
// this is necessary as link.click() does not work on the latest firefox
link.dispatchEvent(
new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
})
);
setTimeout(() => {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(data);
link.remove();
}, 100);
}
// Usage
downloadBlob(blob, 'myfile.pdf');
NOTICE
As Kaltu pointed out in the comments: it seems "window.URL.createObjectURL()" had been blocked by all major browsers since 2019 for security reasons.
This approach should work as expected:
function downloadBlob(blob, name = 'file.txt') {
// Convert your blob into a Blob URL (a special url that points to an object in the browser's memory)
const blobUrl = URL.createObjectURL(blob);
// Create a link element
const link = document.createElement("a");
// Set link's href to point to the Blob URL
link.href = blobUrl;
link.download = name;
// Append link to the body
document.body.appendChild(link);
// Dispatch click event on the link
// This is necessary as link.click() does not work on the latest firefox
link.dispatchEvent(
new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window
})
);
// Remove link from body
document.body.removeChild(link);
}
// Usage
let jsonBlob = new Blob(['{"name": "test"}'])
downloadBlob(jsonBlob, 'myfile.json');
Demo can be found here