knockout.js 如何将HTML表格导出到Chrome和IE支持的Excel？

cs7cruho 于 2022-11-10 发布在其他

关注(0)|答案(2)|浏览(149)

在我的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或 AJAX 和Web API将HTML表格导出到Chrome和IE支持的Excel中？

有什么建议吗？

knockout.js

来源：https://stackoverflow.com/questions/36040942/how-to-export-a-html-table-to-excel-supported-by-chrome-and-ie

2条答案

按热度按时间

ekqde3dh1#

我使用eligrey.filesaver，然后将其用作
（二进制大对象，文件名）;
根据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);
}

赞(0）回复(0）举报 2022-11-10

xxls0lw82#

嗯，我真的不知道你的问题是什么。看代码，似乎一切都很好。无论如何，在这里我给你一个简单的实现，我使用，这可以帮助你。使用相同的逻辑。也许我检查第一个IE版本，这就是为什么它的工作。
这个示例有一个简单的链接，它执行 fnExcelReport 函数，传递表名和excel名。我首先克隆，因为我的敲除代码在查看/编辑模式之间切换输入。如果没有这个问题，你可以删除克隆和$（elem）.remove（）。

编辑：此版本现在实现了Chrome的下载，但html中没有<a>标记

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);
    }
}

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何将HTML表格导出到Chrome和IE支持的Excel？

2条答案

相关问题

热门标签

最新问答