Exporting HTML Table to Excel [.xls, .csv] using JavaScript Tutorial

In this tutorial, you will learn how to Export HTML Table Data to Excel Spreadsheets and CSV Files using JavaScript. This tutorial aims to provide the IT/CS student and new programmers with a reference to learn to export Data into Excel using only Pure JavaScript. Here, I will provide sample snippets on how to achieve this tutorial's objectives. A working sample program source code zip file is also provided and is free to download.

In some programs or web applications, the management often requires an export of data from the system to excel spreadsheets or CSV files. Mostly, the purpose of this feature is to extract the data that allows the system management to use it for some other purpose. Export to Excel features is commonly implemented along with the report feature of the program.

How to Export HTML Table to Excel File using JS?

There are a lot of ways to Export Table Data to CSV or Excel Spreadsheet. Some developers preferred to use free plugins or libraries to make it possible. Using JavaScript built-in methods and short lines of script, we can also achieve the said feature for our web application. JavaScript comes with a Blob object which is very helpful to achieve our goal here. We can simply generate a file-like raw data of the HTML Table and create an object URL to put in an anchor tag which enables us to download the file.

What is JS Blob?

A blob is an immutable, file-like object with raw data; it can be read as text or binary data or turned into a ReadableStream so that its methods can be used to process the data. The JavaScript's Blob object represents blobs.

Steps of Exporting Table Data to Excel [.xls, .csv]?

Export as Excel Spreadsheet File

1. Get the Table outer HTML in JS and put it into a new HTML document string
2. Convert the HTML document string into a Blob object using the application/vnd.openxmlformats-officedocument.spreadsheetml.sheet content-type.
3. Create an Anchor Element
4. Set a download attribute to the anchor with the filename as the value i.e exportedData.xls
5. Create an Object URL of the Blob object and set it into the anchor's href attribute
6. Append the Anchor Tag to the page document body
7. Trigger Click the Anchor Tag to download the exported file

Export as CSV File

1. Get the Table outer HTML in JS and put it into a new HTML document string
2. Convert the HTML document string into a Blob object using the text/csv content type.
3. Create an Anchor Element
4. Set a download attribute to the anchor with the filename as the value i.e exportedData.csv
5. Create an Object URL of the Blob object and set it into the anchor's href attribute
6. Append the Anchor Tag to the page document body
7. Trigger Click the Anchor Tag to download the exported file

Snippets

Using the following snippet, we can export the Table Data into a (.xls) or Excel Spreadsheet File easily. The following script uses the Blob object to convert HTML into a blob using the application/vnd.openxmlformats-officedocument.spreadsheetml.sheet content type.

The following snippet has a similarity to the first snippet I provided. The only difference is that the table data was extracted from the table cells. The table rows are separated with (\r\n) or next line delimiter and each cell of the row is separated using the comma (,). Aside from that, the Blob content type must be text/csv.

Using the JavaScript snippets that I provided above, we can achieve our goal and objective of this tutorial which is to export Table Data to an Excel Spreadsheet and CSV File. The following is the snippet of a simple program that demonstrates the usage of the given snippet above.

Example

Interface

Assuming that we have an application page with an HTML Table that displays a list of record. Here's an example script of an application page interface. The script is known as an index.html file.

JavaScript

Next, is creating the JavaScript file that contains the script for exporting the table data to .xls and .csv files. This file is loaded at the index.html file and is known as script.js.

Snapshots

Here are the snapshots of the result of the program source code I provided above.

Page Interface

Exported Excel Spreadsheet

Exported CSV File

There you go! You can now test the sample program on your end and see if it works properly. I provided also the complete source code file of the sample program that I created for this tutorial. You can download it by clicking the download button below this article.

That's it! That's the end of this tutorial. I hope this Exporting HTML Table to Excel Spreadsheet and CSV File using JavaScript Tutorial will help you with what you are looking for and you'll find this useful for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)