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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
JavaScript实现队列结构过程
Dec 06 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
调频问题解答
2021/03/01 无线电
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP代码优化的53个细节
2014/03/03 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
composer.lock文件的作用
2016/02/03 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
js表头排序实现方法
2015/01/16 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
学习Python爬虫的几点建议
2020/08/05 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
个性婚礼策划方案
2014/05/17 职场文书
医德医风自我评价
2014/09/19 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
Vue + iView实现Excel上传功能的完整代码
2021/06/22 Vue.js
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
vue的项目如何打包上线
2022/04/13 Vue.js