网站首页 文章专栏 前台导出execl 和csv文件

前台导出execl 和csv文件

编辑时间:2018-10-30 11:37:44 作者:苹果 浏览量:310





    前言:利用excellentexport.js做到前端导出excel文件或者csv文件


用法:
1.引入 excellentexport.js  (源码:http://static.hebinghua.com/plugin/excellentexport/excellentexport.js)
2.ExcellentExport.excel(this, 'table的绑定id', 'Sheet名');
  ExcellentExport.csv(this, 'table的绑定id'); //默认utf8 

例如:
<html>
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <script src="excellentexport.js"></script>
        <style>
            table,
            tr,
            td {
                border: 1px black solid;
            }
        </style>
    </head>

    <body>
        <h3>Test page</h3>

        <br/>

        <a download="exceldata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">导出excel</a>
        <br/>
        <a download="csvdata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">导出csv</a>
        <br/>
        <br/>

        <table id="datatable">
            <tr>
                <th>字段1</th>
                <th>字段2</th>
                <th>字段3</th>
                <th>字段4</th>
            </tr>
            <tr>
                <td>值1  1</td>
                <td>值1  2</td>
                <td>值1  3</td>
                <td>值1  4</td>
            </tr>
            <tr>
                <td>值2  1</td>
                <td>值2  2</td>
                <td>值2  3</td>
                <td>值2  4</td>
            </tr>
        </table>
    </body>

</html>



    出自:何冰华个人网站

    地址:http://www.hebinghua.com/

    转载请注明出处


来说两句吧
最新评论