css打印的基本設置
打印頁面的一些屬性,包括紙張尺寸，方向，頁邊距，分頁，頁眉，頁腳，水印等等特性，大多數(shù)可以通過@page的規(guī)則來設置。
度量單位
顯示時一般使用px,em或pt等邏輯單位,但在打印時要使用物理單位,比如cm或in(英寸)。對于常見的DPI(Dot Per Inch)為96的screen,px與cm的換算關系如下：
1 inch = 2.54 cm
1cm = 96/2.54 ≈ 37.80 px
1px = 2.54/96 ≈ 0.0265 cm
100px = 2.65 cm
A4紙的標準尺寸為:
21.0cm * 29.7 cm
在96DPI分辨率下,其對應的像素尺寸大約為:
794px * 1123px
因為不同的DPI下,其對應的像素尺寸是不同的,所以才要使用print css,使用物理單位來描述要打印的頁面,這樣打印效果就會一致了。
css代碼：
- A4紙尺寸：
@media print {
@page {
/*A4: 210mm × 297mm，size: 794px × 1123px，0邊距*/
/*171.9mm × 258.9mm，size：649px × 978px，19.05mm邊距（ie瀏覽器默認打印邊距） */
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;
}
}
- 避免某行文字斷裂：(注：2019年11月20日補充)
@page{
table{
page-break-inside: avoid;
}
}
-
orphans設置當元素內(nèi)部發(fā)生分頁時必須在頁面底部保留的最少行數(shù)。 -
widows設置當元素內(nèi)部發(fā)生分頁時必須在頁面頂部保留的最少行數(shù)。
比如:
@media print {
p {
widows: 2;/*頂部2行*/
orphans: 3; /*底部3行*/
}
}
至于頁眉頁腳的設置，css的方式可以參考此文打印樣式設計，只是需要調(diào)用三方的Prince。js的方式，目前就發(fā)現(xiàn)Webbrowser控件方式（ie10以下才行），可參考此文JS實現(xiàn)瀏覽器打印、打印預覽
至于從服務器端著手的方式可自行去搜索相關資料。
其他
- 對于頁面上有顯示而不想打印的內(nèi)容,可以將其display設置為none來避免打印。
- 需要打印的內(nèi)容盡量避免float,有些瀏覽器不會正確的打印浮動的內(nèi)容。
可以調(diào)用window.print()函數(shù)來打印當前頁面。 - 分頁打印或換頁打印：page- break-before和page-break-after CSS屬性并不會修改網(wǎng)頁在屏幕上的顯示，這兩個屬性是用來控制文件的打印方式。每個打印屬性都可以設定4種設定值：auto、always、left和 right。
相關參數(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 樣式
