JSFiddle - React, Tailwind, and code Playground

by Venkatesan S

HTML

<table id="tbl1" class="table2excel">
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Available</td>
        <td>Count</td>
    </tr>
    <tr>
        <td>Bred</td>
        <td>1
        </td>
        <td>2
        </td>
        <td>3
        </td>
    </tr>
    <tr>
        <td>Butter</td>
        <td>4
        </td>
        <td>5
        </td>
        <td>6
        </td>
    </tr>
</table>
<hr>

<table id="tbl2" class="table2excel">
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Available</td>
        <td>Count</td>
    </tr>
    <tr>
        <td>Bred</td>
        <td>7
        </td>
        <td>8
        </td>
        <td>9
        </td>
    </tr>
    <tr>
        <td>Butter</td>
        <td>14
        </td>
        <td>15
        </td>
        <td>16
        </td>
    </tr>
</table>


<button onclick="tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')">Export to Excel</button>

JavaScript

/* Exporting multiple tables as worksheet in xls */
var tablesToExcel = (function() {
      var uri = 'data:application/vnd.ms-excel;base64,',
          tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' + '<Styles>' + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' + '</Styles>' + '{worksheets}</Workbook>',
          tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>',
          tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>',
          base64 = function(s) {
              return window.btoa(unescape(encodeURIComponent(s)))
          },
          format = function(s, c) {
              return s.replace(/{(\w+)}/g, function(m, p) {
                  return c[p];
              })
          }
      return function(tables, wsnames, wbname, appname) {
          var ctx = "";
          var workbookXML = "";
          var worksheetsXML = "";
          var rowsXML = "";

          for (var i = 0; i < tables.length; i++) {
              if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
              for (var j = 0; j < tables[i].rows.length; j++) {
                  rowsXML += '<Row>'
                  for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
                      var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                      var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                      var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
           ...