如何将HTML表格导出到一个包含不同工作表的Excel工作簿中?

12
我有以下代码,我在一个按钮点击时调用它,它可以帮助我传递一个html表格id并将其下载到单个Excel工作簿中。这个功能很好,但我想传递多个表格id以获取不同表格的数据,并将它们保存在同一个Excel工作簿的不同工作表中。我无法修改此功能以解决该问题。
另外,我想保留类似的格式并使用自定义的文件名,就像我在这里使用的一样。有人可以帮我吗?请查看下面的代码:
  <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);
  }


2
你能提供HTML吗? - Chinmoy Samanta
不太确定你在做什么,但我建议你使用CSV格式。 - JBis
1
你尝试过使用TableExport.js吗? https://tableexport.v5.travismclarke.com - psyborg.eth
2个回答

13
您可以使用SheetJS创建具有多个工作表和格式(包括colspan和rowspan)的Excel工作簿。以下是讨论线程和发布在该线程中的示例:
1)具有多个工作表的工作簿
- 库:https://github.com/SheetJS/js-xlsx - 讨论:https://github.com/SheetJS/js-xlsx/issues/664 - 演示(单击Excel链接):https://jsfiddle.net/97ajn9wm/1/(由reviewher提供)
我已将reviewher的示例代码从JSFiddle移动到Stack Overflow以便更轻松地查看。运行代码段,然后单击生成的Excel链接以下载具有两个工作表的Excel文件。

function prepareTable(i) {
 var str = "",
  header = "",
  graphImg;
 
 
 header = '<html><h2 style="text-align:center;">Google' + i + '</h2>';
 
 str = '<table border="1">'
  +'<tr><td style="text-align:center" colspan="6">Yahoo' + i + '</td></tr>'
   +'<tr><td style="font-weight:bold" colspan="6">(2017.03.20)</td></tr>'
  +'<thead>'
  +'    <tr style="background-color:#788496; color: #ffffff">'
  +'      <th scope="col" rowspan="2">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th scope="col">'
  +'        <div class="tar">Yahoo(2017-01)</div>'
  +'      </th>'
  +'      <th scope="col" colspan="2">'
  +'        <div class="tar">Yahoo(2016-12)</div>'
  +'      </th>'
  +'      <th scope="col" colspan="2">'
  +'        <div class="tar">Yahoo(2016-12)</div>'
  +'      </th>'
  +'    </tr>'
  +'    <tr style="background-color:#788496; color: #ffffff">'
  +'      <th height="40" align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'    </tr>'
  +'</thead>'
  +'  <tbody>'
    
    +'    <tr style="text-align: right">'
    +'      <td style="padding:0 20px 0 0">'
    +'        <div>NAME</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210%</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210%</div>'
    +'      </td>'
    +'    </tr>'
   +'  </tbody>'
    +'</table></html>';
        
  return header + str;
}

function s2ab(s) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
}

function doExcel1 () {
 var blob,
   wb = {SheetNames:[], Sheets:{}};
        var ws1 = XLSX.read(prepareTable(1), {type:"binary"}).Sheets.Sheet1;
        wb.SheetNames.push("Sheet1"); wb.Sheets["Sheet1"] = ws1;
  
        var ws2 = XLSX.read(prepareTable(2), {type:"binary"}).Sheets.Sheet1;
        wb.SheetNames.push("Sheet2"); wb.Sheets["Sheet2"] = ws2;
        console.log(ws1); console.log(ws2); console.log(wb);
        blob = new Blob([s2ab(XLSX.write(wb, {bookType:'xlsx', type:'binary'}))], {
     type: "application/octet-stream"
 });
 
 saveAs(blob, "test.xlsx");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.10.3/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

<a href="javascript:" class="btn_style1 excel" onclick="doExcel1()"><span>Excel</span></a>

2) 带格式的工作表

这是同一GitHub主题中另一个演示,展示了多个colspan、多个rowspan、背景颜色、字体颜色、字体大小等。此示例来自于GitHub上的HeroSony

如上所述,单击运行代码片段,然后单击生成的Excel链接以下载Excel文件。

function prepareTable() {
 var str = "",
  header = "",
  graphImg;
 
 
 header = '\uFEFF<h2 style="text-align:center;">Google</h2>';
 
 str = '<table border="1">'
  +'<tr><td style="text-align:center" colspan="6">Yahoo</td></tr>'
   +'<tr><td style="font-weight:bold" colspan="6">(2017.03.20)</td></tr>'
  +'<thead>'
  +'    <tr style="background-color:#788496; color: #ffffff">'
  +'      <th scope="col" rowspan="2">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th scope="col">'
  +'        <div class="tar">Yahoo(2017-01)</div>'
  +'      </th>'
  +'      <th scope="col" colspan="2">'
  +'        <div class="tar">Yahoo(2016-12)</div>'
  +'      </th>'
  +'      <th scope="col" colspan="2">'
  +'        <div class="tar">Yahoo(2016-12)</div>'
  +'      </th>'
  +'    </tr>'
  +'    <tr style="background-color:#788496; color: #ffffff">'
  +'      <th height="40" align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'      <th align="right">'
  +'        <div>Yahoo</div>'
  +'      </th>'
  +'    </tr>'
  +'</thead>'
  +'  <tbody>'
    
    +'    <tr style="text-align: right">'
    +'      <td style="padding:0 20px 0 0">'
    +'        <div>NAME</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210%</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210</div>'
    +'      </td>'
    +'      <td style="width: 150px;">'
    +'        <div>311,210%</div>'
    +'      </td>'
    +'    </tr>';
   +'  </tbody>'
    +'</table>';
        
  return header + str;
}


function doExcel1 () {
 var blob,
  template = prepareTable();

 blob = new Blob([template], {
     type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
 });
 
 saveAs(blob, "test.xls");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

<a href="javascript:" class="btn_style1 excel" onclick="doExcel1()"><span>Excel</span></a>


第二个代码片段发送一个包含HTML表格的HTML文件以供下载。 - oxygen

3

根据你的代码,你使用了data:application/vnd.ms-excel。你可以像这样做。

JS函数

  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>

链接到JSFiddle


1
这是一个非常被低估的回答。谢谢。 - Ikechukwu

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接