jQuery自动分页打印表格(HTMLtable)，可以强制换页
2016-02-25 16:09
701 查看
最近做项目的时候需要做批量打印订单，一个订单可能在最后一页是的内容是不足一页的，这时候下一个订单需要下一页打印，这样就需要强制换页。在下一页再打印下一个订单
部分代码：
部分重要的css是分页的换页的关键：
部分重要的js：
部分HTML代码：
完整代码：
View Code
部分代码：
部分重要的css是分页的换页的关键：
<style type="text/css">
@media print
{
.pageBreak
{
page-break-after: always;
}
.noPrint
{
display: none;
}
}
</style>部分重要的js：
<script type="text/javascript">
(function () {
window.print(); //调起打印窗口(打开打印窗口)
})();
</script>部分HTML代码：
<div class="pageBreak"><!--如果需要强制换页就在上一页的未尾出加上此代码--> </div>
完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
(function () {
window.print();
})();
</script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
width: 210mm;
text-align: center;
}
a
{
text-decoration: none;
}
.bold
{
font-weight: bold;
}
ul, li
{
list-style: none;
}
img
{
border: none;
}
#print-content
{
width: 98%;
margin: 10px auto;
}
#print-content h1
{
font-size: 24px;
text-align: center;
}
.floatLeft
{
float: left;
}
.floatLeft50
{
float: left;
margin-left: 50px;
}
.floatRight
{
float: right;
}
.headInfo
{
margin: 5px auto;
height: 16px;
}
table
{
border-collapse: collapse;
width: 100%;
border: 1px solid #000;
}
.tableTopBorder_3
{
border-top: 0px solid #000;
}
td, th
{
border: 1px solid #000;
text-align: center;
padding: 3px 5px;
}
.signatureArea
{
height: 25px;
line-height: 25px;
}
.signatureArea .firstSpan
{
margin-right: 200px;
}
#print-content .header .titleArea
{
height: 50px;
position: relative;
}
#print-content .header h1
{
padding-top: 10px;
}
.printTm
{
position: absolute;
left: 0px;
top: 0px;
}
.contractTable td
{
text-align: left;
}
.contractTable th
{
font-weight: bold;
}
.printInput
{
width: 99%;
border: none;
background: none;
}
.font24
{
font-size: 24px;
}
.font20
{
font-size: 20px;
}
.width200
{
width: 200px;
}
.width180
{
width: 180px;
}
.btn
{
cursor: pointer;
padding: 2px 10px;
margin: 0px 10px;
}
@media print
{
.pageBreak
{
page-break-after: always; /*强制换页的关键*/
}
.noPrint
{
display: none;
}
}
</style>
</head>
<body>
<div id="print-content">
<div class="header clear">
<div class="titleArea">
<h1>
订单表头</h1>
</div>
</div>
<table class="tableTopBorder_3">
<thead>
<tr>
<th>
序号
</th>
<th>
条码号
</th>
<th>
原编号
</th>
<th>
名称
</th>
<th>
样品来源
</th>
<th>
送样量(g)
</th>
<th>
类型
</th>
<th>
种类
</th>
<th>
检验类型
</th>
<th>
备注
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
BGG1000
</td>
<td>
BGG1000
</td>
<td>
吉单34
</td>
<td>
农业部征集
</td>
<td>
500
</td>
<td>
种子
</td>
<td>
自交系
</td>
<td width="95px">
真实性 纯度 发芽率 一致性 水分 净度
</td>
<td>
S1G00861
</td>
</tr>
<tr>
<td>
2
</td>
<td>
BGG1001
</td>
<td>
BGG1001
</td>
<td>
吉单38
</td>
<td>
农业部征集
</td>
<td>
1000
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00862
</td>
</tr>
<tr>
<td>
3
</td>
<td>
BGG1002
</td>
<td>
BGG1002
</td>
<td>
吉玉106
</td>
<td>
农业部征集
</td>
<td>
1001
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00863
</td>
</tr>
<tr>
<td>
4
</td>
<td>
BGG1003
</td>
<td>
BGG1003
</td>
<td>
春育8号
</td>
<td>
农业部征集
</td>
<td>
1002
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00864
</td>
</tr>
<tr>
<td>
5
</td>
<td>
BGG1004
</td>
<td>
BGG1004
</td>
<td>
吉单88
</td>
<td>
农业部征集
</td>
<td>
1003
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00865
</td>
</tr>
<tr>
<td>
6
</td>
<td>
BGG1005
</td>
<td>
BGG1005
</td>
<td>
龙丰7号
</td>
<td>
农业部征集
</td>
<td>
1004
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00866
</td>
</tr>
<tr>
<td>
7
</td>
<td>
BGG1006
</td>
<td>
BGG1006
</td>
<td>
远东1号
</td>
<td>
农业部征集
</td>
<td>
1005
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00867
</td>
</tr>
<tr>
<td>
8
</td>
<td>
BGG1007
</td>
<td>
BGG1007
</td>
<td>
绿育9911
</td>
<td>
农业部征集
</td>
<td>
1006
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00868
</td>
</tr>
<tr>
<td>
9
</td>
<td>
BGG1008
</td>
<td>
BGG1008
</td>
<td>
九单64
</td>
<td>
农业部征集
</td>
<td>
1007
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00869
</td>
</tr>
<tr>
<td>
10
</td>
<td>
BGG1009
</td>
<td>
BGG1009
</td>
<td>
四育7号
</td>
<td>
农业部征集
</td>
<td>
1008
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00870
</td>
</tr>
</tbody>
</table>
<div class="pageBreak">
<!--如果需要强制换页就在上一页的未尾出加上此代码-->
</div>
<div class="header clear">
<div class="titleArea">
<h2>
订单表头</h2>
</div>
</div>
<table class="tableTopBorder_3">
<thead>
<tr>
<th>
序号
</th>
<th>
条码号
</th>
<th>
原编号
</th>
<th>
名称
</th>
<th>
样品来源
</th>
<th>
送样量(g)
</th>
<th>
类型
</th>
<th>
种类
</th>
<th>
检验类型
</th>
<th>
备注
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
11
</td>
<td>
BGG1010
</td>
<td>
BGG1010
</td>
<td>
四育8号
</td>
<td>
农业部征集
</td>
<td>
1009
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00871
</td>
</tr>
<tr>
<td>
12
</td>
<td>
BGG1011
</td>
<td>
BGG1011
</td>
<td>
四育9号
</td>
<td>
农业部征集
</td>
<td>
1010
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00872
</td>
</tr>
<tr>
<td>
13
</td>
<td>
BGG1012
</td>
<td>
BGG1012
</td>
<td>
四育10号
</td>
<td>
农业部征集
</td>
<td>
1011
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00873
</td>
</tr>
<tr>
<td>
14
</td>
<td>
BGG1013
</td>
<td>
BGG1013
</td>
<td>
四育11号
</td>
<td>
农业部征集
</td>
<td>
1012
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00874
</td>
</tr>
<tr>
<td>
15
</td>
<td>
BGG1014
</td>
<td>
BGG1014
</td>
<td>
四育12号
</td>
<td>
农业部征集
</td>
<td>
1013
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00875
</td>
</tr>
<tr>
<td>
16
</td>
<td>
BGG1015
</td>
<td>
BGG1015
</td>
<td>
四育13号
</td>
<td>
农业部征集
</td>
<td>
1014
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00876
</td>
</tr>
<tr>
<td>
17
</td>
<td>
BGG1016
</td>
<td>
BGG1016
</td>
<td>
四育14号
</td>
<td>
农业部征集
</td>
<td>
1015
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00877
</td>
</tr>
<tr>
<td>
18
</td>
<td>
BGG1017
</td>
<td>
BGG1017
</td>
<td>
四育15号
</td>
<td>
农业部征集
</td>
<td>
1016
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00878
</td>
</tr>
<tr>
<td>
19
</td>
<td>
BGG1018
</td>
<td>
BGG1018
</td>
<td>
四育16号
</td>
<td>
农业部征集
</td>
<td>
1017
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00879
</td>
</tr>
<tr>
<td>
20
</td>
<td>
BGG1019
</td>
<td>
BGG1019
</td>
<td>
四育17号
</td>
<td>
农业部征集
</td>
<td>
1018
</td>
<td>
果穗
</td>
<td>
杂交种
</td>
<td width="95px">
真实性
</td>
<td>
S1G00880
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>View Code
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery.cookie.js 的使用指南
- jQuery中ajax的4种常用请求方式
- jQuery iScroll.js 移动端滚动条美化插件第1/5页
- Jquery autocomplete 插件示例
- ++++++jquery相关基础知识++++++
- jQuery ajax的traditional参数的作用
- jQueryMobile学习笔记（二）
- jQuery插件开发总结
- Jquery鼠标右键点击弹出菜单
- jquery中的数组过滤筛选-$.grep()
- jQuery实现点击按钮弹出一个div，点击其他区域关闭该div
- jquery的冒泡事件event.stopPropagation()兼容问题
- jQuery使用zTree插件实现树形菜单和异步加载
- JQ中的事件与动画
- jquery重置表单数据
- jquery的$().each,$.each的区别
- JQuery 中 is(':visible') 解析及用法
- jQuery中$.fn与jQuery.extend的区别
- Jquery方法
- jQuery源码分析14--get与eq的区别