JavaScript: Save a blob to disc

gistfile1.js

var saveBlob = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (blob, fileName) {
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

saveBlob(file, 'test.zip');

Thanks, a refactoring with anchor element deletion:

const fileUrl = window.URL.createObjectURL(blob)
const anchorElement = document.createElement('a')

anchorElement.href = fileUrl
anchorElement.download = 'Filename.ext'
anchorElement.style.display = 'none'

document.body.appendChild(anchorElement)

anchorElement.click()
anchorElement.remove()

window.URL.revokeObjectURL(fileUrl)

If you have only blob url:

var saveBlob = (function () {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    return function (blob, fileName) {
        var url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
    };
}());

fetch('blob:https://some.blob.url').then((response) => response.blob().then((b) => saveBlob(b, 'file.ext')));

Is there a data limit using this blob & url solution?
Eg. can a blob containing a 50MB zip, or a 5GB video be 'download' saved in the client in this way?
If not, is there a client-side way of saving v.large blobs?

@ChrisRoald, if you need to deal with data streams that are on the order of client RAM, you should *not* be creating Blobs that store the entire data stream in the first place, as they are inherently in-RAM objects.

Instead you should use showSaveFilePicker / FileSystemWritableFileStream — or for Firefox this ServiceWorker-based polyfill, pending proper support.

life saver!

thanks a bunch!

bonjour.
sur mon site, l'utilisateur peut "signer" dans un blob mais.. ensuite je voudrais enregistrer ce blob directement sur le serveur sans aucune boite de message et.. n'y arrive pas..
une partie du code :
save : function(){
//
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
document.getElementById("saveSignature").src = dataURL;
//window.alert('fin save');
canvas.toBlob(function (blob)
{
var nouvelleImg = document.createElement("img"),
url = URL.createObjectURL(blob);
});
nouvelleImg.src = "image.jpg";
nouvelleImg.canvas.save;
nouvelleImg.savefile("./test.jpg");
nouvelleImg.canvas.URL="http://www.xxxxxxxxxxxxxx.fr/site/protect/signature.png"
nouvelleImg.writeFile();
nouvelleImg.save;

et rien ne fonctionne..
Je débute en javascript.. Merci

URL.createObjectURL(new Blob([blob], {type:"application/octet-stream"}))

prints url into console, once clicked it will prompt system save file dialog