jquery實現表格導出Excel

使用jQuery，jszip.js，FileSaver.js,excel-gen.js插件直接將網頁中的table表格導出到本地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();
    });
});

 

本例源碼下載