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 ...
随机推荐
- X Window 设定介绍
在 Unix Like 上面的图形用户接口 (GUI) 被称为 X 或 X11 X11 是一个『软件』而不是一个操作系统: X11 是利用网络架构来进行图形接口的执行与绘制: 最著名的 X 版本为 X ...
- 关于git-Git 分支管理和冲突解决
创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支,名叫newname. gi ...
- H5-杂七杂八的标签
1.overflow:设置当内容超出父级的宽高尺寸设置时的处理方式 a.hidden:隐藏超出部分的内容 b.auto:如果内容没有超出,就正常显示,如果超出,就隐藏内容并提供滚动条,可以滚动显示超出 ...
- Longest Palindromic Substring
题目:https://leetcode.com/problems/longest-palindromic-substring/ 算法分析 这道题的解法有三种:暴力法.动态规划.Manacher算法.三 ...
- throw er; Unhandled 'error' event Error: listen EADDRINUSE的解决方法
先把错误贴出来,如下: 出现此问题的原因是端口被占用,解决方法如下: 查看程序执行用到的端口的运行情况,本例是端口号3000; 占用该端口3000的进程是node,pid为244156,用kill命令 ...
- [转]MNIST机器学习入门
MNIST机器学习入门 转自:http://wiki.jikexueyuan.com/project/tensorflow-zh/tutorials/mnist_beginners.html?plg_ ...
- 谷歌身份验证器加强Linux帐户安全
下载 Google的身份验证模块 # wget https://google-authenticator.googlecode.com/files/libpam-google-authenticato ...
- flash网页播放器
http://www.52player.com/VideoPlayer/ 下载
- oracle 中文乱码---查看和修改客户端字符集
客户端NLS_LANG的设置方法 Windows: # 常用中文字符集set NLS_LANG=SIMPLIFIED CHINESE_CHINA.ZHS16GBK # 常用unicode字符集 set ...
- 【jquery】：表单返回信息
第一个页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...