jQuery打印指定区域Html页面并自动分页

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

用法：

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

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

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

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

PrintArea部分源码：

var modes = { iframe : "iframe", popup : "popup" };
var defaults = { mode : modes.iframe,
popHt : 800,
popWd : 800,
popX : 200,
popY : 200,
popTitle : '',
popClose : false ,
twoDiv : '', //自已扩展的属性，为满足变态需求
pageTitle: ''};//自已扩展的属性，为满足变态需求

可以看出插件中定义的属性格式为JSON，下面介绍部分属性

modes定义了两个属性，指定popup时会打开新窗口，可以视为打印预览页面，默认为iframe。

@popClose | [boolean] | (false),true 打印完成后是否开闭预览页面，默认为false（不关闭）。

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

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

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

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

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

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

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

writeDoc.open();
writeDoc.write(html); //打找一个窗口关写窗口中的HTML代码
writeDoc.close(); 

printWindow.focus();
printWindow.print();

下面是生成html的代码

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

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

下面是我的思路：

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

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

每一页生成完成后都需要在HTML标签后面加上CSS分页标记，这样就打印机就会乖乖的分页。

说明一下，生成的预览页面一页就是一个HTML页面，它有对应的表头与DTD信息。

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

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

同事也希望哪位能够再优化一下，使之通用。

赞 (0)

相关推荐

  • web的各种前端打印方法之jquery打印插件jqprint实现网页打印

    web的打印方法具我自己懂得知道的有: 1.JQuery插件Jqprint实现 2.JQery打印插件PrintArea实现网页打印 3.CSS控制网页打印样式 JQuery插件Jqprint实现: 首先要导入js文件: jquery.jqprint.js下载 复制代码 代码如下: <script language="javascript" src="jquery-1.7.1.min.js"></script> <script lang

  • JQuery结合CSS操作打印样式的方法

    本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示:  用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q

  • jQuery控制网页打印指定区域的方法

    本文实例讲述了jQuery控制网页打印指定区域的方法.分享给大家供大家参考.具体分析如下: 使用jQuery控制网页打印指定的区域,可以指定一个div区域的id即可实现打印网页的部分内容,如下代码所示: <html> <head> <title>jquery 打印指定区域内容</title> <script src="js/jquery-1.7.2.min.js"></script> <script type

  • JQuery each打印JS对象的方法

    我们知道javascript可以用alert输出变量的值,但是有时候返回的是一个对象,json格式的数据,jQuery可以用这个方法循环遍历读出对象的值,假如这个对象名称是obj,循环遍历打印它的值: 复制代码 代码如下: $.each(obj,function(key,val){      if($.isPlainObject(val) || $.isArray(val)){          subObj(val);      }else{          alert(key+'='+va

  • js或jquery实现页面打印可局部打印

    js或jquery实现页面打印(局部打印) 1.js实现(可实现局部打印) 复制代码 代码如下: <html> <title>js打印</title> <head></head><body> <input id="btnPrint" type="button" value="打印" onclick="javascript:window.print();&quo

  • web的各种前端打印方法之jquery打印插件PrintArea实现网页打印

    第一步: jquery.PrintArea.js下载js引用 复制代码 代码如下: <script language="javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.PrintArea.js"></script> html引用: 复制代码 代码如

  • jQuery插件jquery-barcode实现条码打印的方法

    jQuery插件jquery-barcode实现条码打印的方法

    本文实例讲述了jQuery插件jquery-barcode实现条码打印的方法.分享给大家供大家参考,具体如下: 这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html 使用示例: <!doctype html> <html> <head> <title>jQuery Barcode</title> <script type="

  • 基于jQuery实现网页打印功能

    基于jQuery实现网页打印功能

    直接上代码 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>index</title> </head> <body> <div style="text-align:cent

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • jQuery打印指定区域Html页面并自动分页

    最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件 用法: $("div#printmain").printArea(); 但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页 <div style="page-break-after: always;"></div> 有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数. PrintArea

  • jQuery实现指定区域外单击关闭指定层的方法【经典】

    本文实例讲述了jQuery实现指定区域外单击关闭指定层的方法.分享给大家供大家参考,具体如下: 在页面上指定区域外单击,关闭层.常见效果为弹出层外单击,关闭弹出层.今天遇到一个这样的效果,用jQuery实现起来挺简单的,顺便复习了一下相关知识. $(document).mouseup(function(e){ if($(e.target).parent("#big_map").length==0){ $("#big_map").hide("fast&quo

  • jQuery除指定区域外点击任何地方隐藏DIV功能

    具体代码如下所示: $('body').click(function(e) { var target = $(e.target); // 如果#overlay或者#btn下面还有子元素,可使用 // !target.is('#btn *') && !target.is('#overlay *') if(!target.is('#btn') && !target.is('#overlay')) { if ( $('#overlay').is(':visible') ) { $

  • vue实现指定区域自由拖拽、打印功能

    vue实现指定区域自由拖拽、打印功能

    本文实例为大家分享了vue实现指定区域自由拖拽.打印功能的具体代码,供大家参考,具体内容如下 先看下效果图,实现指定区域内内容自由拖拽,不超出.动态设置字体颜色及字号:设置完成实现打印指定区域内容,样式不丢失. 1.运行命令npm i vue-draggable-resizable -S, 安装拖拽插件vue-draggable-resizable,并引入使用(下面引入是放入main.js文件中) import VueDraggableResizable from 'vue-draggable-

  • 利用javascript实现web页面中指定区域打印

    最近做到了web页面课程表打印时,上网找了一些资料,最后使用了下面的方法实现了我需要的功能.将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 示例代码(代码中有些内容已省略) 复制代码 代码如下: function preview() {    bdhtml = window.document.body.innerHTML;    sprnstr = "<!--startprint-->";    ep

  • .net 页面指定区域打印的方法

    使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内.详细如下: 复制代码 代码如下: <style media=print type="text/css">.noprint{visibility:hidden}</style>要打印的内容.哈哈!<p class="noprint">将不打印的代码放在这里.</p><a href="javascrīpt:window.p

  • window.print打印指定div指定网页指定区域的方法

    第一种方法:指定不打印区域 使用CSS,定义一个.noprint的class,将不打印的内容放入这个class内. 细如下: <style media=print type="text/css"> .noprint{visibility:hidden} </style> 要打印的内容.哈哈! <p class="noprint">将不打印的代码放在这里.</p> <a href="javascript:

  • JavaScript打印网页指定区域的例子

    JavaScript打印页面指定div区域原理:使用window.open()在浏览器打开一个新的页面(window), 使用 window.document.write()将指定div区域的内容写入新窗口文档,document.close()关闭文档,使用window.print()调用打印机打印当前文档. JavaScript打印函数myPrint(obj): 复制代码 代码如下: function myPrint(obj){    //打开一个新窗口newWindow    var new

  • js print打印网页指定区域内容的简单实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

随机推荐