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

/ / 27 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 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.

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 *

27 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 ??
  14. morteza_mousavi90 02/22/2022 04:53:21
    It was helpful. Thanks
  15. aadil 04/07/2022 11:50:01
    excel file download but only header show data not show how to download complete data
  16. Gitz 07/17/2022 10:13:56
    fantastic job
  17. Sietse 09/16/2022 14:46:02
    Made the html in js but somehow the button makes a weird file. Could you help? https://codepen.io/sietssoo/pen/oNqGpXq?editors=0010
  18. Edwin 09/19/2022 12:39:04
    Thank you so much, it worked for me
  19. Jotan 09/27/2022 10:49:20
    Its great , its working
  20. michele 10/07/2022 08:19:48
    works amazing! i have some hidden rows (which can be shown with a button click). I want to include those rows and it doesnt work. how can i do it?
  21. BRUNO 11/17/2022 15:53:46
    I was surprised how well and hassle free it worked, THANK YOU SO MUCH!
  22. nishantha 02/25/2023 08:03:19
    thank you so much
  23. Mrunal 03/23/2023 17:22:48
    It is working for me. But I want to exclude some of the rows in HTML table. I tried by adding css class with 'display:none', but still all the rows are getting exported in excel with same rows with 'Hide' state. Has anyone tried ? Or any pointers ?
  24. Shrasti 04/03/2023 14:19:47
    I tried multiple codes from google. This is the only example that is easy and works perfectly. Thank you so much Sir!!
  25. BG 04/14/2023 05:47:07
    Hi Satinder, a great help! Didn't work a couple of initial attempts - but it has now (some adjustments needed in the names, etc. - but figured out) !! Shall try more complex tables to check. Meanwhile, a big 'Thank You' and want to record my appreciation! Good Luck for your future endeavours ...