loading...

Download Any File from Blob

nombrekeff profile image Manolo Edge Updated on ・1 min read

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

Posted on by:

nombrekeff profile

Manolo Edge

@nombrekeff

I don't know... I just code and they pay me!

Discussion

pic
Editor guide
 

I tried this snippet and hit by this error: "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided."
Upon a quick search it seems "window.URL.createObjectURL()" had been blocked by all major browsers since 2019 for security reasons.

 

Ohh, damn, thanks for the information. I did not know this, it worked when I tested it, maybe my browser was not up to date or something.

I will add a warning and research a compatible way of doing it :P

 

I've updated the post, the new snippet should work correctly.

If you find any issue in any browser, please let me know and I will be updating the snippet to adapt to any problems.

 

Hi, I'm trying to download a URL in Blob, would you know how to tell me how?

 

Do you mean downloading a file from a URL?

If that is the case, you first need to read the URL as a blob. I think you can do this with FileReader or with a simple fetch/ajax/http request. Then, once you have the Blob you can use my method above to download it.

It would look something like this:

const url ='http://sample.example.file.doc'
const options = {};

fetch(url, options)
  .then( res => res.blob() )
  .then( blob => {
    downloadBlob(blob, 'filename.doc');
  });
 

Hi, Is it also the same solution with blob images? im having the same problem which is broken image display in any browser. thanks.

 

Hi, yup it should also work with images, just pass the binary data into the blob class constructor

 

hi Manolo, thank you for sharing the code. I tried the new snippet on IE11 for downloading a PDF file but not work. Does it work for you? thanks.