如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel？答案

【问题标题】：How to export a HTML table to Excel supported by Chrome and IE?如何将 HTML 表格导出到 Chrome 和 IE 支持的 Excel？
【发布时间】：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 - stackoverflow.com/questions/20830309/…）。使用FileStreamResult 的原因是它指示浏览器如何处理文件（即显示内联或根据浏览器和最终用户选项提供下载提示）。即做你需要的一切。因此，您的 WebAPI 可能会自己生成 excel-xml，但无法告诉浏览器如何处理它。你需要content-disposition 和所有其他东西（上面的 ActionResult 为你做了）。

标签： javascript jquery asp.net-mvc knockout.js export-to-excel

【解决方案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 上下载。