如何將HTML表格導出到Chrome和IE支持的Excel中？

在我的MVC項目中，我有一個綁定了Knockout的HTML表格。如何將HTML表格導出到Chrome和IE支持的Excel中？

我想將表格導出到Excel。

我試圖在客戶端使用JavaScript：

self.exportToExcel = function() { 
    javascript: window.open('data:application/vnd.ms-excel,' + $("#tableToprint").innerHTML()); 
}

OR：

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 cellspacing="0" rules="rows" border="1" style="color:Black;background-color:White;border-color:#CCCCCC;border-width:1px;border-style:None;width:100%;border-collapse:collapse;font-size:9pt;text-align:center;">{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 } 
    if (navigator.msSaveBlob) { 
     var blob = new Blob([format(template, ctx)], { type: 'application/vnd.ms-excel', endings: 'native' }); 
     navigator.msSaveBlob(blob, 'export.xlsx') 
    } else { 
     window.location.href = uri + base64(format(template, ctx)) 
    } 
} 
})()

但兩者的代碼在Chrome中工作，但不是在IE瀏覽器。

我想在客戶端使用JavaScript或jQuery做到這一點，但如果沒有兩種瀏覽器支持的解決方案，我也可以在服務器端通過AJAX發佈請求發送到我的Web API。

如何使用JavaScript/jQuery或AJAX和Web API將HTML表格導出到Chrome和IE支持的Excel中？

有什麼建議嗎？

來源

2016-03-16 user3378165

如果你使用MVC，你會更好創建的Excel XML服務器端與一個簡單的'FileStreamResult'動作。然後它是獨立於瀏覽器的，並且不限於瀏覽器地址欄限制。您可以使用OpenXml SDK（或任何包裝器）。 –

感謝您的回覆，我無法通過MVC服務器端來完成，因爲在任何服務器端操作的所有項目中，我都對我的Web API進行了AJAX調用，而我的MVC控制器上沒有代碼。 – user3378165

爲什麼這會阻止您添加新的「ExcelDownloadController」？ –

我使用eligrey.filesaver 然後只使用其作爲

window.saveAs（BLOB，文件名）;

基於jparaya的答案，我在plunker創建了一個痘痘樣品，保存與filesaver 文件它不一樣除了節省部分jparaya代碼：

function fnExcelReport(id, name) { 
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 
    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'; 
    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 
    tab_text = tab_text + "<table border='1px'>"; 
    var exportTable = $('#' + id).clone(); 
    exportTable.find('input').each(function (index, elem) { $(elem).remove(); }); 
    tab_text = tab_text + exportTable.html(); 
    tab_text = tab_text + '</table></body></html>'; 
    var fileName = name + '_' + parseInt(Math.random() * 10000000000) + '.xls'; 

    //Save the file 
    var blob = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) 
    window.saveAs(blob, fileName); 
}

來源

2016-03-17 06:56:15 CodeHacker

感謝您的回覆，我嘗試過但無法使用它什麼是我應該傳入的參數？表ID？這個'blob'參數是什麼？謝謝！！ – user3378165

我編輯了我原來的答案。希望這個更清楚 – CodeHacker

工作！在IE和Chrome中都是這樣！但我有兩個問題：1）有沒有辦法將它保存爲.xlsx文件？如果我手動更改它，文件將被損壞。 2）有沒有辦法擺脫Excel的警告消息（可信源等）？非常感謝！ – user3378165

嗯，我真的不知道你怎麼了。看代碼，似乎一切都很好。無論如何，在這裏我向你發送一個我使用的簡單實現，它可以幫助你。使用相同的邏輯。也許我會檢查第一個IE版本，這就是爲什麼這是有效的。

此示例有一個簡單的鏈接，它執行fnExcelReport函數，傳遞表名稱和excel名稱。我首先克隆，因爲我的淘汰代碼在輸入的查看/編輯模式之間切換。如果你沒有這個問題，你可以刪除克隆和$（elem）.remove（）。

編輯：現在這個版本實現HTML中下載Chrome瀏覽器沒有標籤<a>

function fnExcelReport(id, name) { 
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 
    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'; 
    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 
    tab_text = tab_text + "<table border='1px'>"; 
    var exportTable = $('#' + id).clone(); 
    exportTable.find('input').each(function (index, elem) { $(elem).remove(); }); 
    tab_text = tab_text + exportTable.html(); 
    tab_text = tab_text + '</table></body></html>'; 
    var data_type = 'data:application/vnd.ms-excel'; 
    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    var fileName = name + '_' + parseInt(Math.random() * 10000000000) + '.xls'; 
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 
     if (window.navigator.msSaveBlob) { 
      var blob = new Blob([tab_text], { 
       type: "application/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, fileName); 
     } 
    } else { 
     var blob2 = new Blob([tab_text], { 
      type: "application/csv;charset=utf-8;" 
     }); 
     var filename = fileName; 
      var elem = window.document.createElement('a'); 
      elem.href = window.URL.createObjectURL(blob2); 
      elem.download = filename; 
      document.body.appendChild(elem); 
      elem.click(); 
      document.body.removeChild(elem); 
    } 
}

來源

2016-03-17 10:16:52 jparaya

謝謝！我現在只是試了一下，它在IE中完美運行，但在Chrome中沒有任何想法？謝謝！！ – user3378165

我更新了代碼。現在，您無需在HTML上添加鏈接以在Chrome上下載。 – jparaya

謝謝！它通過問題解決。 –

如何將HTML表格導出到Chrome和IE支持的Excel中？

回答

相關問題