js将表格html-table导出为CSV文件并下载

最新推荐文章于 2023-07-03 09:44:11 发布

djk8888

最新推荐文章于 2023-07-03 09:44:11 发布

阅读量1.3k

点赞数 3

本文链接：https://blog.csdn.net/djk8888/article/details/120848912

版权

html 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

直接上代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>将表格转换为CSV</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            MakeTb();//初始化表格
        });
        //AJAX动态生成TABLE
        function MakeTb() {
            $("#tbody").empty();
            for (var i = 0; i < 99; i++) {
                var html = "";
                html += "<tr>";
                html += "<td><span>" + (i + 1) + "</span></td>";
                html += "<td><span>张三" + (i + 1) + "</span></td>";
                html += "<td><span>男" + (i + 1) + "</span></td>";
                html += "<td><span>江苏省" + (i + 1) + "</span></td>";
                html += "<td><span>南京市" + (i + 1) + "</span></td>";
                html += "<td><span>秦淮区" + (i + 1) + "</span></td>";
                html += "</tr>";
                $("#tbody").append(html);//差不多意思意思得了
            }
        }
        //将表格转换为CSV
        $(function () {
            $("#generate-excel").click(function () {
                tb2csv("test_table");//导出
            });
        });
        //导出csv文件
        function tb2csv(tbId) {
            var $trs = $("#" + tbId).find("tr");//表格id元素
            var str = "";
            for (var i = 0; i < $trs.length; i++) {
                var $tds = $trs.eq(i).find("td,th");
                for (var j = 0; j < $tds.length; j++) {
                    str += $tds.eq(j).text() + ",";
                }
                str += "\n";
            }
            var csv = "data:text/csv;charset=utf-8,\ufeff" + str;
            var link = document.createElement("a");
            link.setAttribute("href", csv);
            link.setAttribute("download", new Date().getTime() + ".csv");//文件名
            link.click();//下载文件
        }
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3" style="padding:2em 0;">
                <button type="button" class="btn btn-success btn-block" id="generate-excel">
                    将表格转换为CSV
                </button>
            </div>
            <div class="col-md-12" style="padding:2em 0;">
                <div class="table-responsive">
                    <table class="table table-bordered" id="test_table">
                        <thead>
                            <tr>
                                <th>编号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>省</th>
                                <th>市</th>
                                <th>区</th>
                            </tr>
                        </thead>
                        <tbody id="tbody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

直接复制以上代码粘贴到*.html文件里运行即可看到效果...