generate downloadable files in the browser using Blob and URL API

Shows how to create CSV, TXT, PDF, ICS/iCal, etc files right within the browser without ever hitting server-side. Uses the Blob API to build files in the browser and the URL API to create object URLs from them to make them downloadable. The whole thing is as simple as ...

const blob = new Blob(["your data"]);

[ade]

short and simple tutorial, but just what i needed for my project. this is awesome thank you!!!

[shubhamh]

Just want to thank you for the amount of dopamine rushed through me when I finally found the solution to the problem bugging me since a long time

[himabindu]

This gives a good understanding of Blob API.Thanks!!

[asimgiri]

Such an easy explanation. Thank You for sharing

[freelancefabian]

Great example, ran into this issue the other day and used the same solution.

[michaelcasile]

Very helpful. I will be trying to use this with pdfkit which can stream to a blob and hopefully this will help me get that blob to download as a PDF. Thanks again.

[gaganbedi]

very well explained sir. God Bless You.

[Yoko-x]

when applying this to the mp4 video link, as it would do for the video buffer. because the whole video is being downloaded so that it can start playing

[nbietz]

Can you convert a base64 encoded image (say from to a Blob or File in the browser for the purpose of uploading to some storage API?

[TriWaZe]

I have a blob file generated from my webcam but I'm trying to figure out how to send that mp4 file to my server. Think you could help?

[yogeshbansal]

Hello sir,
I would like to know if my file is greater than 12 mb and service returning result in blob and it is taking time on server how can I tell user to wait or any way to reduce the service response time?

[tobias]

I don't get it. Where so you start with all this? I'm a beginner and I would like to know what the whole screen is you work in in the first place...

[CyberTechBits]

@SpinSpire That's a very nice tutorial. I am writing a quoting tool and ran into a roadblock. I am able to save, client side, the quotes in JSON format using blob... very easy and nice so thanks for that pointer since i was using file reader previously. Blob is cleaner IMO. However, I ran into a problem and curious if you can help? I need to be able to upload those same JSON files into the web application client side. I cannot find anywhere any information that will allow a user to select the JSON file locally in order to import or upload it to the application. Any pointers?

[prajakta.gandhi]

Sir, can you provide me code where We can export chart, table and html data together into single .doc file one after the next, in javascript or angular.

[philiperiskallaleal]

Dear Sir,

I would like to know how one may apply your approach for a binary streames file, let's say an Excel file that was generates from the Server.

I thank you for your time.

Sincerely,

[fashiondiaries]

Sir this video was usefull but I have a question that I have made the Google spread sheet in my computer i have to give this website to anyone is this spread sheet will open automatically? Or in other computer like we did we have to make a excel sheet?

[vinny]

Any thoughts on downloading a video that is a Blob URL?

[raiyansarker]

How to make that blob URL unvisitable or downloadable like used in netflix or udemy? Please make a video about this. Couldn't find anything better related to this problem!

[souvikkumarpaul]

how to download get response from MySQL database as a PDF file?

[emilytan]

Please help how if i want to include this 'a1' blob url in this form.
I need src to use the blob url. The bottom code does not work.

<video class="cc-video" playsinline loop autoplay preload="auto" muted>
<source id="a1" src="a1" type="video/mp4" />
</video>