CSV or Excel files, we use them almost everywhere! So it's no big surprise that most applications need support for exporting data to CSV files. There might be many reasons, the app user might want to save the data on his machine, easily share the data with someone else or even import it into some other system. In most of these cases, CSV will be the preferred choice to do it. In this blog post, we will take a look at how to export data to CSV with JavaScript, Angular, React, or any other JS frontend framework. We will make no use of libraries, just good on JavaScript code!

Table of content:

Structure your data for a JavaScript CSV export

Download the CSV export

Conclusion

Structure your data for a JavaScript CSV export

If you want to export data to a CSV file using JavaScript, the data first needs to have the correct format. You want to construct an array of arrays, where each array inside the main array will be a row in the CSV file. Let's say you start with a regular array of objects like this:

const products = [ { "name": "Product 1", "price": 19.99 }, { "name": "Product 2", "price": 29.99 }, { "name": "Product 3", "price": 39.99 }, { "name": "Product 4", "price": 49.99 }, { "name": "Product 5", "price": 59.99 } ]

To make this array ready for a CSV export you need to convert it into an array of arrays, you can do that by using the map() and Object.values() methods:

const productValuesArrays = products.map(product =>Object.values(product));

Your new array of arrays now looks like this:

[ [ "Product 1", 19.99 ], [ "Product 2", 29.99 ], [ "Product 3", 39.99 ], [ "Product 4", 49.99 ], [ "Product 5", 59.99 ] ]

If you would use this mapped data to populate the CSV file and export it in your JavaScript application the result would look like this:

This is already getting there but in most cases you want to add a caption in the first row of the CSV file. To accomplish this in your CSV export you need to modify the array of array to include these captions. You simple need to add a new array with the caption values you want to use on the first row, in this example I will use the keys of the objects from the original products array (name and price). You can accomplish this by doing this:

productValuesArrays.unshift(Object.keys(products));

This will add a new array ['name', 'price'] to the start of your productValuesArrays resulting in this output:

[ [ "name", 'price' ], [ "Product 1", 19.99 ], [ "Product 2", 29.99 ], [ "Product 3", 39.99 ], [ "Product 4", 49.99 ], [ "Product 5", 59.99 ] ]

If we now use JavaScript to export these values to a CSV file this would be the result:

That looks more like it! Now we need to convert the data into a string and then into an encodedURI like this:

Gist

Download the CSV export

To download the CSV file in the browser we can take 2 different approaches. The simplest way is to use the window.open() method, this will instantly download the data in the browser, but the drawback is that you cannot add a file name.

window.open(encodedUri);

The other option is to add an <a> tag to the HTML document and click it programmatically like this:

Gist

Here you create a new <a> tag, assign the encodedURI as the href and set the download attribute to give the CSV file a name. Next you append the newly created tag to the HTML document and click on it to actually download the CSV file.

Conclusion

In this blog post, we have covered the process of exporting data to CSV files using JavaScript. We have seen how to structure the data correctly for a CSV export by converting an array of objects into an array of arrays and adding captions in the first row of the CSV file. We also looked at how to convert the data into a string and encodedURI, and how to download the CSV file in the browser using the window.open() method or by adding a <a> tag to the HTML document and clicking it programmatically.

This method can be applied in any JavaScript frontend framework such as Angular or React, making it a versatile solution for exporting data in a CSV format without the use of libraries.