最近项目中需要用到打印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#）RichTextBox控件

    RichTextBox(有格式文本)控件可实现TextBox控件的所有功能. ❶在RichTextBox控件中显示滚动条 RichTextBox可设置Multiline属性来控制是否显示滚动套,tru ...

  2. 《A Tour of PostgreSQL Internals》学习笔记——系统表和数据类型

    上周末学习了<A Tour of PostgreSQL Internals>的第一部分(View 1),今天我们继续打开书本,继续View 2 部分. View 2 Postgresql的 ...

  3. Excel导出问题（导出时不去掉前面的0）(转)

    最简单的方法是:在数字前面加'符号.即代码里添加: "'" 以下均是网上搜集到的其他解答: 一.代码如下: style="mso-number-format:'/@';& ...

  4. open file 值修改

    有时候在程序里面需要打开多个文件,进行分析,系统一般默认数量是1024,(用ulimit -a可以看到)对于正常使用是够了,但是对于程序来讲,就太少了. 修改办法: 重启就OK 修改2个文件. 1./ ...

  5. python与saltstack动态传参变量名的研究

    python动态变量名 import sys createVar = locals() listTemp = range(1,10) for i in range(1, len(sys.argv)): ...

  6. bzoj3064 CPU监控

    今天终于写了一道正常的题 思路是这样的: 1.普通线段树add,set不变,并改为下放标记版本 2.past_addv 记录一个区间内可能的addv值的最大值 3.past_setv 记录一个区间被s ...

  7. Java中的路径问题

    Java中的路径问题 代码说明,如下: package com.merlin.test; import java.io.InputStream; public class Test { public ...

  8. Inverse是hibernate双向关系中的基本概念。inverse的真正作用就是指定由哪一方来维护之间的关联关系。当一方中指定了“inverse=false”（默认），那么那一方就有责任负责之间的关联关系，说白了就是hibernate如何生成Sql来维护关联的记录

    <set name ='students' table="students_table" inverse='false'(默认不用写) > <key column ...

  9. web.xml 配置介绍

    这个不是原创,有点早了,具体从哪里来的已经记不得了.但是东西是实实在在的. 1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<c ...

  10. effective c++：dynamic_cast，避免返回handles指向对象内部

    关于dynamic_cast 假定我们有一个基类指针bp,我们在运行时需要把它转换成他的派生类指针,这个时候需要用到dynamic_cast. Derived *dp = dynamic_cast&l ...