Generate and Download files using JavaScript
Tags: tricks, javascript, tutorial
Published: 2020-04-28 17:21:56

---
title: Generate and Download files using JavaScript
published: true
date: 2020-04-20 13:12:22 UTC
tags: tricks, javascript, tutorial
canonical_url: https://yon.fun/generate-and-download-files-using-js-blob-api/
---

![Generate and Download files using JavaScript](https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

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 achieve that 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](https://developer.mozilla.org/en-US/docs/Web/API/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 [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system.

Read more about Blob on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Blob).

## Generate and Download data using JavaScript

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

Consider we have a JSON format object which contains some application configurations:

```js
const configuration = [{ active: true, showButton: false }];
```

Firstly we have to convert out `configuration` object into a `Blob`:

```js
const blobConfig = new Blob(
    [JSON.stringify(configuration)], 
    { type: 'text/json;charset=utf-8' }
)
```

After we need to create a `blob://...`  link using `URL.createObjectUrl` method and sending `blobConfig` as parameter,  it's dynamic and always different:

```js
const blobUrl = URL.createObjectUrl(blobConfig);
```

As we have a `blob://...` URL, we just simply create an `a` element with corresponding `href` attribute:

```js
const anchor = document.createElement('a');
anchor.href = blobUrl;
anchor.download = "my-configurations.json";

// Auto click on a element, trigger the file download
anchor.click();

// This is required
URL.revokeObjectURL(blobUrl);
```

Keep in mind, always do `URL.revokeObjectURL(blobUrl)` when you don't need that URL anymore. **This is very important for performance.**

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

```js
// Configurations object
const configuration = [{ active: true, showButton: false }];

// Convert object to Blob
const blobConfig = new Blob(
    [JSON.stringify(configuration)], 
    { type: 'text/json;charset=utf-8' }
)

// Convert Blob to URL
const blobUrl = URL.createObjectUrl(blobConfig);

// Create an a element with blobl URL
const anchor = document.createElement('a');
anchor.href = blobUrl;
anchor.download = "my-configurations.json";

// Auto click on a element, trigger the file download
anchor.click();

// Don't forget ;)
URL.revokeObjectURL(blobUrl);
```

### Conclusion

Always use this trick when you need to download a file with some data from your application. Don't complicate yourself with any server-side code, or third-party libraries anymore.

Need help? Leave a comment!