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

  • 相关阅读:
    成功率最高的发送邮件代码
    更改ReSharper的智能提示
    [转]SQL 2000 Insert返回自动编号id三种方法比较
    得到汉字的拼音首字母
    不能正确显示UltraWebGrid的解决方法.
    [转]asp.net使用json
    [转] 技术是一种加速器 但重要的不是技术
    [原]模仿Google首页的PNG动画效果
    一个通过DataSet操作XML的类
    C# partial 关键字详解
  • 原文地址:https://www.cnblogs.com/dreamboy/p/11730365.html
Copyright © 2011-2022 走看看