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的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JS实现打字游戏
Dec 17 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 session应用实例 登录验证
2009/03/16 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
大学生求职自荐信
2013/12/12 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
八一慰问活动方案
2014/02/07 职场文书
反邪教标语
2014/06/23 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
县委务虚会发言材料
2014/10/20 职场文书
2014个人年度工作总结
2014/12/15 职场文书
趣味运动会广播稿
2015/08/19 职场文书
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python
Go gorilla/sessions库安装使用
2022/08/14 Golang