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 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
浅谈javascript的调试
Jan 28 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
浅谈node的事件机制
Oct 09 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 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下几种删除目录的方法总结
2007/08/19 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
详解Python IO口多路复用
2020/06/17 Python
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
教师自我评价范例
2013/09/24 职场文书
在求职信中如何凸显个人优势
2013/10/30 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
大学生个人求职信
2014/06/02 职场文书
班级心理活动总结
2014/07/04 职场文书
装修施工安全责任书
2014/07/24 职场文书
模范班主任事迹材料
2014/12/17 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB