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 相关文章推荐
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js中跨域方法原理详解
Jul 19 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
微信小程序支付前端源码
Aug 29 Javascript
layui表格数据重载
Jul 27 Javascript
JavaScript代码异常监控实现过程详解
Feb 17 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 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+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
python+pygame简单画板实现代码实例
2017/12/13 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Omio俄罗斯:一次搜索公共汽车、火车和飞机的机票
2018/11/17 全球购物
数控专业毕业生自荐信范文
2014/03/04 职场文书
保护环境标语
2014/06/09 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
材料物理专业求职信
2014/09/01 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
oracle索引总结
2021/09/25 Oracle
python数字类型和占位符详情
2022/03/13 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js