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

@Wamy-Dev did you actually test that?

I have not verified this, but IIRC, the browser should ask the user how to handle the stream. If you choose to store a file, the browser should actually stream directly to disk.

Let me know if this assumption is wrong.

@Wamy-Dev did you actually test that?

I have not verified this, but IIRC, the browser should ask the user how to handle the stream. If you choose to store a file, the browser should actually stream directly to disk.

Let me know if this assumption is wrong.

yes This is incorrect. Please look here for reference. It stores to memory until its either filled up or the blob is done downloading so files larger than the systems memory will be filled up completely and paged memory will begin to be used which will cause a lot of problems.

Here's a TypeScript rework for all of you Angular friendoz:

    const saveBlob = (function () {
      const a = document.createElement('a');
      document.body.appendChild(a);
      a.setAttribute('style', 'display: none');

      return function (blob, fileName) {
        const url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = fileName;
        a.click();
        window.URL.revokeObjectURL(url);
      };
    })();

    saveBlob(doc, `fileName`);

This has helped me tremendously. Thank you!!

Thanks so much.

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!