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

/ / 14 Comments

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 doesn't match. The file could be corrupted or unsafe. 

Today in 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 my 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 table with some data.
  2. Import SheetJS Library
  3. Javascript code: Using 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 import Sheetjs library. Next, we have to add and call javascript function i.e ExportToExcel on button click.

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

Here on the button tag, we add an onclick 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 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 popup message while open excel file, here with Sheetjs it gets open without any popup message. I find this best javascript library for converting data into an excel file.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

14 Comments

  1. Bless Darah 06/16/2021 13:37:01
    Very interesting. I'm wondering if this goes with React or any other framework.
  2. Romach 08/05/2021 18:40:50
    Very good example this worked well, but how do I make the Heading Column names in Bold?
  3. Imran 08/15/2021 20:20:39
    Very Nice
  4. Jacob 08/21/2021 16:40:48
    Hey great solution! I was wondering is there a way to keep the table formatting to xlsx?
  5. Puja 08/25/2021 15:48:59
    This is not working on Mac machines on the Safari browser. Any solution?
  6. Satinder singh 08/25/2021 18:08:42
    Hi pooja,
    Can you pls share the error msg from your browser console?
    As I don't have access to mac machine!
  7. Jose Roberto 08/30/2021 20:07:47
    Very good, but if you have in the table values as 1/2 or 2/4, in the excel you will have 02/01/2001...how can I fix it?
  8. Satinder singh 08/31/2021 18:00:00
    Hi Jose Roberto,
    The issue in SheetJs library is it converts value 1/2 into the date, hence you getting the date format on generated excel. To fix this issue, you need to pass option raw as true Check this Working Demo
  9. KK 09/15/2021 08:32:41
    Works well !
  10. Harish 10/03/2021 08:27:45
    how to exclude column from table
  11. Abdul Rafay 10/05/2021 09:54:29
    It was helpful. Thanks
  12. Christo 10/21/2021 12:47:23
    This works like a dream thank you so much...
  13. Asad 10/22/2021 06:04:01
    How to remove % sign from table during exporting ??