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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
浅谈PHP强制类型转换,慎用!
2013/06/06 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
JQuery 国际象棋棋盘 实现代码
2009/06/26 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
JavaScript将页面表格导出为Excel的具体实现
2013/12/27 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
建筑实习自我鉴定
2013/10/18 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
企业年会主持词
2014/03/27 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
早会开场白台词大全
2015/06/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书