jQuery自动分页打印表格(HTMLtable)，可以强制换页
最近做项目的时候需要做批量打印订单，一个订单可能在最后一页是的内容是不足一页的，这时候下一个订单需要下一页打印，这样就需要强制换页。在下一页再打印下一个订单
部分代码：
部分重要的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>
jQuery自动分页打印表格(HTMLtable)，可以强制换页的更多相关文章
- Lodop打印表格带页头页尾 自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- 运用jquery做打印和导出操作
我最近接手的项目中经常让做出打印和导出统计图和表格 首先说打印,打印如果用echarts做出来的图表,打印的时候,要借助jquery的打印插件. 打印插件: <script src=" ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾 转载
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- jquery隐藏table表格的某一列
jquery隐藏table表格的某一列: $('table tr').find('td:eq(13)').hide(); 隐藏table的第13列
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- MVC打印表格,把表格内容放到部分视图打印
假设在一个页面上有众多内容,而我们只想把该页面上的表格内容打印出来,window.print()方法会把整个页面的内容打印出来,如何做到只打印表格内容呢? 既然window.print()只会打印整页 ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
随机推荐
- android项目中使用开源数据库litepal
下载地址 https://github.com/LitePalFramework/LitePal 参考文档 http://blog.csdn.net/guolin_blog/article/detai ...
- winform调用浏览器
方法1: private void button1_Click(object sender, EventArgs e) .{ . //从注册表中读取默认浏览器可执行文件路径 . RegistryKey ...
- Java 基础知识总结 (一、标识符)
一.Identifiers: 标识符 Names of class,method and variable 用于类名.方法名.变量名 Begin with character,'_' or '$' 标 ...
- iOS字符串为空的判断
//判断字符串 -(BOOL) isValidString:(id)input { if (!input) { return NO; } if ((NSNull *)input == [NSNull ...
- Swagger 使用方法
注:本篇文章基于Django-rest-swagger 2.0.7环境下撰写 参考英文文档: http://django-rest-swagger.readthedocs.io/en/latest/ ...
- servers中添加server时，看不到运行环境的选择。
servers中添加server时,看不到运行环境的选择. 主要原因是tomcat目录中的配置文件格式不对.
- display:line-block和blaock的区别
1.使用inline-block 会产生了元素间的空隙 2.line-block主要的用处是用来处理行内非替换元素的高宽问题的!行内非替换元素,比如span.a等标签,正常情况下士不能设置宽高的,加上 ...
- STL学习之路
本文面向的读者:学习过C++程序设计语言(也就是说学习过Template),但是还没有接触过STL的STL的初学者.这实际上是我学习STL的一篇笔记,老鸟就不用看了. 什么是泛型程序设计 我们可以简单 ...
- NSLog函数重写
跟C++的输出函数相比,NSlog函数有个很大的优势,就是它可以输出对象. 在实际使用过程中,我们可以通过实现description函数来实现对NSLog函数的重写 -(NSString*)descr ...
- sublime构建执行go程序真爽
1.安装gosublime插件 2.直接在sublime下调试运行共程序,不用去cmd了: 选择编译系统,编译,出现下面的模拟命令行,直接执行go的命令即可,比如go run process.go,结 ...