当前位置:  编程技术>jquery

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

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

    本文导语:  使用jquery实现指定区域打印,使用jquery.PrintArea.js 插件。 用法: $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件...

使用jquery实现指定区域打印,使用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分页标记,这样就打印机就会乖乖的分页。( www. 收集整理)

说明:
生成的预览页面一页就是一个HTML页面,它有对应的表头与DTD信息。
有人可能明明预览只有4页,而打印出来总会多一页,这时你需要检验一下你生成的页面中分页标记是不是在HTML标签之前。
分面标记一定要在HTML标签之后,这样可解决打印多打一页问题。

以上就是jQuery怎么打印指定区域Html页面并自动分页的方法,不尽完美,欢迎高手补充优化。

您可能感兴趣的文章:

    
 
 

您可能感兴趣的文章:

  • 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 animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
  • jQuery打印指定区域Html页面并自动分页
  • 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方法定位到页面具体位置
  • 自适应页面背景插件 jQuery.resBg
  • jquery防止重复执行动画避免页面混乱
  • jQuery 页面切换插件 browserSwipe.js
  • jQuery圆角插件 jQuery Corners iis7站长之家
  • 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