最近项目中需要用到打印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. HDU5805 NanoApe Loves Sequence (BestCoder Round #86 B)前后缀预处理

    分析:维护空隙的差,然后预处理前缀最大,后缀最大,扫一遍 #include <cstdio> #include <cstring> #include <cmath> ...

  2. Linux系统上安装Python

    1.下载Python安装包,官网下:http://www.python.org/getit/ http://jingyan.baidu.com/article/eae07827f7f2d01fec54 ...

  3. boost的link 和 runtime-link，搭配shared 和 static

    转自:http://blog.csdn.net/yasi_xi/article/details/8660549 link:生成动态链接库/静态链接库.生成动态链接库需使用shared方式,生成静态链接 ...

  4. Shapefile文件中的坐标绘制到屏幕时的映射模式设置

    pDC->SetMapMode(MM_ANISOTROPIC ); //首先选择MM_ANISOTROPIC映射模式,其它映射模式都不合适 pDC->SetWindowExt( max(a ...

  5. C语言实现memcpy和memmove

    0.两者比较: memmove用于从src拷贝count个字符到dest,如果目标区域和源区域有重叠的话,memmove能够保证源串在被覆盖之前将重叠区域的字节拷贝到目标区域中.但复制后src内容会被 ...

  6. TopFreeTheme精选免费模板【20130629】

    今天给大家推荐9款最新精选的WordPress主题,它们涵盖了新闻.杂志.博客.房地产方面的主题.有些是商业模板,但现在都可以免费下载. GeoPlaces v4.6.2 – 来自Templatic的 ...

  7. VBA

    1.ActiveWorkbook是Application对象的一个属性,表示的是一个active Workbook. 2.Application对象可以获得一些顶级的对象,比如ActiveCell,A ...

  8. [POJ] #1004# Financial Management : 浮点数运算

    一. 题目 Financial Management Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 173910   Acc ...

  9. nodejs 基本操作

    查看nodejs版本 nodejs -v 升级nodejs node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的.首先安装n模块:npm install -g n 第二 ...

  10. linux中ctrl+z和ctrl+c的区别

    ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样.ctrl+c是强制中断程序的执行,而ctrl+z的是将任务中断,但是此任务并没有结束,他仍然在进程中他只是维持挂起的状态,用户可以使用f ...