最近项目中需要用到打印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#中的枚举类型（enum type）

    ylbtech 原文 C#中的枚举类型(enum type) 概念 枚举类型(enum type)是具有一组命名常量的独特的值类型.在以下示例中: enum Color { Red, Green, B ...

  2. Ubuntu 升级到13.10之后出现Apache2启动失败的问题

    昨天看到Ubuntu 13.04提示有新的发行版Ubuntu 13.10了,手痒了一下,没有忍住就升级了. 结果升级完毕之后发现Apache2服务启动失败了,失败信息是: Invalid comman ...

  3. [转]Linux之type命令

    转自:http://codingstandards.iteye.com/blog/831504 用途说明 type命令用来显示指定命令的类型.一个命令的类型可以是如下之一 alias 别名 keywo ...

  4. 高级正则表达式技术（Python版）

    正则表达式是从信息中搜索特定的模式的一把瑞士军刀.它们是一个巨大的工具库,其中的一些功能经常被忽视或未被充分利用.今天我将向你们展示一些正则表达式的高级用法. 举个例子,这是一个我们可能用来检测电话美 ...

  5. activity切换时的overridePendingTransition动画效

      注意,切换方法overridePendingTransition只能在startActivity和finish方法之后调用.第一个参数为第一个Activity离开时的动画,第二参数为所进入的Act ...

  6. JavaScript面向对象(01)--函数

    在JavaScript中,函数和对象有区别,也有联系, 首先函数是一个对象,但是和对象存在一些区别如下: 1,不论在java还是js中,如果把一个对象赋值给另一个变量,那么,后者会指向前者对象所在的内 ...

  7. Arduino1.7.10在Ubuntu下创建快捷方式

    从官网下载的arduino1.7.10版本没有快捷方式只有可执行文件arduino,通过下面的方法可以创建快捷方式 打开链接:http://www.easyicon.net/1171938-ardui ...

  8. delphi 2010 导出sql server 数据到DBF乱码问题

    近日,由于业务需要导出sql server 数据到DBF文件,要查询多表记录,并适当处理后生成导出DBF文件,系统使用delphi2010平台开发. 首先按要求在VFP里创建DBF表,字段数有240个 ...

  9. 动软代码生成与 EntityFramework 实体生成模板

    有用到EntityFrameWork的同学们,可以用用. 实体工程中添加EF6的dll 还有 ValidBox4Mvc.ValidRules.dll应用到项目中,此dll下载地址:http://www ...

  10. Objective C静态代码扫描和代码质量管理 OClint + SonarQube

    OClint是针对C, C++及Objective C代码的静态扫描分析工具,而SonarQube是一个开源的代码质量管理平台.本文将实现将OClint的扫描结果导入到SonarQube中,已实现对O ...