JavaScript: Convert / Export HTML table data to excel [Xls]

JavaScript Convert Html Table to Excel XLS: Here in this tutorial, we can create an excel file from our HTML table data on the client side. i.e Export HTML table to Excel (.xlsx) using javascript.

There are many libraries available that create CSV files or Xlsx files from the HTML table, but all are giving a prompt message. That is when we open that excel file it prompts a message as "The file format and extension of the filename don't match". The file could be corrupted or unsafe. 

Today this article will use SheetJS, which allow us to create and open excel file without any prompt message and that's pure in javascript.

The second advantage of using the SheetJs library is that it can easily export large HTML tables into excel, an example is provided below.

You can also check our article on how to convert HTML to image on the client side. 

Steps to export HTML table to excel using JavaScript

1. HTML Markup: Add a table with some data.
2. Import SheetJS Library
3. Javascript code: Using the SheetJS library export table data into an excel file.

Video:

HTML Markup: Add table with data and button tag.

Here first we add an HTML table with some dummy data and a button tag. Our table HTML markup looks as written below.

<table id="tbl_exporttable_to_xls" border="1">
	<thead>
		<th>Sr</th>
		<th>Name</th>
		<th>Location</th>
		<th>Job Profile</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td><p>Amit Sarna</p></td>
			<td>Florida</td>
			<td>Data Scientist</td>
		</tr>
		<tr>
			<td>2</td>
			<td><p>Sagar Gada</p></td>
			<td>California</td>
			<td>Sr FullStack Dev</td>
		</tr>
		<tr>
			<td>3</td>
			<td><p>Ricky Marck</p></td>
			<td>Nevada</td>
			<td>Sr .Net Dev</td>
		</tr>           
	</tbody>
</table>
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>

Download and Import SheetJS Library on our webpage

To convert HTML table data into excel, we need to use the SheetJS library. Using SheetJs we can easily convert our table data into an Xls file. We can download the js file from Github or directly use the CDN hosted file.

Import library code as written below:

<script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>

We are done with HTML markup and importing the Sheetjs library. Next, we have to add and call the javascript function i.e ExportToExcel on button click.

JavaScript code: Using the SheetJs library export table data into an excel file.

Here on the button tag, we add an on-click event and call the js method ie ExportToExcel. Final javascript method as written below:

function ExportToExcel(type, fn, dl) {
       var elt = document.getElementById('tbl_exporttable_to_xls');
       var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
       return dl ?
         XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
         XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
    }

View Demo

Here in the above javascript function, tbl_exporttable_to_xls is the id of our HTML table, whose data we want to export. Also, we set type base64, so there would be no problem for older browsers i.e IE browser.

In Internet Explorer ie browser using SheetJS, we can easily export HTML table data to excel. With the SheetJs library, we can export the Html table to Xlsx with formatting.

Conclusion: Here using SheetJS we can export the Html table into an excel file. Also as other library displays a popup message while opening the excel file, here with Sheetjs it gets open without any popup message. I find it the best javascript library for converting data into an excel file.