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 ...
随机推荐
- （引用）web安全测试
转载:http://www.51testing.com/html/44/15020244-908645.html Web安全测试之XSS XSS 全称(Cross Site Scripting) 跨站 ...
- mongodb:短网址项目
短网址项目概述 1.短网址项目,是将给定的长网址,转换成短网址. 如 新浪 http://t.cn/zQd5NPw ,其中zQd5NPw就是短网址 前段页面如下
- log4net记录日志到数据库自定义字段
假设数据库中有如下自定义字段: 1.根据自定义字段定义日志信息对象 public class MessageLog { /// <summary> ...
- （转）C#中两个问号和一个问号 ??
小问题难倒很多人.今天发现了这个问题,搜了很长时间才看到记录下. 实例:dt.Columns.Add(firstRow.GetCell(i).StringCellValue ?? string.For ...
- libev 宏展开
想看源码,宏太多,看着累,宏展开,再看,功力时间不够,先放下 放上宏展开后的代码. libev4.20 展开方示为 ./configure 修改makefile文件,字符串 替换CC为 CPP 注意要 ...
- OA项目之导入
内容显示页: protected void btnIMP_Click(object sender, EventArgs e) { Response.Redire ...
- kubernetes Ubuntu部署
规划节点 安装 ubuntu 14.04 LTS 准备password-less SSH登录 建立 ssh-key 证书,切换到root 账户,使用命令 ssh-keygen -t rsa Gener ...
- python学习之路-day3
本节内容 1.集合操作 2.文件操作 3.字符编码与转码 4.函数 ==================================== 一.集合操作 集合是一个无序的,不重复的数据组合,它的主要 ...
- 专题：mdadm Raid & LVM
>FOR FREEDOM!< {A} Introduction Here's a short description of what is supported in the Linux R ...
- Spring JDBC 访问MSSQL
在Spring中对底层的JDBC做了浅层的封装即JdbcTemplate,在访问数据库的DAO层完全可以使用JdbcTemplate完成任何数据访问的操作,接下来我们重点说说Spring JDBC对S ...