jQuery打印指定区域Html页面并自动分页


Posted in Javascript onJuly 04, 2014

最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件

用法:

$("div#printmain").printArea();

但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页

<div style="page-break-after: always;"></div>

有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。

PrintArea部分源码:

var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //自已扩展的属性,为满足变态需求 
pageTitle: ''};//自已扩展的属性,为满足变态需求

可以看出插件中定义的属性格式为JSON,下面介绍部分属性

modes定义了两个属性,指定popup时会打开新窗口,可以视为打印预览页面,默认为iframe。

@popClose | [boolean] | (false),true 打印完成后是否开闭预览页面,默认为false(不关闭)。

$("div#printmain").printArea({mode:"popup",popClose:true});

这样就可以指定DIV打印了。

下面说一下我新增两个属性的用途
twoDiv:
需要打印的第二个DIV ,当然会是第二页,这个页面比较长,需要自动分页,并且表格中每行都不一样,有些行跨了多行,这里打印出来,一行可能会打印在两张纸上。

pageTitle:
第二个DIV分成多页里,每一页的表头都需要一样,这个参数就是公用表头。

这两个参数都对应着页面中的DIV,如:

<div id="pageTitle" style="display: none;">

页面定义好后,我们看看插件中是如何处理我们的页面的。

writeDoc.open(); 
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

下面是生成html的代码

html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

插件中都定义了相义的方法,我没有做任何修改,这里我就不粘贴了。

下面是我的思路:

需在将一个DIV中的内容分成多页,且一行不跨多页,我们就得在生成html 代码上下功夫了。

首先找出DIV中的所有行,当公共表头加上这些行后高度达到一页,就需要分页了,这里就有可以一页中最后一行刚好跨了多页,将这一行保存下来,放到下一页。

每一页生成完成后都需要在HTML标签后面加上CSS分页标记,这样就打印机就会乖乖的分页。

说明一下,生成的预览页面一页就是一个HTML页面,它有对应的表头与DTD信息。

有人可能明明预览只有4页,而打印出来总会多一页,这时你需要检验一下你生成的页面中分页标记是不是在HTML标签之前。
分面标记一定要在HTML标签之后,这样可解决打印多打一页问题。

PS:
下面我会传上我修改过后的JS插件,由于我项目周期的原因,代码中很多部分都是写死了,只是为了解决本次打印的问题。所在代码中写得很乱,希望大家将究着看

同事也希望哪位能够再优化一下,使之通用。

Javascript 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JavaScript中闭包的详解
Apr 01 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 #Javascript
动态载入js提高网页打开速度的方法
Jul 04 #Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 #Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 #Javascript
JS根据年月获得当月天数的实现代码
Jul 03 #Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 #Javascript
window.returnValue使用方法示例介绍
Jul 03 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
datagrid框架的删除添加与修改
2013/04/08 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python随机生成数模块random使用实例
2015/04/13 Python
详解Python网络爬虫功能的基本写法
2016/01/28 Python
python构建深度神经网络(续)
2018/03/10 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Python 从相对路径下import的方法
2018/12/04 Python
pyqt5实现登录界面的模板
2020/05/30 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python dict乱码如何解决
2020/06/07 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
python os.listdir()乱码解决方案
2021/01/31 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
酒店仓管员岗位职责
2014/04/28 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android