如何将 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 中没有 &lt;a&gt; 标签的 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?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用网格将 HTML 表格导出到 Excel

在 HTML 文件中导出 PHP 表

如何在Firefox中导入chrome的书签?

002.谷歌浏览器Chrome如何导出或导入书签

chrome谷歌浏览器如何导入或导出书签

怎样在Chrome浏览器中,直接让表格中的数据以Excel文件形式导出?