如何将 HTML table 导出到 Chrome 和 IE 支持的 Excel?
How to export a HTML table to Excel supported by Chrome and IE?
在我的 MVC 项目中,我有一个 HTML table 与 Knockout 绑定。
我正在尝试将 table 导出到 Excel。
我在客户端尝试 JavaScript:
self.exportToExcel = function () {
javascript: window.open('data:application/vnd.ms-excel,' + $("#tableToprint").innerHTML());
}
或:
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 Post 请求到我的网站 API.
如何使用 JavaScript/jQuery 或 [=37] 将 HTML table 导出到 Chrome 和 IE 支持的 Excel =] 和网站 API?
有什么建议吗?
我用eligrey.filesaver
然后将其用作
window.saveAs(blob,文件名);
根据 jparaya 的回答,我在 plunker 中创建了一个小示例,以使用文件保护程序保存文件
除了保存部分外,它与 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);
}
嗯,我不太确定你的问题是什么。查看代码,似乎一切都很好。无论如何,在这里我向您发送一个我使用的简单实现,它可以帮助您。使用相同的逻辑。也许我检查了第一个 IE 版本,这就是它起作用的原因。
此示例有一个简单的 link,它执行 fnExcelReport 函数,传递 table 名称和 excel 名称。我先克隆,因为我的敲除代码在 view/edit 模式与输入之间切换。如果你没有那个问题,你可以删除克隆和 $(elem).remove()。
编辑:此版本现在在 html
中不带 <a>
标签实现 Chrome 的下载
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);
}
}
在我的 MVC 项目中,我有一个 HTML table 与 Knockout 绑定。
我正在尝试将 table 导出到 Excel。
我在客户端尝试 JavaScript:
self.exportToExcel = function () {
javascript: window.open('data:application/vnd.ms-excel,' + $("#tableToprint").innerHTML());
}
或:
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 Post 请求到我的网站 API.
如何使用 JavaScript/jQuery 或 [=37] 将 HTML table 导出到 Chrome 和 IE 支持的 Excel =] 和网站 API?
有什么建议吗?
我用eligrey.filesaver 然后将其用作
window.saveAs(blob,文件名);
根据 jparaya 的回答,我在 plunker 中创建了一个小示例,以使用文件保护程序保存文件 除了保存部分外,它与 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);
}
嗯,我不太确定你的问题是什么。查看代码,似乎一切都很好。无论如何,在这里我向您发送一个我使用的简单实现,它可以帮助您。使用相同的逻辑。也许我检查了第一个 IE 版本,这就是它起作用的原因。
此示例有一个简单的 link,它执行 fnExcelReport 函数,传递 table 名称和 excel 名称。我先克隆,因为我的敲除代码在 view/edit 模式与输入之间切换。如果你没有那个问题,你可以删除克隆和 $(elem).remove()。
编辑:此版本现在在 html
中不带<a>
标签实现 Chrome 的下载
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);
}
}