在最近所做的一個項目中,需要通過網頁來打印不少的表單,但是又不想每個打印頁簽各占用一個頁面,這樣就需要生存很多不同的冗余頁面,為了減少冗余,所有的表單通過jquery的頁簽tab來實現的。
一 :基本打印的實現:
1:tab頁簽在切換時的change事件中,記住每個頁簽的index,
2:在點擊打印按鈕時,根據所記住的index,由頁簽的id("tab名+index"組成),獲取當前tab頁簽下所有的html;
3: 將獲取到的需要打印頁簽的html賦值給document.body.innerHTML,(因為網頁打印,是打印當前窗口的所有的html,所以此時需要改變他的內容,為了能夠回到原來的頁面效果,需要記住原始頁面的html,待打印完后,再把原始內容賦值回去。)
4:調用網頁打印函數window.print();
關鍵代碼段:
二:表格在跨頁時自動換頁的實現
在打印時,如果是一個整體的表格或文檔格式的內容,就可以直接打印,不用管頁面里的表格或文檔是否斷裂。但如果在打印的頁面,有很多組的表格,而且每組表格的記錄條數不是固定的,且要求每個表格在不超出A4紙大小的范圍內都在一張紙上,不能出現一個小於A4紙的表格分兩頁打印,這時候就需要實現在表格跨頁面時自動分頁打印。
實現思路:
1:html結構 :在該tab頁簽里面的, 表格一般有表頭的描述性文字,用div表示,div的高度固定,表格體一般是table,table的每行的高度需要固定,這樣一組表格的高度就固定了,注意在該html結構的css樣式中不能出現padding和margin之類的樣式,否則會影響哦。。。
2:幾個固定的高度:
A4紙的高度:實際為A4紙內div的高度(因為會將在一張紙內的表格包在一個div里,不然盡管設置了高度,貌似無效),經過幾輪打印測試下來,高度基本定位為955px;
一張A4紙內內容的高度:若是將內容高度定義為A4紙的高度,貌似還是有點問題的,測試下來最后將 內容高度〈A4紙的高度,定義為:890px;
當累加的每組表格的高度超過所定義內容的高度時,把前面的所有組的html放在一個div內,且設置div的高度為A4紙的高度,然后將當前組的html作為第二個div的內容開始累加,最后將所有組的html累加打印即可;
代碼:
網頁打印與網頁頁面設置有關,我的都是默認設置: