jQuery打印指定區(qū)域Html頁面并自動(dòng)分頁
最近項(xiàng)目中需要用到打印HTML頁面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件
用法：
$("div#printmain").printArea();
但還是會(huì)打印DIV后面的內(nèi)容，這里可以使用CSS控制打印分頁
<div style="page-break-after: always;"></div>
有時(shí)用CSS控制分頁了但還是會(huì)連續(xù)打印頁面，這里就可以用上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ì)打開新窗口，可以視為打印預(yù)覽頁面，默認(rèn)為iframe。
@popClose | [boolean] | (false),true 打印完成后是否開閉預(yù)覽頁面，默認(rèn)為false（不關(guān)閉）。
$("div#printmain").printArea({mode:"popup",popClose:true});
這樣就可以指定DIV打印了。
下面說一下我新增兩個(gè)屬性的用途
twoDiv：
需要打印的第二個(gè)DIV ，當(dāng)然會(huì)是第二頁，這個(gè)頁面比較長(zhǎng)，需要自動(dòng)分頁，并且表格中每行都不一樣，有些行跨了多行，這里打印出來，一行可能會(huì)打印在兩張紙上。
pageTitle：
第二個(gè)DIV分成多頁里，每一頁的表頭都需要一樣，這個(gè)參數(shù)就是公用表頭。
這兩個(gè)參數(shù)都對(duì)應(yīng)著頁面中的DIV，如：
<div id="pageTitle" style="display: none;">
頁面定義好后，我們看看插件中是如何處理我們的頁面的。
writeDoc.open(); writeDoc.write(html); //打找一個(gè)窗口關(guān)寫窗口中的HTML代碼 writeDoc.close(); printWindow.focus(); printWindow.print();
下面是生成html的代碼
html+=docType() + "<html>" + getHead() + getBody(thisPage) + "</html>";
插件中都定義了相義的方法，我沒有做任何修改，這里我就不粘貼了。
下面是我的思路：
需在將一個(gè)DIV中的內(nèi)容分成多頁，且一行不跨多頁，我們就得在生成html 代碼上下功夫了。
首先找出DIV中的所有行，當(dāng)公共表頭加上這些行后高度達(dá)到一頁，就需要分頁了，這里就有可以一頁中最后一行剛好跨了多頁，將這一行保存下來，放到下一頁。
每一頁生成完成后都需要在HTML標(biāo)簽后面加上CSS分頁標(biāo)記，這樣就打印機(jī)就會(huì)乖乖的分頁。
說明一下，生成的預(yù)覽頁面一頁就是一個(gè)HTML頁面，它有對(duì)應(yīng)的表頭與DTD信息。
有人可能明明預(yù)覽只有4頁，而打印出來總會(huì)多一頁，這時(shí)你需要檢驗(yàn)一下你生成的頁面中分頁標(biāo)記是不是在HTML標(biāo)簽之前。
分面標(biāo)記一定要在HTML標(biāo)簽之后，這樣可解決打印多打一頁問題。
PS：
下面我會(huì)傳上我修改過后的JS插件，由于我項(xiàng)目周期的原因，代碼中很多部分都是寫死了，只是為了解決本次打印的問題。所在代碼中寫得很亂，希望大家將究著看
同事也希望哪位能夠再優(yōu)化一下，使之通用。
- web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
- web的各種前端打印方法之jquery打印插件jqprint實(shí)現(xiàn)網(wǎng)頁打印
- JQuery each打印JS對(duì)象的方法
- JQuery結(jié)合CSS操作打印樣式的方法
- js或jquery實(shí)現(xiàn)頁面打印可局部打印
- jQuery控制網(wǎng)頁打印指定區(qū)域的方法
- jQuery插件jquery-barcode實(shí)現(xiàn)條碼打印的方法
- 基于jQuery實(shí)現(xiàn)網(wǎng)頁打印功能
- jQuery實(shí)現(xiàn)區(qū)域打印功能代碼詳解
相關(guān)文章
這篇文章主要介紹了jQuery 查找元素操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)頁面元素的各種常見查找操作實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單的二級(jí)導(dǎo)航下拉菜單效果,涉及jquery鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery下拉菜單的實(shí)現(xiàn)代碼的相關(guān)資料,非常不錯(cuò)具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
jquery 判斷div show的狀態(tài)實(shí)例
下面小編就為大家?guī)硪黄猨query 判斷div show的狀態(tài)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-12-12
jQuery中noConflict()用法實(shí)例分析
這篇文章主要介紹了jQuery中noConflict()用法,實(shí)例分析了noConflict()的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對(duì)象的操作. jQuery工具函數(shù)為我們操作對(duì)象和數(shù)組提供了便利條件.2011-02-02
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery中jqGrid分頁實(shí)現(xiàn)代碼
今天看到j(luò)avaeye上有人使用了jqGrid實(shí)現(xiàn)了數(shù)據(jù)的分頁，參考它的代碼，實(shí)現(xiàn)了這個(gè)功能，搬出來曬曬，作為自己以后學(xué)習(xí)的資料2011-11-11
jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)簡(jiǎn)單每周輪換的日歷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
jquery獲取url參數(shù)及url加參數(shù)的方法
本文給大家介紹jquery獲取url參數(shù)及url參數(shù)的方法，在url中加參數(shù)的方法本文通過多種方式給大家介紹jquery獲取url參數(shù)，感興趣的朋友一起學(xué)習(xí)學(xué)習(xí)吧2015-10-10