如何将HTML表格导出到Chrome和IE支持的Excel？ [英] How to export a HTML table to Excel supported by Chrome and IE?
问题描述
在我的MVC项目中，我有一个与Knockout绑定的HTML表。
On my MVC project I have a HTML table bound with Knockout.
我正在尝试将表导出到Excel。
I'm trying to Export the table to Excel.
我在客户端尝试使用JavaScript：
I tried on client side with 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。
But both codes work in Chrome but not in IE.
我想在客户端使用JavaScript或jQuery进行此操作但如果没有两种浏览器都支持的解决方案，我也可以在服务器中执行此操作支持我的Web API的AJAX Post Request。
I would like to do it on client side using JavaScript or jQuery but if there is not a solution that is supported by both browsers I can also do it in server side with an AJAX Post Request to my Web API.
如何使用JavaScript / jQuery OR AJAX将Chrome表格导出到Chrome和IE支持的Excel表格Web API？
有什么建议吗？
推荐答案
我使用 eligrey.filesaver
然后使用它是
I use the eligrey.filesaver then just use its as
window.saveAs（blob，filename）;
window.saveAs(blob,filename);
根据jparaya的回答我创建了一个小样本在 plunker ，用filesaver保存文件
除了保存部分外，它与jparaya的代码相同：
based on jparaya's answer I created a litle sample in plunker, to save the file with filesaver It does the same as jparaya's code except for the saving part:
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);
}
这篇关于如何将HTML表格导出到Chrome和IE支持的Excel？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
