jQuery列印Html頁面自動分頁

2021-07-26 22:16:50 字數 1070 閱讀 5135

最近專案中需要用到列印html頁面,需要指定區域列印,使用jquery.printarea.js 外掛程式 

用法: 

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

但還是會列印div後面的內容,這裡可以使用css控制列印分頁 

"page-break-after: always;">

有時用css控制分頁了但還是會連續列印頁面,這裡就可以用上printarea 外掛程式中的屬性引數。 

printarea部分原始碼: 

var modes = ;  

var defaults = ;//自已擴充套件的屬性,為滿足**需求  

可以看出外掛程式中定義的屬性格式為json,下面介紹部分屬性 

modes定義了兩個屬性,指定popup時會開啟新視窗,可以視為列印預覽頁面,預設為iframe。 

@popclose | [boolean] | (false),true  列印完成後是否開閉預覽頁面,預設為false(不關閉)。 

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

這樣就可以指定div列印了。 

下面說一下我新增兩個屬性的用途 

twodiv: 

需要列印的第二個div ,當然會是第二頁,這個頁面比較長,需要自動分頁,並且**中每行都不一樣,有些行跨了多行,這裡列印出來,一行可能會列印在兩張紙上。 

pagetitle: 

第二個div分成多頁裡,每一頁的表頭都需要一樣,這個引數就是公用表頭。 

這兩個引數都對應著頁面中的div,如:

頁面定義好後,我們看看外掛程式中是如何處理我們的頁面的。

writedoc.open();  

writedoc.write(html); //打找乙個視窗關寫視窗中的html**   

writedoc.close();  

printwindow.focus();  

printwindow.print();  

下面是生成html的**

html+=doctype() + "" + gethead() + getbody(thispage) + "";  

html 頁面部門列印

在專案中做一些報表的內容,需要列印一下報表頁面,在開始的時候是列印的整個頁面,後來客戶希望列印報表的內容區域,也就是一部分頁面。所以找了一些方法來實現這個功能。方法比較簡單 首先設定開始列印和列印結束的位置 有兩點需要說明一下 程式中宣告了乙個列印起始的字串和乙個結束的字串,根據獲取這兩個字串來得到...

嚴格分頁列印html頁面

將html頁面列印,列印出來的頁面分隔難以控制,通過以下方法可以做到頁面嚴格按預想的列印。1 嚴格控制div的高度,將body div的縱向padding margin都設為0,border也設為0 2 列印時選無邊距列印 top1 bottom top2bottom top1bottom top2...

禁止列印頁面!

解決思路 要真正禁止列印頁面是辦不到的,但是如果能設定讓使用者列印到的是空白,也算是實現禁止列印的目的了。具體步驟 示例 文件主要內容 規則說明 import指定匯入的外部樣式表及目標 該規則必須在樣式表頭部最先宣告 charset在外部樣式表檔案內使用。指定該樣式表使用的字符集。font face...