使用 jquery 将 html 表转换为 excel答案

【问题标题】：html table to excel using jquery使用 jquery 将 html 表转换为 excel
【发布时间】：2012-07-03 07:30:45
【问题描述】：

我有这个可以工作的 jquery 函数，除了我需要添加一些东西。我在表格上有一个过滤器设置来隐藏列。当我隐藏列并单击导出时，它无论如何都会使用所有字段。如何只导出未隐藏的表列？

var write_to_excel = (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))
        }
})()

我想我需要类似的东西。

if($(table).display.style!="none")

提前致谢。

【问题讨论】：

您必须遍历表格的行并导出每个单元格的 HTML，具体取决于单元格的列是否可见。

标签： jquery excel hidden cells

【解决方案1】：

最简单的方法是在将表传递给格式函数之前从表中删除列。由于您无论如何都要丢弃页面以导航到数据 URI，因此保留隐藏的列并不重要。

删除隐藏列的方式取决于首先如何隐藏这些列。如果只是对隐藏的 TD 应用 display:none，则可以通过对代码进行此更改来实现。

    return function(table, name) {
        if (!table.nodeType)
            table = document.getElementById(table);

        $(table).find(':not(:visible)').remove();

        var ctx = {
            worksheet: name || 'Worksheet',
            table: table.innerHTML
        };

        window.location.href = uri + base64(format(template, ctx));
    };

【讨论】：

【解决方案2】：

或者您可以使用简单的 jQuery 将表格中的内容导出为 Excel 格式，使用 window.open() 方法。这也将以更简单的方式解决 display:none 问题:)

window.open(MIMEtype,replace);

MIMEtype：可选。您正在写入的文档类型。默认值为“text/html”。

替换：可选。如果设置，新文档的历史条目会继承打开此文档的文档的历史条目。

下面的 jQuery 代码会将表格数据导出到 Excel。

$("#btnExport").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
    e.preventDefault();
});

如果您的表格 HTML 包含特殊字符，则在将 html 发送到 excel 之前，必须对其进行编码。

$("#btnExport").click(function(e) {
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html()));
    e.preventDefault();
});

jsFiddle 示例 - http://jsfiddle.net/jquerybyexample/xhYcD/

【讨论】：

在我的情况下，结果中的所有空格都神奇地消失了。你有类似的问题吗？

【解决方案3】：

$("#btnExport").click(function(e) {

  window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#export').html()));

});

【讨论】：