手记

javascript系列:tableExport导出 excel报表

  1. js的引用

jquery-3.3.1.min.js、tableExport.js、base64.js

 网上找js很麻烦,这有链接  

tableExport.js :  https://github.com/hhurz/tableExport.jquery.plugin 

base64.js  :https://github.com/davidchambers/Base64.js

2.要导出的数据(页面展示样式)

3.代码实例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    html,body{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
    }
    #tables{
        width: 100%;
        text-align: center;
        border: 1px #000 solid;
        border-collapse: collapse;
    }
    #tables th,#tables td{
        border: 1px solid #000000;
    }
    #tables th{
        font-size: 14px;
        font-weight: bolder;
    }
</style>
<body>
<table id="tables">
    <thead>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>地址</th>
    </thead>
    <tbody>
    <tr>
        <td>素小暖</td>
        <td>女</td>
        <td>23</td>
        <td>辽宁省大连市</td>
    </tr>
    <tr>
        <td>素小暖</td>
        <td>男</td>
        <td>21</td>
        <td>大窑沟</td>
    </tr>
    </tbody>
</table>
<input type="button" id="export" value="导出"/>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/tableExport.js"></script>
<script type="text/javascript" src="js/base64.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#export").click(function(){
            $("#tables").tableExport({type:"excel",escape:"false"});
        });
    });
</script>
</html>


1人推荐
随时随地看视频
慕课网APP