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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
基于simple_html_dom的使用小结
2013/07/01 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
Javascript - HTML的request类
2006/07/15 Javascript
javascript新手语法小结
2008/06/15 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
2011/05/12 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python利用OpenCV2实现人脸检测
2020/04/16 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Pytorch通过保存为ONNX模型转TensorRT5的实现
2020/05/25 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
linux面试题参考答案(7)
2014/07/24 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
实用的简历自我评价
2014/03/06 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
行政复议答复书
2015/07/01 职场文书
新闻通讯稿范文
2015/07/22 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
在redisCluster中模糊获取key方式
2021/07/09 Redis