首頁手記 javascript系列：tableExport導出...

javascript系列：tableExport導出 excel報表

標簽：

JavaScript

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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/tableExport.js"></script>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/base64.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#export").click(function(){
            $("#tables").tableExport({type:"excel",escape:"false"});
        });
    });
</script>
</html>

點擊查看更多內容