javascript - 使用 jQuery 将表格数据导出到 excel

标签 javascript jquery html 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))
  }
})()

这是我的提交按钮:

<td><input type="button" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"></td>

我遇到的问题是我的一些输入是下拉菜单和输入,但它们在构建 excel 文件时被隐藏了。因此,当 excel 文件首次构建时,您将看到所有数据,并在 2 秒内所有具有隐藏下拉菜单和输入的数据变为空白并呈现 html。

图1:

Fields with inputs dissapear

图2:

hidden elements

我正在尝试使用 textExtraction,但它对我不起作用。

$('#project_table').tablesorter({
        textExtraction: myTextExtraction
    });

    //todo: try getting the dataTable to work...
    //  it might be way better, just not sure how it would handle
    //  adding unrelated rows on the fly (comments)
    //$('#project_table').dataTable();

var myTextExtraction = function(node)  
{
    var elem = $(node);
    var theVal = null;

    if (elem.hasClass('edit')) {
        elem.children().each(function() {
            if ($(this).css('display') != 'none') {
                if ($(this).is('span')) {
                    theVal = $(this).text();
                } else { //all other element types (input, select, etc)
                    theVal = $(this).val();
                }
            }
        });

    } else {
        theVal = elem.text();
    }

    //console.log(theVal);


    var c = node.childNodes.length;

    if (c == 1) {
        theVal = node.innerHTML.trim();
    } else if (c == 5) {
        theVal = node.childNodes[3].innerHTML.trim();
    }

    //console.log(theVal);
    return theVal;

} 

谁能帮帮我,谢谢。

此外,如果有人知道 IE8 修复程序,它似乎只适用于 chrome 和 FF。

最佳答案

我建议使用管理排序、搜索、ajax、导出等的 DataTables jQuery 插件。 参见 http://datatables.net

关于javascript - 使用 jQuery 将表格数据导出到 excel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19824087/

相关文章:

javascript - 从父级 Angular 数据创建可编辑的子级

javascript - 如何在javascript中循环遍历图像数组

javascript - 如何使模型方法在蓝图api中显示

javascript - 从背景定位元素

html - :has() in jQuery to target the parent table having nested table 的相反是什么

javascript - 在不刷新页面的情况下重新加载图像

javascript/jquery : focus() not working

html - 如何使 div 向相反方向倾斜?

javascript - jquery - 附加/分离多个div onclick

javascript - 如何在我的博客页面上一个接一个地播放随机音乐轨道?