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 相关文章推荐
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
JavaScript 异步调用
Oct 25 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
layui实现三级联动效果
Jul 26 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
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php自定义分页类完整实例
2015/12/25 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python 字符串常用方法汇总详解
2019/09/16 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
思想品德课教学反思
2014/02/10 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
七一建党节演讲稿
2014/09/11 职场文书
奖励通知
2015/04/22 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python