最近项目中需要用到打印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. C# 使用NPlot绘图技巧

    原文 C# 使用NPlot绘图技巧 图表控件一直是很难找的,特别是免费又强大的.NPlot是一款非常难得的.Net平台下的图表控件,能做各种曲线图,柱状图,饼图,散点图,股票图等,而且它免费又开源,使 ...

  2. STL六大组件之——适配器代表大会

    适配器也是一种常用的设计模式: 将一个类的接口转换为另一个类的接口,使得原本因接口不兼容而不能合作的两个类可以一起运作.STL提供三种适配器:改变容器接口的容器适配器.改变迭代器接口的迭代器适配器以及 ...

  3. 【Java多线程】互斥

    Java多线程学习2——互斥 一.前言 在上一节 (http://www.cnblogs.com/lzhen/p/3917966.html) 中,通过实现Runnable接口,可以实现多线程中的资源的 ...

  4. JavaScript Type Conversion

    Data Types 5 Data Types string, number, boolean, object, function 3 Object Types object, array, date ...

  5. Python进程和线程

    引入进程和线程的概念及区别 1.线程的基本概念 概念 线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但 ...

  6. 两个实用的Python的装饰器

    两个实用的Python的装饰器 超时函数 这个函数的作用在于可以给任意可能会hang住的函数添加超时功能,这个功能在编写外部API调用 .网络爬虫.数据库查询的时候特别有用 timeout装饰器的代码 ...

  7. Maven，预加载资源文件

    预加载资源文件需要先启用功能: <build> <resources> <resource> <directory>src/main/resources ...

  8. xcode XCTest录制后测试出错临时解决方法

    Xcode 使用 XCTest 做自动化测试,录制后在run UITest 的时候总是莫名报错,后来在方法执行前添加sleep()后,没有再出现错误,可能是xcode的一处BUG.

  9. oracle查看相关用户表

    select TABLE_NAME from user_tables  //当前用户表 select TABLE_NAME from dba_tables  //所有用户表+系统表 select TA ...

  10. 转】MyEclipse10安装Log4E插件

    原博文出自于:http://www.cnblogs.com/xdp-gacl/p/4231812.html 感谢! 一. Log4E插件下载 下载地址:http://log4e.jayefem.de/ ...