当前位置:  编程技术>WEB前端

jQuery打印指定区域Html页面并自动分页

    来源: 互联网  发布时间:2014-08-25

    本文导语:  最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 有时用CSS控制分页了但还是会连续打印页面,...

最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件

用法:

$("div#printmain").printArea();

但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页

有时用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,如:

页面定义好后,我们看看插件中是如何处理我们的页面的。

writeDoc.open(); 
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码 
writeDoc.close(); 

printWindow.focus(); 
printWindow.print();

下面是生成html的代码

html+=docType() + "" + getHead() + getBody(thisPage) + "";

插件中都定义了相义的方法,我没有做任何修改,这里我就不粘贴了。

下面是我的思路:

需在将一个DIV中的内容分成多页,且一行不跨多页,我们就得在生成html 代码上下功夫了。

首先找出DIV中的所有行,当公共表头加上这些行后高度达到一页,就需要分页了,这里就有可以一页中最后一行刚好跨了多页,将这一行保存下来,放到下一页。

每一页生成完成后都需要在HTML标签后面加上CSS分页标记,这样就打印机就会乖乖的分页。

说明一下,生成的预览页面一页就是一个HTML页面,它有对应的表头与DTD信息。

有人可能明明预览只有4页,而打印出来总会多一页,这时你需要检验一下你生成的页面中分页标记是不是在HTML标签之前。
分面标记一定要在HTML标签之后,这样可解决打印多打一页问题。

PS:
下面我会传上我修改过后的JS插件,由于我项目周期的原因,代码中很多部分都是写死了,只是为了解决本次打印的问题。所在代码中写得很乱,希望大家将究着看

同事也希望哪位能够再优化一下,使之通用。


    
 
 

您可能感兴趣的文章:

  • Jquery在指定DIV加载HTML示例代码
  • jquery 页面滚动到指定DIV的代码
  • Jquery跳到页面指定位置的方法
  • 通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
  • jquery删除指定的html标签并保留标签内文本内容的方法
  • jquery实现google搜索指定网页内容的代码
  • jquery hide方法隐藏指定元素的例子
  • JQuery 勾选指定name复选框集合的例子
  • Jquery tab效果指定默认显示第几页
  • jquery序列化表单去除指定元素示例代码
  • jQuery截取指定长度字符串代码
  • jQuery截取指定长度字符串的实现原理及代码
  • jQuery函数的第二个参数获取指定上下文中的DOM元素
  • jquery table操作在指定行后添加新行的例子
  • jQuery如何打印指定区域Html页面并自动分页?
  • 使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
  • Jquery 获取指定标签的对象及属性的设置与移除
  • jQuery区域范围滑块插件 noUiSlider
  • php和jquery实现地图区域数据统计展示数据示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 通过javascript库JQuery实现页面跳转功能代码
  • jquery刷新页面 jquery局部刷新与及全页面刷新
  • jquery 父页面查找iframe子页面内容、子页面查找父页面内容
  • 解决用jquery load加载页面到div时,不执行页面js的问题
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery页面加载完毕再执行代码多种方法
  • jQuery 页面加载 fakeLoader.js
  • jQuery 页面动画效果 Animsition
  • jQuery向导页面插件 jWizard
  • jQuery 页面滚动插件 ScrollMe
  • jQuery页面元素缩放插件 Zoonooz.js
  • jQuery页面滚动插件 toanywhere
  • jQuery 页面滚动插件 Scrolld.js
  • jQuery aminate方法定位到页面具体位置
  • 操作系统 iis7站长之家
  • jquery防止重复执行动画避免页面混乱
  • jQuery 页面切换插件 browserSwipe.js
  • jQuery 页面滚动插件 One Page Scroll
  • Jquery更换主题同时刷新iframe页面的代码举例
  • JQuery在页面加载完成时执行函数的示例代码
  • jquery制作搜狐快站页面效果示例分享
  • jQuery概述,代码举例及最新版下载
  • jQuery鼠标动画插件 jquery-ahover
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery向导插件 Jquery Wizard Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery圆角插件 jQuery Corners
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3