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代码片段收集
Jul 12 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
ECharts地图绘制和钻取简易接口详解
Jul 12 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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连接Access数据库错误及解决方法
2013/06/20 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
vue中watch和computed的区别与使用方法
2020/08/23 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
Python是什么 Python的用处
2020/05/26 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
工程造价自荐信
2013/10/09 职场文书
毕业生求职简历中的自我评价
2013/10/18 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
医疗纠纷协议书
2014/04/16 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技