CSS print 樣式
標(biāo)簽（空格分隔）： CSS
顯示器(screen)和打印機(jī)(printer)是兩種差別很大的設(shè)備,所以從瀏覽器里看到的頁面,打印出來也許和你看到的樣子有很大的差距。screen一般使用邏輯單位比如px,而打印機(jī)則應(yīng)該使用物理單位比如cm或in拿诸。我們常見的A4紙張大小在不同DPI的顯示器上顯示的大小是不同的甘改。因此如果要精確的控制打印效果就應(yīng)該使用print css，這是跨平臺(tái)兼容的標(biāo)準(zhǔn)谣光。不推薦使用瀏覽器插件方式實(shí)現(xiàn)打印。
web打印還有一種解決方式是生成pdf格式文件,客戶端下載來打印,這也是不錯(cuò)的一種打印方式,因?yàn)閜df本身就是一種打印標(biāo)準(zhǔn),可以做到精確控制芬为√呀穑可以使用jsPDF在客戶端動(dòng)態(tài)生成pdf,也可以在服務(wù)器端使用一些組件生成pdf后傳送給客戶端。當(dāng)然首選還是使用print css來實(shí)現(xiàn)打印媚朦。
引入print css
- 使用link標(biāo)簽就像通常在html頁面中引入樣式表一樣,不過附加一個(gè)額外的media屬性,如下面這樣:
html 代碼:
<link rel="stylesheet" href="print.css" media="print" />
表明print.css樣式表是用于打印的
- 使用@media規(guī)則可以在通用的樣式表中,使用@media規(guī)則指定樣式用于打印,比如這樣:
css 代碼:
@media print selector {...}
或者
css 代碼:
@media print { selector{ ... }}
- 使用@import規(guī)則使用@import規(guī)則在通用的樣式表中導(dǎo)入打印樣式表,有兩種形式,其本質(zhì)是一樣的氧敢。
css文件中:
css 代碼:@import url(print-style.css) print;
html文件中:
html 代碼:
<style type="text/css">@import url(print-style.css) print;</style>
使用link標(biāo)簽要比使用@import規(guī)則性能更好。
度量單位
顯示時(shí)一般使用px,em或pt等邏輯單位,但在打印時(shí)要使用物理單位,比如cm或in(英寸)询张。對(duì)于常見的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分辨率下,其對(duì)應(yīng)的像素尺寸大約為:
794px * 1123px
因?yàn)椴煌腄PI下,其對(duì)應(yīng)的像素尺寸是不同的,所以才要使用print css,使用物理單位來描述要打印的頁面,這樣打印效果就會(huì)一致了福稳。
@page規(guī)則(at-rule)
@page 規(guī)則用于指定打印頁面的一些屬性,包括紙張尺寸,方向,頁邊距,分頁等特性。其語法如下:
css 代碼:@
page :pseudo-class { size: A4 landscape; margin:2cm;}
其中偽類可以指定:
- page-break-before用于設(shè)置元素前面的分頁行為,可取值:
- auto默認(rèn)值瑞侮。如果必要?jiǎng)t在元素前插入分頁符的圆。
- always在元素前插入分頁符。
- avoid避免在元素前插入分頁符半火。
- left在元素之前足夠的分頁符越妈，一直到一張空白的左頁為止。
- right在元素之前足夠的分頁符钮糖，一直到一張空白的右頁為止梅掠。
- inherit規(guī)定應(yīng)該從父元素繼承 page-break-before 屬性的設(shè)置。
- page-break-after設(shè)置元素后的分頁行為店归。取值與page-break-before一樣阎抒。
- page-break-inside設(shè)置元素內(nèi)部的分頁行為。取值如下:
- auto默認(rèn)消痛。如果必要?jiǎng)t在元素內(nèi)部插入分頁符且叁。
- avoid避免在元素內(nèi)部插入分頁符。
- inherit規(guī)定應(yīng)該從父元素繼承 page-break-inside 屬性的設(shè)置秩伞。
比如:
css 代碼:
@media print { section {page-break-before: always;} h1 {page-break-after: always;} p {page-break-inside: avoid;}}
- orphans設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時(shí)必須在頁面底部保留的最少行數(shù)逞带。
- widows設(shè)置當(dāng)元素內(nèi)部發(fā)生分頁時(shí)必須在頁面頂部保留的最少行數(shù)欺矫。比如:
css 代碼:
@media print { p {orphans:3; widows:2;}}
其他
- 對(duì)于頁面上有顯示而不想打印的內(nèi)容,可以將其display設(shè)置為none來避免打印。
- 需要打印的內(nèi)容盡量避免float,有些瀏覽器不會(huì)正確的打印浮動(dòng)的內(nèi)容展氓。
- 可以調(diào)用window.print()函數(shù)來打印當(dāng)前頁面穆趴。
- 分頁打印或換頁打印：page- break-before和page-break-after CSS屬性并不會(huì)修改網(wǎng)頁在屏幕上的顯示遇汞，這兩個(gè)屬性是用來控制文件的打印方式未妹。每個(gè)打印屬性都可以設(shè)定4種設(shè)定值：auto、always空入、left和 right络它。其中Auto是默認(rèn)值，只有在有需要時(shí)执庐，才需設(shè)定分頁符號(hào) (Page breaks)。page-break-before若設(shè)定成always导梆，則是在遇到特定的組件時(shí)轨淌，打印機(jī)會(huì)重新開始一個(gè)新的打印頁。page- break-before若設(shè)定成left看尼，則會(huì)插入分頁符號(hào)递鹉，直到指定的組件出現(xiàn)在一個(gè)左邊的空白頁上。page-break-before若設(shè)定成 right藏斩，則會(huì)插入分頁符號(hào)躏结，直到指定的組件出現(xiàn)在一個(gè)右邊的空白頁上。page-break-after屬性會(huì)將分頁符號(hào)加在指定組件后狰域，而非之前媳拴。在下列程序中您將可以看到這些屬性的設(shè)定。
References:
[2]@page
