DEV Community

Download Any File from Blob

Keff on March 24, 2020

I'm posting this here to have it accessible and maybe somebody will find it useful as well! Deprecated (see next snippet) function...

Read full post

Kaltu • May 22 '20

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.

Keff • May 22 '20

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

Keff • Jun 8 '20

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.

GSPTeck • Dec 7 '20

How would i use this to download a video which is a blob url?

Keff • Dec 9 '20

I think you can do it the same way, you just need to first convert the video into a blob, then you can pass it to the function as follows:

const videoBlob = createVideoBlob(video);
downloadBlob(videoBlob, 'myvideo.mp4');

Keff • Dec 9 '20

You could try this:

downloadBlob(completeBlob, 'myvideo.mp4');

Instead of:

downloadBlob(URL.createObjectURL(completeBlob), 'myvideo.mp4');

I think it does not like the data returned from createObjectURL, as it expects a blob that returns a DOMString.

GSPTeck • Dec 10 '20

It works, but the length of the video is always 0 seconds.
How would I fix this?

Keff • Dec 11 '20

I guess that has something to do with how you create the video blob. If you share your code I can take a look and check if there is something wrong

Comment deleted

Keff • Dec 11 '20

Seems to be correct, as far as I can see.

can you see the video in any other way before converting to blob? Maybe in the page itself?

GSPTeck • Dec 11 '20

You can take a look at the full source code here: github.com/gspteck/RecScreen

boustanihani • Nov 10 '20 • Edited

Thanks for sharing.

Is there a way to get notified when the download actually starts and maybe also when the download is done?

Keff • Nov 10 '20

I don't think so, as it is a native download in another window/tab, like if you open a link to a file and chrome downloads it automatically.

I think you might be able to know when it is done, but have not played with that.

Lisa • Sep 11 '20 • Edited

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.

Keff • Nov 10 '20

Hey, I have not tried on IE11, but I would guess it does not work as usual :P

I might look for an IE11 alternative and post it here as well, I will notify you if I do.

geoliguay • Jul 24 '20

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

Keff • Jul 26 '20

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

felipepsantanna • Aug 17 '20

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

Keff • Aug 17 '20

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