http://www.jqueryfuns.com/resource/2381
-
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.要導出的數據（頁面展示樣式）
![https://img2.sycdn.imooc.com/5b56d6a700011c3618940119.jpg]()
3.代碼實例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<%@ 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>
|
