欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery打印指定區(qū)域Html頁(yè)面并自動(dòng)分頁(yè)

 更新時(shí)間：2014年07月04日 17:46:49   投稿：whsnow  
項(xiàng)目中需要用到打印HTML頁(yè)面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件實(shí)現(xiàn)分頁(yè),需要的朋友可以參考下

最近項(xiàng)目中需要用到打印HTML頁(yè)面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件

用法：

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

但還是會(huì)打印DIV后面的內(nèi)容，這里可以使用CSS控制打印分頁(yè)

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

有時(shí)用CSS控制分頁(yè)了但還是會(huì)連續(xù)打印頁(yè)面，這里就可以用上PrintArea 插件中的屬性參數(shù)。

PrintArea部分源碼：

var modes = { iframe : "iframe", popup : "popup" }; 
var defaults = { mode : modes.iframe, 
popHt : 800, 
popWd : 800, 
popX : 200, 
popY : 200, 
popTitle : '', 
popClose : false , 
twoDiv : '', //自已擴(kuò)展的屬性，為滿足變態(tài)需求 
pageTitle: ''};//自已擴(kuò)展的屬性，為滿足變態(tài)需求

可以看出插件中定義的屬性格式為JSON，下面介紹部分屬性

modes定義了兩個(gè)屬性，指定popup時(shí)會(huì)打開(kāi)新窗口，可以視為打印預(yù)覽頁(yè)面，默認(rèn)為iframe。

@popClose | [boolean] | (false),true 打印完成后是否開(kāi)閉預(yù)覽頁(yè)面，默認(rèn)為false（不關(guān)閉）。

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

這樣就可以指定DIV打印了。

下面說(shuō)一下我新增兩個(gè)屬性的用途
twoDiv：
需要打印的第二個(gè)DIV ，當(dāng)然會(huì)是第二頁(yè)，這個(gè)頁(yè)面比較長(zhǎng)，需要自動(dòng)分頁(yè)，并且表格中每行都不一樣，有些行跨了多行，這里打印出來(lái)，一行可能會(huì)打印在兩張紙上。

pageTitle：
第二個(gè)DIV分成多頁(yè)里，每一頁(yè)的表頭都需要一樣，這個(gè)參數(shù)就是公用表頭。

這兩個(gè)參數(shù)都對(duì)應(yīng)著頁(yè)面中的DIV，如：

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

頁(yè)面定義好后，我們看看插件中是如何處理我們的頁(yè)面的。

writeDoc.open(); 
writeDoc.write(html); //打找一個(gè)窗口關(guān)寫(xiě)窗口中的HTML代碼 
writeDoc.close(); 

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

下面是生成html的代碼

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

插件中都定義了相義的方法，我沒(méi)有做任何修改，這里我就不粘貼了。

下面是我的思路：

需在將一個(gè)DIV中的內(nèi)容分成多頁(yè)，且一行不跨多頁(yè)，我們就得在生成html 代碼上下功夫了。

首先找出DIV中的所有行，當(dāng)公共表頭加上這些行后高度達(dá)到一頁(yè)，就需要分頁(yè)了，這里就有可以一頁(yè)中最后一行剛好跨了多頁(yè)，將這一行保存下來(lái)，放到下一頁(yè)。

每一頁(yè)生成完成后都需要在HTML標(biāo)簽后面加上CSS分頁(yè)標(biāo)記，這樣就打印機(jī)就會(huì)乖乖的分頁(yè)。

說(shuō)明一下，生成的預(yù)覽頁(yè)面一頁(yè)就是一個(gè)HTML頁(yè)面，它有對(duì)應(yīng)的表頭與DTD信息。

有人可能明明預(yù)覽只有4頁(yè)，而打印出來(lái)總會(huì)多一頁(yè)，這時(shí)你需要檢驗(yàn)一下你生成的頁(yè)面中分頁(yè)標(biāo)記是不是在HTML標(biāo)簽之前。
分面標(biāo)記一定要在HTML標(biāo)簽之后，這樣可解決打印多打一頁(yè)問(wèn)題。

PS：
下面我會(huì)傳上我修改過(guò)后的JS插件，由于我項(xiàng)目周期的原因，代碼中很多部分都是寫(xiě)死了，只是為了解決本次打印的問(wèn)題。所在代碼中寫(xiě)得很亂，希望大家將究著看

同事也希望哪位能夠再優(yōu)化一下，使之通用。

相關(guān)文章

最新評(píng)論