How to export HTML table to excel using Javascript?

ankitdhama

Is there any way by which we can export an HTML table to excel using javascript. I am working on a project that requires JSON data key values to be exported as excel table cells.

If you could provide any javascript library that can do the job will be a graat help. Thanks

user image Write your Answer
3 Answers
User Image Devsheet

You can use SheetJS - https://github.com/sheetjs/js-xlsx which is a javascript library for this purpose.

It gives you multiple options to export excel in different formats like .xlsx, .xlsb, .ods, .fods, etc. Below is the simple explanation to add excel export of the table into your website.

First of all, add sheetjs library to your webpage by downloading from github link and link 'xlsx.full.min.js' to your webpage using script tag as below

<script type="text/javascript" src="dist/xlsx.full.min.js"></script>

OR, you can also add cdn link of sheetjs library as below

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>

Now create a table inside your HTML code and a button on which click the export table code will be called along with the script function, below is the sample code

<table id="exportable_table">
   <tbody>
      <tr>
         <td>Row 1 - Column 1</td>
         <td>Row 1 - Column 2</td>
         <td>Row 1 - Column 3</td>
      </tr>
      <tr>
         <td>Row 2 - Column 1</td>
         <td>Row 2 - Column 2</td>
         <td>Row 2 - Column 3</td>
      </tr>
      <tr>
         <td>Row 3 - Column 1</td>
         <td>Row 3 - Column 2</td>
         <td>Row 3 - Column 3</td>
      </tr>
   </tbody>
</table>

<button onclick="ExportExcel('xlsx')">Export table to excel</button>

<script type="text/javascript">
function ExportExcel(type, fn, dl) {
   var elt = document.getElementById('exportable_table');
   var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
   return dl ?
      XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
      XLSX.writeFile(wb, fn || ('SheetJSTableExport.' + (type || 'xlsx')));
}

</script>

The full HTML code to export table can be found below

<html>
<head>
   <title>Export to excel using sheetjs</title>
</head>

<body>
   <table id="exportable_table">
      <tbody>
         <tr>
            <td>Row 1 - Column 1</td>
            <td>Row 1 - Column 2</td>
            <td>Row 1 - Column 3</td>
         </tr>
         <tr>
            <td>Row 2 - Column 1</td>
            <td>Row 2 - Column 2</td>
            <td>Row 2 - Column 3</td>
         </tr>
         <tr>
            <td>Row 3 - Column 1</td>
            <td>Row 3 - Column 2</td>
            <td>Row 3 - Column 3</td>
         </tr>
      </tbody>
   </table>

   <button onclick="ExportExcel('xlsx')">Export table to excel</button>

   <script type="text/javascript">
      function ExportExcel(type, fn, dl) {
         var elt = document.getElementById('exportable_table');
         var wb = XLSX.utils.table_to_book(elt, {sheet:"Sheet JS"});
         return dl ?
            XLSX.write(wb, {bookType:type, bookSST:true, type: 'base64'}) :
            XLSX.writeFile(wb, fn || ('SheetJSTableExport.' + (type || 'xlsx')));
      }
   </script>
</body>
</html>
User Image hugoramirezariasEE59

Set the headers

Hi, thanks for this code, really it was very usefull for me. But, when I want to set the headers the file show a blank row between headers and the rows.

How can I to delete this blank row? Please, can you help me please? Thanks very much. Best regards

User Image hugoramirezariasEE59 
	 <thead>
            <tr>
               <th>Column 1</th>
		<th>Column 2</th>
		<th>Column 3</th>
            <tr>
        </thead>

This code I setted to the table

🤔 Related discussions you may be interested in
User image Ankit Dhama @ankitdhama Programmer and Learner
Ask question now
Never leave your website again in search of code snippets by installing our chrome extension.
Install Chrome Extension
Generating new answer. Please wait...