How to export/download the HTML table to Excel using Javascript?

HTML table

HTML providing the <table> tag to show the data in row and column format. We might have seen those tables in several web pages. Example: Stock Price list,Employee salary reports, Student marks report and so on. The below image is showing the corona cases report in HTML table format.

Corona cases report in HTML table
Corona cases report in HTML table

If we have the option to download those tables in excel, It would be helpful to analyze the data. Lets create the sample table using HTML and enable the download option using Javascript.

Javascript array

Javascript array is used to store collection of values in a single variable. As we know, the HTML table has a collection of rows and columns. We can add those values into array. Then the delimiters will be added for each row and column values to create the excel record.

var result = [‘Company’,’Group’,’Previous Value’,’Current Value’]

  • Each row in a table delimited by new line character (\n)
  • Each column in a table delimited by comma character (,)

Example : Download the HTML table in Excel (.csv) format

In this example, we are going to create the stock price list table with the download button – To export the table in csv file.

Step 1 : Create the HTML table

The below HTML code creates the stock price list table.

  • <table> – Defines HTML table which contains set of rows and column values
  • <tr> – It creates row element in the table.
  • <th> – The header cell value created in this tag.
  • <td> – Defines data cell/column of the table.
HTML table example
HTML table example

Step 2 : Add CSS properties to style the table

In the HTML code, id (tblStocks) is defined for the <table> tag. For that id, We can add the CSS properties (margin,colour,font style) which will change the table style.

Change the table style using CSS
HTML table with CSS properties

Step 3 : Create the download button

Bootstrap providing the graphical icons from the Glyphicon Halflings set. Lets create the button with download icon using Glypicons.

Add download button using Glyphicon
Add download button using Glyphicon

Step 4 : Implement Javascript function to download the HTML table in CSV file.

  • Get the HTML table into Javascript variable using id “tblStocks” which is assigned for <table> tag.
  • Loop through the variable to fetch cell values and add those values into javascript array. Here we are having array inside a array which means the outer array contains number of rows and each inner array contains number of columns for each row.
  • Create <a> tag element with download attribute which used to download the data when user clicks the button. Here we are specifying data format as csv.

Step 5 : Call the Javascript function using onclick event

Here we have created the javascript function in different file which named as “downloadFile.js”. Include that file in HTML using <script> tag. This script tag should be placed inside the <head> tag.

Finally create the onclick event for the Download List button to call the javascript function exportData().

As you can see below, the HTML table downloaded in the csv file(Stock_Price_Report.csv) when user clicks the Download list button

Download HTML table in CSV
Download HTML table in CSV

HTML table downloaded in CSV file (Stock_Price_Report.csv)

Create csv file in Javascript
Create csv file in Javascript

Complete code for reference :

Javascript file : downloadFile.js

Recommended Articles