Chrome Extension

How to export HTML table to excel using Javascript?

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

1 Answers

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/xlsx@0.15.1/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>
Search history ×