如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?
Posted
技术标签:
【中文标题】如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?【英文标题】:How to export a HTML table to Excel supported by Chrome and IE? 【发布时间】:2016-07-02 15:26:52 【问题描述】:在我的 MVC 项目中,我有一个与 Knockout 绑定的 html 表格。
我正在尝试将表格导出到 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 发布请求到我的 Web API 执行此操作。
如何使用 JavaScript/jQuery OR AJAX 和 Web API 将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?
有什么建议吗?
【问题讨论】:
如果您使用 MVC,最好使用简单的FileStreamResult
操作创建 excel xml 服务器端。然后它是独立于浏览器的,不受浏览器地址栏限制。您可以使用 OpenXml SDK(或任何包装器)。
感谢您的回复,我无法通过 MVC 服务器端执行此操作,因为在所有服务器端操作的所有项目中,我对我的 Web API 进行了 AJAX 调用,我没有代码在我的 MVC 控制器上...
为什么这会阻止您添加新的“ExcelDownloadController”?
我宁愿在我的 Web API 上创建这个控制器,但我不知道怎么做,你能指导我吗?
您无法让浏览器通过 AJAX 处理文件保存(也许可以使用 HTML5 - ***.com/questions/20830309/…)。使用FileStreamResult
的原因是它指示浏览器如何处理文件(即显示内联或根据浏览器和最终用户选项提供下载提示)。即做你需要的一切。因此,您的 WebAPI 可能会自己生成 excel-xml,但无法告诉浏览器如何处理它。你需要content-disposition
和所有其他东西(上面的 ActionResult 为你做了)。
【参考方案1】:
我使用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);
【讨论】:
谢谢你的回复,我试过了,但不能让它工作,我应该传入什么参数?表ID?这个“blob”参数是什么?谢谢!! 我编辑了我的原始答案。希望这能让它更清楚 工作!!在 IE 和 Chrome 中!但我有 2 个问题:1)有没有办法将其保存为 .xlsx 文件?如果我手动更改它,文件就会损坏。 2)有没有办法摆脱excel警告消息(受信任的来源等)?非常感谢! 嗯.. 不。我尝试了一些方法,但无法使其正常工作。如果您知道如何操作,请分享 有没有办法避免这个警告“'file.xls'的文件格式和扩展名不匹配。”用这个方法?【参考方案2】:嗯,我不太确定你的问题是什么。查看代码,似乎一切都很好。无论如何,在这里我向您发送一个我使用的简单实现,它可以帮助您。使用相同的逻辑。也许我检查了第一个 IE 版本,这就是它起作用的原因。
这个示例有一个简单的链接,它执行 fnExcelReport 函数,传递表格名称和 Excel 名称。我首先克隆,因为我的淘汰代码在输入的查看/编辑模式之间切换。如果你没有这个问题,你可以删除克隆和 $(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);
【讨论】:
谢谢!我现在刚刚尝试过,它在 IE 中可以完美运行,但在 Chrome 中却不行,知道吗?谢谢!! 我更新了代码。现在您无需在 HTML 上添加链接即可在 Chrome 上下载。以上是关于如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel?的主要内容,如果未能解决你的问题,请参考以下文章