如何使用新的页脚导出数据属性

Question

因为大多数Footables功能都是通过属性添加的，所以我尝试过:在开始的table标记中添加data-export和所有其他的footable data属性，但是不能使用sem来获得任何导出功能。由于文档甚至没有提到如何使用这个功能，有人能解释一下吗?？

这是我的jquery；

$('#clicker').on('click', function()
{
    var csv = FooTable.get("#tblBalanceOverview").toCSV(true);
    $("#showcsv").text(csv);    
});

注意: clicker是在同一页面上定义的页脚之上的一个元素，'showcsv‘是一个空的段落元素，这样我就可以看到是否产生了任何东西。

Answer 1

javascript变量csv将包含结果行。现在，您需要做的就是创建一个下载文件:这是footable table容器：

<div class="container">
  <table id="table-edit" class="table-hover table table-striped">
  </table>
</div> <!-- /container -->

这是excel导出按钮：

<button class="btn btn-warning excelexport btn-md" type="button">export</button>

这是通过单击按钮导出触发器的javascript函数：

$(".excelexport").on("click", function (e) {
    var csv = FooTable.get('#table-edit').toCSV(true);
    /*  console.log ("csv: " + csv);*/
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'SDTB_DM_010_LICENSES_DONGLES_ACT.csv';
    hiddenElement.click();
}); 

Answer 2

即使是下面的代码也能正常工作。

参考：https://github.com/fooplugins/FooTable/issues/634#issuecomment-404630961

/* ############ export table footable to excel ############ */
/* bind the button "excel Export" to load the rows */
    $(".excelexport").on("click", function (e) {
    var filename = "filename.csv";
    var csv = FooTable.get('#table-footable').toCSV();
    var blob = new Blob([ csv ], {
        type : "application/csv;charset=utf-8;"
    });
    if (window.navigator.msSaveBlob) {
        // FOR IE BROWSER
        navigator.msSaveBlob(blob, filename);
    } else {
        // FOR OTHER BROWSERS
        var link = document.createElement("a");
        var csvUrl = URL.createObjectURL(blob);
        link.href = csvUrl;
        link.style = "visibility:hidden";
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
});