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

  • 相关阅读:
    Primeface datatable celleditor rowedit 例子
    JAVA Assert
    POI 日期类型的显示,日期类型存储为Double,数字类型雷同,为了显示为日期格式。。。
    hibernate3支持中文查询
    VC2010 编写DLL并调用;
    android 数据库例子
    VC2010 OPENCV 配置攻略;生成opencv向导
    VC2012 MFC 项目 mfc100.lib 位置
    QQ自动远程连接 JNA
    EXCEL 中 get.cell 函数的参数
  • 原文地址:https://www.cnblogs.com/dreamboy/p/11730365.html
Copyright © 2011-2022 走看看