在Firefox浏览器中使用JavaScript将动态HTML表格导出到Excel

Question

在Firefox浏览器中使用JavaScript将动态HTML表格导出到Excel

javascriptexcelfirefox

22

想要在 JavaScript 中将动态的 HTML 表格导出为 Excel，有没有不使用代码中的 ActiveX 对象，在 Firefox 浏览器中完成的方法。请帮帮我。

- Siddharth

Java 如何参与其中？ - Thomas

Jsp代码包含一个名为“导出到Excel”的按钮，当点击该按钮时，网格中的动态表将以带有CSS样式的Excel格式生成。此按钮代码与JavaScript连接。 - Siddharth

4个回答

12

您可以动态生成SpreadsheetDataXML格式的Excel文件，这使得您可以使用HTML语法自定义表格、单元格样式和格式。

为了在IE中实现此功能，您需要使用Blob对象，然后调用msSaveBlob方法。对于FF和Chrome，您只需要将href的数据更改为data：application / vnd.ms-excel即可。

function fnExcelReport() {
    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'>";
    tab_text = tab_text + $('#myTable').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 ");

    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, 'Test file.xls');
        }
    } else {
        $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text));
        $('#test').attr('download', 'Test file.xls');
    }
}

工作示例：http://jsfiddle.net/h42y4ke2/21/ YT教程：https://www.youtube.com/watch?v=gx_yGY6NHkc

- Tan Piyapat

我们能否以“xlsx”的扩展名相同的方式下载文件？ - Kavya Shree

0

据我所知，JavaScript 没有用于创建真正的 Excel 文件的库，但您可以尝试将 HTML 表格导出为带有 .xls 扩展名的文件。

- Thomas

@Siddharth，请看一下如何使用JavaScript编写文件，然后只需迭代表示表格的DOM部分并将相应的HTML写入文件。请注意，您还需要添加<html><body>头和相应的页脚。 - Thomas

0

Firefox有一个扩展table2clipboard。您还可以手动从DOM树生成CSV输出，并让用户将其保存为CSV文件。Excel可以从CSV导入。

- Michał Šrajer

我有一个“导出到Excel”的按钮，当点击它时，会生成一个动态的HTML表格并导出到Excel中。请问你能帮忙吗？ - Siddharth

在纯JavaScript中，您可以使用Data URI方案生成CSV文件。但这种方法有几个限制。另一个选择是将数据发送回服务器，然后让服务器构建CSV文件并提供服务。 - Michał Šrajer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonny Buchanan · Accepted Answer

这里是一个函数，使用JavaScript在Firefox中实现此功能，假设用户在其计算机上安装了Excel：

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>{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}
    window.location.href = uri + base64(format(template, ctx))
  }
})()

jsFiddle现场示例：

http://jsfiddle.net/insin/cmewv/