导出html内容为Excel文件

导出html内容为Excel文件

---

引入库

 <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="dist/jquery-1.12.4.js"><\/script>')</script> 
    <script src="dist/jquery.table2excel.js"></script>

html代码

<header class="jq22-header">
        <h4 style="margin-top: 20px;display: flex; justify-content: center;">
            table2excel-可将HTML表格内容导出到Excel中
        </h4>
</header>
    <section class="jq22-container">
        <div class="container" style="padding:30px 0">
            <div class="row">
                <div class="md-col-8">
                    <div class="table-responsive table2excel">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr class="noExl">
                                    <td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>
                                    <td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>
                                    <td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>
                                </tr>
                                <tr>
                                    <td class="success">这一行会被导出到excel中</td>
                                    <td class="success">这一行会被导出到excel中</td>
                                    <td class="success">这一行会被导出到excel中</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>单元格1-1</td>
                                    <td>单元格1-2</td>
                                    <td>单元格1-3</td>
                                </tr>
                                <tr>
                                    <td>单元格2-1</td>
                                    <td>单元格2-2</td>
                                    <td>单元格2-3</td>
                                </tr>
                                <tr>
                                    <td>单元格3-1</td>
                                    <td>单元格3-2</td>
                                    <td>单元格3-3</td>
                                </tr>
                                <tr>
                                    <td>单元格4-1</td>
                                    <td>单元格4-2</td>
                                    <td>单元格4-3</td>
                                </tr>
                                <tr>
                                    <td>单元格5-1</td>
                                    <td>单元格5-2</td>
                                    <td>单元格5-3</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="3" class="warning">合并3个单元格</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <button id="btn" class="btn btn-primary">导出Excel报表</button>
        </div>
    </section>

js代码

<script>
        $(function () {
            $("#btn").click(function () {
                $(".table2excel").table2excel({
                    exclude: ".noExl",                //不被导出的表格行的CSS class类。
                    name: "商品利润表",                //导出的Excel文档的名称
                    filename: "商品利润表",            //Excel文件的名称
                    fileext:'xls',                    //导出文件后缀，似乎也没什么用，IE保存没有后缀名
                    exclude_img: true,                //是否导出图片
                    exclude_links: true,              //是否导出链接
                    exclude_inputs: true,             //是否导出文本框内容       
                });
            });
        });    
    </script>

效果

借鉴自 https://blog.csdn.net/jesslu/article/details/77866040