[转]HTML_TABLE_纯jQuery导出Excel

[转]HTML_TABLE_纯jQuery导出Excel_已测试可用

news/2024/7/10 23:49:43 标签: jquery, html, css

htmledit_views">

源码下载地址：https://download.csdn.net/download/djk8888/12921186

将TABLE导出EXCEL:

html"><!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery网页表格导出Excel文件</title>
    <script type="text/javascript" src="external/FileSaver.js"></script>
    <script type="text/javascript" src="scripts/html" title=jquery>jquery-1.10.2.js"></script>
    <script type="text/javascript" src="scripts/jszip.min.js"></script>
    <script type="text/javascript" src="scripts/excel-gen.js"></script>

</head>
<body>

    <button type="button" class="btn btn-success btn-block" id="generate-excel"><i class="fa fa-file-excel-o" aria-hidden="true"></i> 将表格转换为Excel</button>
    <br />
    <table border="1"  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>
            <tr>
                <td>
                    <span>3</span>
                </td>
                <td>
                    <span>O'Neill, Jim </span>
                </td>
                <td>
                    <span>Philmont</span>
                </td>
                <td>
                    <span>NY</span>
                </td>
                <td>
                    <span>Eastern</span>
                </td>
                <td>
                    <span>Northern Region</span>
                </td>
                <td>
                    <span>192</span>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        //将table导出excel
        $(function () {
            excel = new ExcelGen({
                "src_id": "test_table",	//要导出的table的id
                "show_header": true		//同时导出表头
            });
            //导出excel按钮click事件：
            $("#generate-excel").click(function () {
                excel.generate();
            });
        });
    </script>

</body>
</html>

首先引用如下js文件:

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

或者在线引用：

html"><script src="http://www.jq22.com/html" title=jquery>jquery/html" title=jquery>jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jszip/3.1.5/jszip.min.js"></script>
<script type="text/javascript" src="external/FileSaver.js"></script>
<script type="text/javascript" src="scripts/excel-gen.js"></script>

实现导出Excel的js方法：

html">    <script>
        //将table导出excel
        $(function () {
            excel = new ExcelGen({
                "src_id": "test_table",	//要导出的table的id
                "show_header": true		//同时导出表头
            });
            //导出excel按钮click事件：
            $("#generate-excel").click(function () {
                excel.generate();//导出Excel
            });
        });
    </script>

修改导出的文件名，编辑 scripts\excel-gen.js 文件：

找到： saveAs(content, "example.xlsx"); 这一行

修改为：saveAs(content, new Date().getTime() + ".xlsx"); //以时间戳作为文件名

或者其他你想要的文件名都行

参考于: https://www.jq22.com/html" title=jquery>jquery-info19771