在 excel 中導出 html 表

Question

我試圖將 html 表導出到 excel tbl1 和 ProductDay1 表中的 tbl5 和 ProductDay2 表中的 tbl2。在我的示例中，我只能在 ProductDay1 中獲取 tabl1，但我需要在 ProductDay1 中的 Fiddle tbl1 和 ProductDay2 中的 tbl2下載 excel小提琴示例

 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); } })();

 <button onclick="tablesToExcel(['tbl1','tbl2'], ['ProductDay1','ProductDay2'], 'TestBook.xls', 'Excel')">Export to Excel</button> <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="tbl5" 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>

Answer 1

問題是您在循環到另一個之前創建工作表：

正是在這里：

ctx = {rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i};
worksheetsXML += format(tmplWorksheetXML, ctx);
rowsXML = "";

此代碼工作正常，但是您的rowsXML已經保存，並且您確實移到了另一張工作表。

您可以做的是更改循環方法，或者將行和 nameWS 存儲在字典中，等待循環的 and，您可以調用上述行。

為了更好地理解我的意思，您可以將代碼更改為：

  ctx = {rows: rowsXML + rowsXML, nameWS: wsnames[i] || 'Sheet' + i};

然后你會看到同一張表在每張表中重復。 因此，您需要做的全部工作是在循環到其他表或工作表之前用同一工作表中的所有表填充 rowsXML。

編輯：

首先讓我們說這里的演示文稿：

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

對您的情況沒有幫助。 也許如果是這樣的話：

 <button  onclick="tablesToExcel( [{ 'sheet': 'firstsheet','tables' : ['tbl1','tbl2']},{ 'sheet': 'secondsheet','tables' : ['tbl5']}], 'TestBook.xls', 'Excel')">Export to Excel</button>

因為在這種情況下，您首先要設置工作表。

編輯：這是你的工作代碼小提琴： http://jsfiddle.net/ad2mejco/

html：

 <button  onclick="tablesToExcel( [{ 'sheet': 'firstsheet','tables' : ['tbl1','tbl2']},{ 'sheet': 'secondsheet','tables' : ['tbl5']}], 'TestBook.xls', 'Excel')">Export to Excel</button>

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(data, wbname, appname) {
      var ctx = "";
      var workbookXML = "";
      var worksheetsXML = "";
      var rowsXML = "";
     
     for (var x = 0; x < data.length; x++) {
     console.log(data[x]["sheet"]);
     
    tables = data[x]["tables"];
     
        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: data[x]["sheet"] || '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);
    }
  })();