excel-gen导出table到excel文件

最新推荐文章于 2021-10-20 10:51:25 发布

djk8888

最新推荐文章于 2021-10-20 10:51:25 发布

阅读量941

点赞数

分类专栏： JS代码文章标签： ajax jquery javascript

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

版权

JS代码专栏收录该内容

76 篇文章 1 订阅

订阅专栏

直接上代码:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>将表格转换为EXCEL</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
    <!--引用以下js文件-->
    <script src="js/excel-gen/jquery.min.js"></script>
    <script src="js/excel-gen/jszip.min.js"></script>
    <script src="js/excel-gen/FileSaver.js"></script>
    <script src="js/excel-gen/excel-gen.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);//差不多意思意思得了
            }
        }
        //导出excel
        $(function () {
            $("#generate-excel").click(function () {       
                excel = new ExcelGen({
                    "src_id": "test_table",
                    "show_header": true
                });
                excel.generate();
            });
        });    
    </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">
                    将表格转换为Excel
                </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>

excel-gen.js文件及本文demo下载: https://download.csdn.net/download/djk8888/33439771

djk8888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
excel-gen导出table到excel文件

直接上代码:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>将表格转换为EXCEL</title> <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css"> <!
复制链接

扫一扫