如何将 HTML 表格导出到具有不同工作表的单个 Excel 工作簿？

Question

I have the following code which I call on a button click and which helps me pass an html table id and have it downloaded in a single Excel workbook. This works fine, but I want to pass multiple table ids to get the data of different tables in different sheets of the same Excel workbook. I am unable to modify this function to address that issue.

Moreover, I want to retain similar kind of formatting and use the customized file name as I have used here. Can anyone help me? Please find my code below:

  <script>
   function fnExcelReport()
   {
       var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
       var textRange; var j=0;
       tab = document.getElementById('data'); // id of table : I want to pass more than one ids here

       for(j = 0 ; j < tab.rows.length ; j++) 
   {     
         tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
         //tab_text=tab_text+"</tr>";
   }

   tab_text=tab_text+"</table>";


   var ua = window.navigator.userAgent;
   var msie = ua.indexOf("MSIE "); 

   if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
   {
      txtArea1.document.open("txt/html","replace");
      txtArea1.document.write(tab_text);
      txtArea1.document.close();
      txtArea1.focus(); 
      var e = document.getElementById("configselect");
      var strUser = e.options[e.selectedIndex].text;
      var f = document.getElementById("configmonth");
      var strUser1 = f.options[e.selectedIndex].text;
      var filename = strUser+"_"+strUser1+"_"+document.getElementById('configkpi').value+"_"+document.getElementById('configyear').value+".xls";
      //alert(filename);
      sa=txtArea1.document.execCommand("SaveAs",true,filename);
   }  
  // else //other browser not tested on IE 11
   //   sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
   //  return (sa);
       else {//other browser 
           var a = document.createElement('a');
           var data_type = 'data:application/vnd.ms-excel';
           var table_div = tab_text;    //Your tab_text   
           var table_html = table_div.replace(/ /g, '%20');
           //alert(table_html)
           a.href = data_type + ', ' + table_html;
           //setting the file name
            var e = document.getElementById("configselect");
            var strUser = e.options[e.selectedIndex].text;
            var f = document.getElementById("configmonth");
            var strUser1 = f.options[e.selectedIndex].text;
           var filename = strUser+"_"+strUser1+"_"+document.getElementById('configkpi').value+"_"+document.getElementById('configyear').value+".xls";
           a.download = filename;
           //triggering the function
           a.click();

       }

       return (sa);
  }

Answer 1

["

You can create an Excel workbook with multiple sheets and with formatting (including colspan and rowspan) using SheetJS<\/a> .<\/i>

Answer 2

As per your code you have used data:application/vnd.ms-excel You can do something like this .

JS Function

  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 = (dataFormula)?dataFormula:(appname=='Calc' && dataType=='DateTime')?dataValue:null;
        ctx = {  attributeStyleID: (dataStyle=='Currency' || dataStyle=='Date')?' ss:StyleID="'+dataStyle+'"':''
               , nameType: (dataType=='Number' || dataType=='DateTime' || dataType=='Boolean' || dataType=='Error')?dataType:'String'
               , data: (dataFormula)?'':dataValue
               , attributeFormula: (dataFormula)?' ss:Formula="'+dataFormula+'"':''
              };
        rowsXML += format(tmplCellXML, ctx);
      }
      rowsXML += '</Row>'
    }
    ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
    worksheetsXML += format(tmplWorksheetXML, ctx);
    rowsXML = "";
  }

  ctx = {created: (new Date()).getTime(), worksheets: worksheetsXML};
  workbookXML = format(tmplWorkbookXML, ctx);

console.log(workbookXML);

  var link = document.createElement("A");
  link.href = uri + base64(workbookXML);
  link.download = wbname || 'Workbook.xls';
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
 })();

HTML (sample html code for demonstration)

 <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>
<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>

Link to JSFiddle