jQuery HTML table to excel spreadsheet export plug-in with 2 live demos

Export HTML table to excel spreadsheet by jQuery

In this tutorial, I am going to share an awesome plug-in for exporting the HTML table data to the excel sheet by a click of a button.

The plug-in is based on jQuery which is light-weight, only 3Kb of the JS file. You need to include the plug-in JS file in the <head> section, after the reference of jQuery JS file. Simply refer the table ID or class in the jQuery code that you want to export to the excel spreadsheet with a few options and you are done.

A demo of jQuery HTML table to excel export

For the demo, I am creating a table that is based on Bootstrap classes to simplify the process. You may use any table, even without any CSS that you want to export.

The table contains the <th> tags that define the headings for the table of HTML. The same headers act as the headings in the excel sheet after export. A few options may also be set like tab name in the excel sheet, the file name of excel etc in the jQuery code that I will explain after the demo.

For this demo, the excel export file will download as the demo page loads. The next demo shows downloading the file as the button is clicked, have a look:

jquery table excel

See online demo and code

The markup of the table:

 

The simple script with only two options that specify the file and tab names:

A demo of table to excel upon clicking a button with filtering rows

In this example, the export of HTML table is linked with the button. As you click the button “Export table data to excel”, the excel file will download on the user’s computer.

Also, you may specify certain rows not to be exported to the excel file. For that, simply use the exclude option in the jQuery code where you will specify the class/ID of the row that you want to omit.

See this example where I have used the exclude for the last row in the table. The table contains four rows as you see it on the demo page. After downloading the excel file, open it and you can see it contains only three rows:

jquery table excel button

See online demo and code

Following is the script used in the demo:

 

The markup is almost the same as in above example except the class is added to the last row that is omitted from the export file plus it contains a button:

 

Setting up table to excel export plug-in

The process is quite simple.

  • Download the plug-in from the Github website or you may get the JS file from the demo page after “view source” the code and locate the jquery.table2excel.js file. Save it at your system and place at the desired location where you intend to refer it in the <head> section e.g.:

   <script src=”js/table2excel/jquery.table2excel.js”></script>

  • As, I have used Bootstrap based table, so its reference is also given in the <head> section. You may use a simple HTML table even without any CSS, borders etc.
  • Not to mention, the jQuery library is included before the reference of plug-in’s JS file.
  • The above two demos show how to use the options and markup for exporting the table.