zoukankan      html  css  js  c++  java
  • jquery实现表格导出Excel

    使用jQuery,jszip.js,FileSaver.js,excel-gen.js插件直接将网页中的table表格导出到本地Excel文件,而不需要经过后台。

    JQuery导出Excel

    导出结果:

    实现步骤:

    1.进入相关js插件

    <script src="external/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="external/jszip.min.js"></script>
    <script type="text/javascript" src="external/FileSaver.js"></script>
    <script type="text/javascript" src="scripts/excel-gen.js"></script>
    <script type="text/javascript" src="scripts/demo.page.js"></script>

    2. 将HTML的table标签的id设置为test_table

    <table class="table table-bordered table-striped" id="test_table">
        <thead>
            <tr>
                <td>等级</td>
                <td>姓名</td>
                <td>城市</td>
                <td></td>
                <td>部门</td>
                <td>选取</td>
                <td>票数</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span>1</span>
                </td>
                <td>
                    <span>Small, Steve </span>
                </td>
                <td>
                    <span>New York</span>
                </td>
                <td>
                    <span>NY</span>
                </td>
                <td>
                    <span>Eastern</span>
                </td>
                <td>
                    <span>Metropolitan Region</span>
                </td>
                <td>
                    <span>378</span>
                </td>
            </tr>
            <tr>
                <td>
                    <span>2</span>
                </td>
                <td>
                    <span>Novello, Rodolfo </span>
                </td>
                <td>
                    <span>Lawrence</span>
                </td>
                <td>
                    <span>NY</span>
                </td>
                <td>
                    <span>Eastern</span>
                </td>
                <td>
                    <span>Long Island Region</span>
                </td>
                <td>
                    <span>223</span>
                </td>
            </tr>
     
             </tbody>
    </table>

    3.给按钮注册单击事件,导出Excel

    $(document).ready(function () {
        excel = new ExcelGen({
            "src_id": "test_table",
            "show_header": true
        });
        $("#generate-excel").click(function () {
            excel.generate();
        });
    });

    本例源码下载:

    链接:https://pan.baidu.com/s/13sAXqB3cwu7h-jdOiTnkHQ
    提取码:2bbn

  • 相关阅读:
    Linux普通用户登录后,命令行提示:-bash-4.1$ ,原因分析及解决
    ps命令
    Linux命令ping
    Linux 系统管理 : last 命令详解
    Linux命令head
    Linux more与less命令
    Mac下开启Chrome非安全模式
    mac host 修改
    mac 电脑记
    a的样式顺序
  • 原文地址:https://www.cnblogs.com/dreamboy/p/11730365.html
Copyright © 2011-2022 走看看