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

用法：

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

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

  1. <div style="page-break-after: always;"></div>

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

PrintArea部分源码：

  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（不关闭）。

  1. $("div#printmain").printArea({mode:"popup",popClose:true});

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

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

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

这两个参数都对应着页面中的DIV，如：

  1. <div id="pageTitle" style="display: none;">

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

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

下面是生成html的代码

  1. html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";

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

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

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

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

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

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

jQuery打印Html页面自动分页的更多相关文章

  1. asp.net 实现在线打印功能，jQuery打印插件PrintArea实现自动分页

    使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...

  2. jquery打印特定div

    实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能. 使用说明需要使用jQuery库文件和 ...

  3. jQuery打印插件PrintArea实现

    实现javascript打印功能,打印整个页面就很简单,但如果指定打印某一个区域就有点难点,这里有一个jQuery插件PrintArea可实现打印页面某区域功能. 使用说明需要使用jQuery库文件和 ...

  4. 转载：使用jquery刷新当前页面以及其他js知识积累

    转载:https://www.cnblogs.com/heguihui/p/10505949.html 如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.loc ...

  5. C# 打印PDF文件之使用不同打印机打印所有页面或部分页面

    C# 打印PDF文件之使用不同打印机打印所有页面或部分页面 最近在逛国外各大编程社区论坛的时候,发现很多人都在问一个关于PDF文件打印的问题:打印时如何选择非默认打印机并设置打印页面的范围.而一般情况 ...

  6. 在Ecshop后台打印订单页面将商品按货号排序

    ECSHOP后台管理里的“打印订单" 页面里的商品排序有点乱,现在想改成按序号来排序,修改方法如下 下面是在2.7.2基础上做的修改 打开 admin/order.php  文件 找到(大约 ...

  7. jquery加载页面的方法

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

  8. jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){  $("#a&qu ...

  9. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

随机推荐

  1. Android随笔--使用ViewPager实现简单地图片的左右滑动切换

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布 ...

  2. C++重要知识点小结---2

    C++重要知识点小结--1 :http://www.cnblogs.com/heyonggang/p/3246631.html 1.C++允许程序员声明一个不能有实例对象的类,这样的类惟一的用途是被继 ...

  3. LoadRunner 各个指标分析

    我们要监视CPU,内存.硬盘的资源情况.得到以下的参数提供分析的依据.%processor time(processor_total):器消耗的处理器时间数量.如果服务器专用于sql server 可 ...

  4. LoadRunner error -27728

    错误现象1:Action.c(16): Error -27728: Step download timeout (120 seconds) has expired whendownloading no ...

  5. 【Linux】Semaphore信号量线程同步的例子

    0. 信号量 Linux下的信号量和windows下的信号量稍有不同. Windows Windows下的信号量有一个最大值和一个初始值,初始值和最大值可以不同.  而且Windows下的信号量是一个 ...

  6. python异常以及面向对象编程

    一.面向对象 需要注意的是,在Python中,变量名类似__xxx__的,也就是以双下划线开头,并且以双下划线结尾的,是特殊变量,特殊变量是可以直接访问的,不是private变量,所以,不能用__na ...

  7. JXTA+JavaFX实现的网络黑白棋测试地址

    http://www.qhdbaobao.com/dist/secondegg-reversi.html ——————————————————————————————————————————————— ...

  8. Oracle中INT、FLOAT、NUMBER区别

    Oracle里的int等于number(长度,0) float也类似,number要定义小数部分的位数,而float不用定义后边小数有几位  因为NUMBER要确定长度,后边确定小数位. 所以,如果不 ...

  9. Win7系统下利用U盘安装Ubuntu14.04麒麟版

    转自http://www.360doc.cn/article/14743053_335473181.html 重要提示:在采用u盘安装ubuntu分区时,所有磁盘一定要全部设置成逻辑分区,包括根目录/ ...

  10. ASP.NET前台AJAX方法调用后台的方法写法

    前台: <input id="AjaxDemo" type="button" onclick="get()" value=" ...