JS前端实现表格下载的方法

最新推荐文章于 2024-07-25 11:31:28 发布

ccivy

最新推荐文章于 2024-07-25 11:31:28 发布

阅读量4.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ccivy/article/details/52119178

版权

这篇博客介绍了一种方法，通过监听点击事件触发JS函数，将DataTable的表格内容转换为CSV格式。首先获取表格的头部和主体数据，然后逐个处理th和td元素，整理成CSV字符串。最后，定义了一个row2csv函数来处理符合CSV格式的行数据。

摘要由CSDN通过智能技术生成

JS实现前端下载的方法很简单，JS本身支持对浏览器对象模型的各种方法，下载过程分为两步：1.处理数据，将下载数据转成string的形式；2.将要下载的数据传输给JS浏览器window的当前页面的url，并设置好文件格式和编码格式即可。

$("#download").on("click", function() {

        var csv = table2csv(oTable);
        window.location.href = 'data:text/csv;charset=UTF-8,\ufeff'
            + encodeURIComponent(csv);

});

// 此处是对DataTable的oTable进行处理，从oTable中读取th、tr、td的数据，整理成str格式

function table2csv(dTable) {
    var csv = [];
    var tmpRow = [];
    var header = dTable.table().header();
    $(header).find('th').each(function() {
        tmpRow[tmpRow.length] = formatData($(this).html());
    });
    csv[csv.length] = row2csv(tmpRow);

    var rows = dTable.rows().nodes();
    for (var i = 0; i < rows