Web页面分页打印小结-简单实现
2016-11-30 14:42
169 查看
最近开发单位内部系统中的档案管理时,档案管理员提出需求,希望在打印档案盒中卷内目录,分页打印,因为目前的打印针对超过一页的档案记录,在第二页中无法显
示表头,还会出现表格断开不连续如图:
档案管理员想打印时,系统自动分页并且每页都有表头 如图
解决方案就是确定每页记录数,这里设置每页15个记录
经改进:1.增加了分页显示,档案管理员可以根据选项卡,查看或打印该页。
2.在右上角增加【打印全部页】复选框,勾选,则打印所有页,不选只打印当前页。
具体实现:
利用了css page-break-before:always;
注意:不能使用 page-break-after:always;
由系统自动生成每页html代码,每页由<div>块并列组成
每个<div>块,不能被嵌套在其他<div>之中
部分代码如下
<div id="Page1" style="display:block;" class="page_content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">
<tbody>
<!--内容省略 -->
</tbody>
</table>
</div>
<div id="Page2" style="page-break-before:always;display:block;" class="page_content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">
<tbody>
<!--内容省略 -->
</tbody>
</table>
</div>
示表头,还会出现表格断开不连续如图:
档案管理员想打印时,系统自动分页并且每页都有表头 如图
解决方案就是确定每页记录数,这里设置每页15个记录
经改进:1.增加了分页显示,档案管理员可以根据选项卡,查看或打印该页。
2.在右上角增加【打印全部页】复选框,勾选,则打印所有页,不选只打印当前页。
具体实现:
利用了css page-break-before:always;
注意:不能使用 page-break-after:always;
由系统自动生成每页html代码,每页由<div>块并列组成
每个<div>块,不能被嵌套在其他<div>之中
部分代码如下
<div id="Page1" style="display:block;" class="page_content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">
<tbody>
<!--内容省略 -->
</tbody>
</table>
</div>
<div id="Page2" style="page-break-before:always;display:block;" class="page_content">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="margin:auto;border-collapse: collapse;table-layout:fixed;">
<tbody>
<!--内容省略 -->
</tbody>
</table>
</div>
相关文章推荐
- web 页面分页打印的实现
- web 页面分页打印的实现
- web 页面分页打印的实现
- web 页面分页打印的实现
- 利用WebBrowser实现Web新闻简单打印(个人小结)
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
- 应用CSS的page-break-after属性 实现WEB页面强制分页打印
- 基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
- 使用Web Datawindow ActiveX实现Web页面的打印功能
- Web打印,简单实现
- Web打印,分页的实现
- javascript打印web页面并设置打印机的实现
- (公享代码)Web打印,简单实现
- 也谈WEB打印(二):简单的分析一下IE的打印原理并实现简单的打印和预览
- 在web页面中打印功能的实现问题集锦
- 巧妙实现隐藏不想打印的web页面元素
- 使用IE内置组件实现web页面打印 --终于找到了
- web打印,巧妙实现隐藏不想打印的页面元素,以及页眉和页脚
- web页面打印 支持分页打印
- JS 实现简单的页面局部打印