Skip to content

Instantly share code, notes, and snippets.

@philipstanislaus
Last active February 12, 2025 13:46
Show Gist options
  • Save philipstanislaus/c7de1f43b52531001412 to your computer and use it in GitHub Desktop.
Save philipstanislaus/c7de1f43b52531001412 to your computer and use it in GitHub Desktop.
JavaScript: Save a blob to disc
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');
@hurricup
Copy link

hurricup commented May 28, 2024

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')));

@James-E-A
Copy link

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.

@logemann
Copy link

logemann commented Aug 2, 2024

life saver!

@adokshaj-sclera
Copy link

thanks a bunch!

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