Js to download file

When you're used to be working only on JavaScript and sometimes needed to keep some data on your computer, you might have to implement some server-side code or some tricky HTML which weren't working all times. Thanks to Blob API, nowadays we can download any file (clicking on button) with JS more efficiently and painlessly ;)

What's a Blob?

MDN says:

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data or converted into a ReadableStream so its methods can be used for processing the data.

Blobs can represent data that isn't necessarily in a JavaScript-native format. The interface is based on , inheriting blob functionality and expanding it to support files on the user's system.

Read more about Blob on MDN.

Let's create the Download Button

As we already know what's a Blob, let's have a look at how to download any data just using JavaScript Blob API.

Consider having a JSON format object which contains some application configurations:

Firstly we have to convert out object into a :

After we need to create a  link using method and sending as parameter,  it's dynamic and always different:

As we have a URL, we just simply create an element with corresponding attribute:

Keep in mind, always do when you don't need that URL anymore. This is very important for performance.

That's it! Here's the full code:

Now, on button click, you'll have the configurations file downloaded, and all of this just with the help of JavaScript;

Easy, right?

Conclusion

Always use this trick when you need to download any files in the Browser. Don't complicate yourself with any Server-Side code, or third-party libraries anymore.

Thanks for reading!