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 相关文章推荐
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
Apr 13 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
node.js基础知识汇总
Aug 25 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
中国的第一台收音机
2021/03/01 无线电
PHP如何使用Memcached
2016/04/05 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python 模拟贷款卡号生成规则过程解析
2019/08/30 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
大学毕业寄语大全
2014/04/10 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang