Generate Files Using JavaScript

Ever wondered how to generate a file's data and download it using JavaScript? I recently used a Blob object and the a tag with the download attribute to accomplish what I needed.

Summary

This will be a very quick post, getting straight to the point. There's not too much fluff to get lost in, so let's just dive right into the code example!

I will show how to

• Create a Blob from a string (Blobs work well with the download attribute of the a tag)
• Create an Object URL for your downloadable blob.
• Create an a tag which powers the download
• Trigger the download programmatically, (or attach the link to the DOM if you want)
• Side note - It's best to release the URL afterward

// Create the blob (file data) and trigger download:
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);

// This simple recipe uses the <a> tag, ends up something like:
// <a href="bloburl" download="filename.csv"></a>
const a = document.createElement("a");
a.href = url;
a.download = "filename.csv";

// Trigger the download
a.click();

Create a Blob for download

const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });

There are a few assumptions about the above snippet

1. You want to generate a CSV file for download
2. You already have a javascript string formatted into a CSV string. (There are libraries and many other ways to accomplish this, so I will leave this out)

You could really create a file of many types, you'll just have to read up a little on your specific case.

If you want to know more about Blobs, the mozilla docs about Blobs are the way to read up!

Create an Object URL

This one is in preparation for setting up the download attribute of the a tag

const url = URL.createObjectURL(blob);

If you want to know more, the mozilla docs about createObjectURL are what I used.

Create the a tag

// This simple recipe uses the <a> tag, ends up something like:
// <a href="bloburl" download="filename.csv"></a>
const a = document.createElement("a");
a.href = url; // It's pointing to our Blob!
a.download = "filename.csv";

Go here to learn more about the download attribute

Then, as a final step you can actually download the file (without even attaching the element to the DOM!) using:

// Trigger the download
a.click();

You can optionally attach the tag to the DOM, or manipulate an existing tag that is already on the DOM, etc. This is just one of your options.

Conclusion

I had to create a simple downloadable CSV template for a work assignment, so I figured I'd share this simple recipe of how to accomplish it.

I will also note, that the Mozilla Docs recommend releasing the Object URL once you are done with it for proper memory management. I'll leave that to you for further reading.

Anyway, I hope this helps somebody, including myself, in the future when dealing with downloads!