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 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
jQuery实现计算器功能
Oct 19 jQuery
一起深入理解js中的事件对象
Feb 06 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
js传值 判断
2006/10/26 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
本地存储localStorage用法详解
2017/07/31 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python实现对adb命令封装
2020/03/06 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
资深地理教师自我评价
2013/09/21 职场文书
警察思想汇报
2014/01/04 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
谢师宴学生致辞
2015/07/27 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript