用 tableExport.min.js 导出Excel

最新推荐文章于 2024-05-14 09:49:39 发布

djk8888

最新推荐文章于 2024-05-14 09:49:39 发布

阅读量1.5k

点赞数 1

分类专栏： JS代码 html 文章标签： javascript jquery 前端

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

版权

html 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

tableExport.min.js 下载及安装

下载地址: GitHub - hhurz/tableExport.jquery.plugin: jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF

安装方法(这里只考虑导出Excel):

    <!--引用以下js文件-->
    <script src="js/jquery.min.js"></script>
    <!--要将生成的导出文件保存在客户端，请将其包含在html代码中:-->
    <script src="libs/FileSaver/FileSaver.min.js"></script>
    <!--要以XLSX (Excel 2007+ XML格式)格式导出表格，您需要额外包括SheetJS/js-xlsx:-->
    <script src="libs/js-xlsx/xlsx.core.min.js"></script>
    <!--不管期望的格式是什么，最后包括:-->
    <script src="libs/tableExport.min.js"></script>

使用方法:

 $('#test_table').tableExport({ type: 'excel' });

完整例子:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>tableExport</title>
    <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet" type="text/css">
    <!--引用以下js文件-->
    <script src="js/jquery.min.js"></script>
    <!--要将生成的导出文件保存在客户端，请将其包含在html代码中:-->
    <script src="libs/FileSaver/FileSaver.min.js"></script>
    <!--要以XLSX (Excel 2007+ XML格式)格式导出表格，您需要额外包括SheetJS/js-xlsx:-->
    <script src="libs/js-xlsx/xlsx.core.min.js"></script>
    <!--不管期望的格式是什么，最后包括:-->
    <script src="libs/tableExport.min.js"></script>

    <script>
        $(function () {
            MakeTb();//初始化表格
        });
        //AJAX动态生成TABLE
        function MakeTb() {
            $("#tbody").empty();
            for (var i = 0; i < 9999; 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 () {
                $('#test_table').tableExport({ type: 'excel' });
            });
        });
    </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 style='background-color:lightskyblue; color:white; text-align:center;'>
                                <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>

本文配套demo下载: https://download.csdn.net/download/djk8888/40513835

djk8888

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
用 tableExport.min.js 导出Excel

tableExport.min.js下载及安装下载地址:https://github.com/hhurz/tableExport.jquery.plugin安装方法(这里只考虑导出Excel):  <script src="js/jquery.min.js"></script>  <script src...
复制链接

扫一扫

专栏目录