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 表格合并的问题分享
Sep 17 Javascript
多个js与css文件的合并方法详细说明
Dec 26 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
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生成带有雪花背景的验证码
2006/10/09 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
JS 表单验证大全
2011/11/23 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
webpack入门必知必会
2017/01/16 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue实现同一个页面可以有多个router-view的方法
2018/09/20 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python爬虫常用的模块分析
2014/08/29 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
django session完成状态保持的方法
2018/11/27 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python要安装在哪个盘
2020/06/15 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
2014年底个人工作总结
2015/03/10 职场文书
标枪加油稿
2015/07/22 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS
基于Python实现nc批量转tif格式
2022/08/14 Python