項(xiàng)目中遇到打印報(bào)表的要求，需要只打印報(bào)表部分而不是整個(gè)頁面，一般直接調(diào)用系統(tǒng)的方法window.print()，會(huì)打印整個(gè)頁面，發(fā)現(xiàn)jQuery.print.min.js 很好用，下面和大家分享下打印制作過程成中遇到的問題和解決方法。
使用方法
1.引入jquery 和 jQuery.print.min.js
2.調(diào)用（如下）
//打印
$("打印按鈕").on('click',function () {
$("需要打印展示的元素").print({
globalStyles:false,
mediaPrint:true,
iframe:false,
stylesheet:'../commons/css/printBicycle.css'
})
})
| 參數(shù) | 默認(rèn)值 | 描述 |
|---|---|---|
| globalStyles | true | 是否使用父文檔的樣式表 |
| mediaPrint | false | 是否使用含有media=”print”的樣式表 |
| stylesheet | null | 鏈接外部樣式表 |
| noPrintSelector | “.no-prin” | 非打印內(nèi)容選擇器 |
| iframe | true | 是否使用一個(gè)隱藏的iframe來進(jìn)行打印，也賦值一個(gè)已有的iframe的選擇器 |
| append | null | 后置打印的自定義html |
| prepend | null | 前置打印的自定義html |
| manuallyCopyFormValues | true | 打印時(shí)是否更新的表單數(shù)據(jù) |
| deferred | $.Deferred() | 在window.print()調(diào)用后resolve一個(gè)jQuery.Deferred對象 |
| timeout | 750 | 從iframe或者新窗口加載打印數(shù)據(jù)的超時(shí)時(shí)間 |
打印的樣式
引入方式：
1.使用link標(biāo)簽就像通常在html頁面中引入樣式表一樣,不過附加一個(gè)額外的media屬性,如下面這樣:
<link rel="stylesheet" href="print.css" media="print" />
2.使用@media規(guī)則可以在通用的樣式表中,使用@media規(guī)則指定樣式用于打印,比如這樣:
@media print {
selector{
...
}
}
3.使用@import
@import url(print-style.css) print;
個(gè)人項(xiàng)目中使用的插件調(diào)用的方式（使用如下），由于項(xiàng)目采用了easyui的tab切簽，即使引入了不同的樣式表，打開多個(gè)切簽后，打印樣式會(huì)互相影響；采用插件自帶的引入外部樣式的屬性，能避免這個(gè)問題。
stylesheet:'../commons/css/printBicycle.css'
打印css的控制（以下樣式變更只能改變打印的默認(rèn)值，排除客戶自行調(diào)整的情況）
縱向
@page { size: portrait; }
橫向
@page { size: landscape; }
去掉頁眉頁腳
@page {
size: A4 landscape; /*A4紙，橫向打印*/
margin: 0;/*去掉頁邊距*/
}
遇到的問題
- 問題：插件中
iframe默認(rèn)的屬性是true,意思是在當(dāng)前窗口打開打印功能，這樣的話打印的報(bào)表頁眉的標(biāo)題為文檔的<title></title>里面的內(nèi)容，頁腳會(huì)有當(dāng)前網(wǎng)址，客戶不喜歡。
解決方式：調(diào)用時(shí)iframe:true,這樣的話點(diǎn)擊打印會(huì)新開個(gè)窗口（沒有標(biāo)題，沒有網(wǎng)址），就能去掉頁眉頁腳中不喜歡的標(biāo)題和網(wǎng)址。
- 問題：當(dāng)遇到數(shù)據(jù)量較大的情況，瀏覽器會(huì)自動(dòng)切割，分成多個(gè)頁面，當(dāng)去掉頁眉頁腳時(shí)，由于打印機(jī)的邊距問題，會(huì)造成邊框周圍的數(shù)據(jù)沒打印上。
解決方法： 增加上下的頁邊距@page {margin: 50px 0;}
- 問題：打印的報(bào)表內(nèi)容超出紙張大小
解決方式： 添加縮放zoom(個(gè)人比較喜歡這種縮放，看起來比較銳利，字體不會(huì)縮小，ps:同時(shí)能解決瀏覽器切割后，造成的描邊錯(cuò)位情況)；使用如下
<!--html部分需要給打印的部分加個(gè)父元素-->
<div class='需要打印的元素'>
<table>
//.....
</table>
</div>
.需要打印的元素{zoom:.4}
