css打印的基本設(shè)置
打印頁面的一些屬性,包括紙張尺寸咐吼，方向吹缔，頁邊距，分頁锯茄，頁眉厢塘，頁腳，水印等等特性撇吞，大多數(shù)可以通過@page的規(guī)則來設(shè)置俗冻。
度量單位
顯示時一般使用px,em或pt等邏輯單位,但在打印時要使用物理單位,比如cm或in(英寸)。對于常見的DPI(Dot Per Inch)為96的screen,px與cm的換算關(guān)系如下：
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4紙的標(biāo)準(zhǔn)尺寸為:
21.0cm * 29.7 cm
在96DPI分辨率下,其對應(yīng)的像素尺寸大約為:
794px * 1123px
因為不同的DPI下,其對應(yīng)的像素尺寸是不同的,所以才要使用print css,使用物理單位來描述要打印的頁面,這樣打印效果就會一致了牍颈。
css代碼：
- A4紙尺寸：
@media print {
@page {
/*A4: 210mm × 297mm，size: 794px × 1123px琅关，0邊距*/
/*171.9mm × 258.9mm煮岁，size：649px × 978px，19.05mm邊距（ie瀏覽器默認(rèn)打印邊距） */
size: 210mm 297mm;
}
}
- 方向：“portrait” 或 “l(fā)andscape”涣易。
@page { size: A4 landscape; }
- 頁邊距：
@page{margin: 2em;}
- 打印分頁：
@media print {
/*強制分頁*/
.print-page {
page-break-after: always;
}
}
- 避免表格斷開：(注：2019年11月20日補充)
@page{
table{
page-break-after: avoid;
}
}
- 避免某行文字?jǐn)嗔眩?em>(注：2019年11月20日補充)
@page{
table{
page-break-inside: avoid;
}
}
-
orphans設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面底部保留的最少行數(shù)画机。 -
widows設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時必須在頁面頂部保留的最少行數(shù)。
比如:
@media print {
p {
widows: 2;/*頂部2行*/
orphans: 3; /*底部3行*/
}
}
至于頁眉頁腳的設(shè)置新症，css的方式可以參考此文打印樣式設(shè)計步氏，只是需要調(diào)用三方的Prince。js的方式徒爹，目前就發(fā)現(xiàn)Webbrowser控件方式（ie10以下才行）荚醒，可參考此文JS實現(xiàn)瀏覽器打印、打印預(yù)覽
至于從服務(wù)器端著手的方式可自行去搜索相關(guān)資料隆嗅。
其他
- 對于頁面上有顯示而不想打印的內(nèi)容,可以將其display設(shè)置為none來避免打印界阁。
- 需要打印的內(nèi)容盡量避免float,有些瀏覽器不會正確的打印浮動的內(nèi)容。
可以調(diào)用window.print()函數(shù)來打印當(dāng)前頁面胖喳。 - 分頁打印或換頁打优萸：page- break-before和page-break-after CSS屬性并不會修改網(wǎng)頁在屏幕上的顯示，這兩個屬性是用來控制文件的打印方式。每個打印屬性都可以設(shè)定4種設(shè)定值：auto较剃、always咕别、left和 right。
相關(guān)參數(shù)說明可以參考https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-after或https://developer.mozilla.org/zh-CN/docs/Web/CSS/page-break-before或 CSS print 樣式
