2014-10-10 72 views
4

假設我有3個表格。我想插入在3個工作表(每頁一個表)表到一個Excel文件(不需要的ActiveXObject的)使用javascript將工作表添加到Excel文件中

enter image description here

我嘗試下面的代碼,但其只創建一個工作表

var tableToExcel = (function() { 
    var uri = 'data:application/vnd.ms-excel;base64,', 
     template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table><table>{table}</table></body></html>', 
     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 (table, name) { 
     if (!table.nodeType) table = document.getElementById(table) 
     var ctx = { 
      worksheet: name || 'Worksheet', 
      table: table.innerHTML 
     } 
     window.location.href = uri + base64(format(template, ctx)) 
    } 
})(); 
+0

不能使用多張這種做法。 – 2014-10-10 16:38:57

+0

感謝您的回覆。是否有任何想法添加表,因爲它對我的迫切要求。我需要這種情況下的任何解決方案 – 2014-10-11 02:58:18

回答

6

您顯示的方法使用Spreadsheet XML和HTML的混合。使用這種混合物不可能填充多個工作表。爲此,我們必須僅使用Spreadsheet XML。這是因爲只有XML可以描述多個工作表。 HTML表格數據與除活動工作表之外的任何工作表無關。

僅使用Spreadsheet XML是可能的,但是我們必須仔細處理數據類型。如果Excel導入HTML,它會嘗試檢測數據類型,就好像用戶手動將值輸入單元格一樣。對於XML而言並非如此。它從XML獲取給定的數據類型。如果它們不合適,則會產生錯誤。所以在我的例子中,我使用「數據 - 」屬性來描述數據類型,數據樣式和數據值。所以在HTML表格單元(TD)中可能有不同於數據表示的數據值。由於HTML是數據表示的格式,而不是數據交換,所以在我看來,這也是一種很好的做法。

電子表格XML見:http://msdn.microsoft.com/en-us/library/aa140066.aspx

的示例使用數據URI的下載鏈接,所以它僅適用於支持該瀏覽器。它不適用於Microsoft Internet Explorer。

例子:

<script type="text/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 = (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); 
    } 
    })(); 
</script> 

<table id="tbl1"> 
    <tr> 
    <td>Name</td> 
    <td>Birthday</td> 
    <td>Amount</td> 
    <td>Rebate (10%)</td> 
    </tr> 
    <tr> 
    <td>Smith</td> 
    <td data-type="DateTime" data-style="Date" data-value="1980-03-23">Mar 23 1980</td> 
    <td data-type="Number" data-style="Currency" data-value="1234.56">$ 1,234.56</td> 
    <td data-formula="=RC[-1]/10" data-type="Number" data-style="Currency">$ 123.45</td> 
    </tr> 
    <tr> 
    <td>Doe</td> 
    <td data-type="DateTime" data-style="Date" data-value="1978-11-05">Nov 05 1978</td> 
    <td data-type="Number" data-style="Currency" data-value="2345.67">$ 2,345.67</td> 
    <td data-formula="=RC[-1]/10" data-type="Number" data-style="Currency">$ 234.56</td> 
    </tr> 
</table> 
<hr> 
<table id="tbl2"> 
    <tr> 
    <td>Product</td> 
    <td>Price</td> 
    <td>Available</td> 
    <td>Count</td> 
    </tr> 
    <tr> 
    <td>Bred</td> 
    <td data-type="Number" data-style="Currency" data-value="1.89">$ 1.89</td> 
    <td data-type="Boolean" data-value="1">yes</td> 
    <td data-type="Number" data-value="123">123</td> 
    </tr> 
    <tr> 
    <td>Butter</td> 
    <td data-type="Number" data-style="Currency" data-value=".89">$ .89</td> 
    <td data-type="Boolean" data-value="0">no</td> 
    <td data-type="Number" data-value="0">0</td> 
    </tr> 
</table> 


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

小提琴:http://jsfiddle.net/qxLn3h86/

問候

阿克塞爾

+0

我將這個相同的代碼複製到一個xhtml(JSF 2.2)中,我得到下一個錯誤「處理指令目標匹配」[xX] [mM] [lL]「是不允許的。我在網上查看,但我沒有找到解決方案。如果有人能幫助我,我將不勝感激 – 2015-10-27 01:07:26

+0

這個腳本純粹是JavaScript,必須在瀏覽器中運行。 JSFiddle適用於Firefox瀏覽器。不知道你在用JSF 2.2做什麼。 – 2015-10-27 06:25:08

+0

雖然它工作正常,但它無法檢測到colspan和rowspans – 2017-12-29 06:53:32

相關問題