JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tbl1" class="table2excel">
                    <tr style="background-color:yellow;">
                        <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

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");
            dataValue = (dataValue)?dataValue:tables[i].rows[j].cells[k].innerHTML;
            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
            dataFormula =...