Post
Ask Question

Exporting HTML Table To Excel Using jQuery

In this blog, we will see how to export an HTML table to an Excel file, using the simple table2excel jQuery plugin. First we, will create the HTML table, which shows employee details and an "Export to Excel" button, as shown below.
  1. <div>  
  2.     <table id="mytable" cellpadding="5" border="1" cellspacing="0">  
  3.         <thead>  
  4.             <tr>  
  5.                 <th>  
  6.                     Employee Name  
  7.                 </th>  
  8.                 <th>  
  9.                     Age  
  10.                 </th>  
  11.                 <th>  
  12.                     Designation  
  13.                 </th>  
  14.                 <th>  
  15.                     Experience  
  16.                 </th>  
  17.             </tr>  
  18.         </thead>  
  19.         <tbody>  
  20.             <tr>  
  21.                 <td>  
  22.                     Rajeev  
  23.                 </td>  
  24.                 <td>  
  25.                     31  
  26.                 </td>  
  27.                 <td>  
  28.                     Developer  
  29.                 </td>  
  30.                 <td>  
  31.                     6  
  32.                 </td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <td>  
  36.                     Sandhya  
  37.                 </td>  
  38.                 <td>  
  39.                     27  
  40.                 </td>  
  41.                 <td>  
  42.                     Tester  
  43.                 </td>  
  44.                 <td>  
  45.                     2  
  46.                 </td>  
  47.             </tr>  
  48.             <tr>  
  49.                 <td>  
  50.                     Ramesh  
  51.                 </td>  
  52.                 <td>  
  53.                     25  
  54.                 </td>  
  55.                 <td>  
  56.                     Designer  
  57.                 </td>  
  58.                 <td>  
  59.                     1  
  60.                 </td>  
  61.             </tr>  
  62.             <tr>  
  63.                 <td>  
  64.                     Sanjay  
  65.                 </td>  
  66.                 <td>  
  67.                     32  
  68.                 </td>  
  69.                 <td>  
  70.                     Developer  
  71.                 </td>  
  72.                 <td>  
  73.                     5  
  74.                 </td>  
  75.             </tr>  
  76.             <tr>  
  77.                 <td>  
  78.                     Ramya  
  79.                 </td>  
  80.                 <td>  
  81.                     23  
  82.                 </td>  
  83.                 <td>  
  84.                     Developer  
  85.                 </td>  
  86.                 <td>  
  87.                     1  
  88.                 </td>  
  89.             </tr>  
  90.         </tbody>  
  91.     </table>  
  92.     <br />  
  93.     <button onclick="exportexcel()">  
  94.         Export to Excel</button>  
  95. </div>  
Running the page will look as shown below.



Now, we reference the jQuery file and table2excel file in our head section.
  1. <head runat="server">  
  2.     <title>Table 2 Excel</title>  
  3.     <script src="jquery.min.1.11.1.js" type="text/javascript"></script>  
  4.     <script src="jquery.table2excel.min.js" type="text/javascript"></script>  
  5. </head>  
Now, we write our exportexcel() function, as shown below.
  1. <script type="text/javascript">  
  2.         function exportexcel() {  
  3.             $("#mytable").table2excel({  
  4.                 name: "Table2Excel",  
  5.                 filename: "myFileName",  
  6.                 fileext: ".xls"  
  7.             });  
  8.         }  
  9. </script>  
In the script given above, the filename is the name of the file downloaded and fileext is the extension of the file to be downloaded, which is XLS.

Now, we will run the page and click on Export to Excel button.

Our Excel file will be downloaded. On opening the file, we can see the data of our table, as shown below.



Our Excel exporting is complete.

Reference

jquery-table2excel

Summary

In this blog, we have learned how to export HTML table to an Excel file, using the table2excel jquery plugin. I hope this will be helpful.
Next Recommended Reading Exporting HTML Table To CSV File Using jQuery