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 Array.prototype.slice使用说明
Oct 11 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
使用JavaScript破解web
Sep 28 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
php继承的一个应用
2011/09/06 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
Python全局变量操作详解
2015/04/14 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python3人脸识别的两种方法
2019/04/25 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
Python 切分数组实例解析
2019/11/07 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
2014幼儿园小班工作总结
2014/11/10 职场文书
Python基础之函数嵌套知识总结
2021/05/23 Python