jQuery打印Html页面自动分页

摘要:
在最近的项目中,您需要打印HTML页面。您需要指定打印区域,但DIV后面的内容仍将被打印。在这里,您可以使用CSS来控制分页CSS代码的打印<有时CSS用于控制分页,但页面仍然是连续打印的。为了满足异常需求,您可以看到插件中定义的属性格式是JSON,因此可以指定DIV打印。这两个参数对应于页面中的DIV。让我们看看插件是如何处理页面的。

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

用法: 

Javascript代码  收藏代码
  1. $("div#printmain").printArea();  



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

Css代码  收藏代码
  1. <div style="page-break-after: always;"></div>  



有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。 


PrintArea部分源码: 

Javascript代码  收藏代码
  1. var modes = { iframe : "iframe", popup : "popup" };  
  2. var defaults = { mode     : modes.iframe,  
  3.                     popHt    : 800,  
  4.                     popWd    : 800,  
  5.                     popX     : 200,  
  6.                     popY     : 200,  
  7.                     popTitle : '',  
  8.                     popClose : false ,  
  9.                     twoDiv   : '', //自已扩展的属性,为满足变态需求  
  10.                     pageTitle: ''};//自已扩展的属性,为满足变态需求  



可以看出插件中定义的属性格式为JSON,下面介绍部分属性 

modes定义了两个属性,指定popup时会打开新窗口,可以视为打印预览页面,默认为iframe。 

@popClose | [boolean] | (false),true  打印完成后是否开闭预览页面,默认为false(不关闭)。 

Javascript代码  收藏代码
  1. $("div#printmain").printArea({mode:"popup",popClose:true});  


这样就可以指定DIV打印了。 

下面说一下我新增两个属性的用途 
twoDiv: 
        需要打印的第二个DIV ,当然会是第二页,这个页面比较长,需要自动分页,并且表格中每行都不一样,有些行跨了多行,这里打印出来,一行可能会打印在两张纸上。 

pageTitle: 
        第二个DIV分成多页里,每一页的表头都需要一样,这个参数就是公用表头。 

这两个参数都对应着页面中的DIV,如: 

Html代码  收藏代码
  1. <div id="pageTitle" style="display: none;">  


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

Javascript代码  收藏代码
  1. writeDoc.open();  
  2. writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码   
  3. writeDoc.close();  
  4.   
  5. printWindow.focus();  
  6. printWindow.print();  



下面是生成html的代码 

Javascript代码  收藏代码
  1. html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";  


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


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

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

       每一页生成完成后都需要在HTML标签后面加上CSS分页标记,这样就打印机就会乖乖的分页。 
      
       说明一下,生成的预览页面一页就是一个HTML页面,它有对应的表头与DTD信息。 

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

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

免责声明:文章转载自《jQuery打印Html页面自动分页》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇EF分页ElementUI分页Pagination自动到第一页下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

CALayer 进阶

转载自:http://www.cofcool.net/development/2015/06/19/ios-study-note-eight-CALayer-info/ The CALayer class manages image-based content and allows you to perform animations on that con...

intel:x86架构VT虚拟化(四):x64 无痕hook/shadow walker/页面读写分离

     前面费老大劲学习VT的基本原理和框架代码,到底能用来干啥了?      VT中,host通过exit事件监控guest的一举一动,稍微“大”一点的动作(进程切换、读写msr、执行cpuid等)都会在guest触发exit,回到host的handle函数处理,在VT框架中,host对guest有绝对的监控和处理的全力,所以业界通常把VT框架下的程序...

WPF一步步实现完全无边框自定义Window(附源码)

   在我们设计一个软件的时候,有很多时候我们需要按照美工的设计来重新设计整个版面,这当然包括主窗体,因为WPF为我们提供了强大的模板的特性,这就为我们自定义各种空间提供了可能性,这篇博客主要用来介绍如何自定义自己的Window,在介绍整个写作思路之前,我们来看看最终的效果。     图一 自定义窗体主界面   这里面的核心就是重写Window的Templ...

微信小程序自定义组件-下拉框

这个是网址https://www.cnblogs.com/zjjDaily/p/9548433.html 微信小程序之自定义select下拉选项框组件知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义。自定义的话,可以选择模板的方式,也可以选择组件的方式来创建。 这次我选择了组件,这样只需...

设置单元格的宽度和高度

  NPOI官方网站:http://npoi.codeplex.com/ 在Excel中,单元格的宽度其实就是列的宽度,因为Excel假设这一列的单元格的宽度肯定一致。所以要设置单元格的宽度,我们就得从列的宽度下手,HSSFSheet有个方法叫SetColumnWidth,共有两个参数:一个是列的索引(从0开始),一个是宽度。 现在假设你要设置B列的宽度...

seaJs学习笔记之javascript的依赖问题

之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题。我们将继续就之前javascript中性能问题继续介绍。 先来回顾一下性能问题的解决方法,那就是按需引入js文件。那么这样按需引入会不会存在问题呢?今天我们为大家继续揭晓答案。先看如下页面。 多文件HTML代码 <!doctype...