2017-01-31
CSS 打印
簡(jiǎn)介
本文主要講解如何使用 CSS 控制打印樣式阎毅。
基本概念
使用 CSS 可以控制文檔如何正確的顯示在不同的媒介 (Media) 上获印。其中分頁(yè)媒介 (Paged Media) 蜜暑，不同于連續(xù)媒介 (Continuous Media)铜异，它可以控制文檔內(nèi)容败京，將其分隔至一個(gè)或多個(gè)不相關(guān)聯(lián)的頁(yè)面 (如：書(shū)没陡、幻燈片)蹲蒲。
頁(yè)面 (Page Sheet) 是物理介質(zhì) (如：紙張) 的表面番甩，它包含可打印區(qū)域 (Printable Areas) 和不可打印區(qū)域 (Non-printable Areas)。用戶(hù)代理可以調(diào)整文檔內(nèi)容的格式届搁，使其顯示在可打印區(qū)域缘薛。
頁(yè)面盒子 (Page Box) 是一個(gè)由長(zhǎng)邊 (Long Edge) 和短邊 (Short Edge) 組成的矩形。長(zhǎng)邊的方向決定了頁(yè)面朝向 (Page Orientation)卡睦，長(zhǎng)邊是垂直方向宴胧，則頁(yè)面朝向?yàn)榭v向 (Portrait Orientation)，反之為橫向 (Landscape Orientation)表锻。
CSS 打印無(wú)法指定文檔是否為雙面打印 (Duplex Printing)恕齐，是否雙面打印應(yīng)該通過(guò)用戶(hù)代理指定。不管是否雙面打印，CSS 打印總是包含左頁(yè)和右頁(yè) (分別通過(guò) :left, :right 指定) 。（或者說(shuō) CSS 打印假定所有文檔是雙面打诱崮怠）
頁(yè)面模型 (Page Model)
和 CSS 盒子模型一樣，頁(yè)面盒子模型由外邊距 (margin)追迟、邊框 (border)、內(nèi)邊距 (padding) 和 內(nèi)容區(qū)域 (content area) 構(gòu)成骚腥。
其中內(nèi)容區(qū)域和外邊距有著特殊的功能：
- 內(nèi)容區(qū)域也叫頁(yè)面區(qū)域 (Page Area)敦间，第一頁(yè)的頁(yè)面區(qū)域邊界構(gòu)成了文檔的初始的包含塊 (Containing Block)
- 頁(yè)面外邊距區(qū)域是透明的，環(huán)繞在頁(yè)面區(qū)域周?chē)Ｔ?CSS3 中廓块，可以用于創(chuàng)建頁(yè)眉和頁(yè)腳，詳見(jiàn)下文 頁(yè)面外邊距盒子
頁(yè)面進(jìn)度 (Page Progression)方向 是文檔被分隔后的頁(yè)面的排列方向契沫。比如：現(xiàn)代中文頁(yè)面進(jìn)度多是從左至右带猴；而古代中文的頁(yè)面進(jìn)度則相反⌒竿颍可以通過(guò)設(shè)置根元素 (root element) 的 direction 和 writing-mode 屬性來(lái)改變頁(yè)面進(jìn)度拴清。
頁(yè)面的“第一頁(yè)”是左頁(yè)還是右頁(yè)，可以由頁(yè)面進(jìn)度的方向決定会通，當(dāng)頁(yè)面進(jìn)度方向?yàn)閺淖笾劣視r(shí)口予，第一頁(yè)是右頁(yè)；反之為左頁(yè)涕侈。（事實(shí)上也可以通過(guò)設(shè)置根元素的 break-before 屬性來(lái)強(qiáng)制改變第一頁(yè)是左頁(yè)還是右頁(yè)）
引入打印樣式的三種方式
在 CSS 中使用 @media print
@media print {
body {
background-color: white;
}
img {
visibility: hidden;
}
a::after {
content: "(" attr(href) ")"; /* 所有鏈接后顯示鏈接地址 */
}
}
在 CSS 中使用 @import
@import url("my-print-style.css") print;
在 HTML 中使用 <link> 標(biāo)簽
<link rel="stylesheet" media="print" href="my-print-style.css">
在 @media print 或 my-print-style.css 中沪停，可以自由的修改大部分樣式。
使用 @page
使用打印媒介查詢(xún)可以自定義很多樣式，當(dāng)希望改變頁(yè)面大小木张、邊距等众辨，就需要用到 @page 了。頁(yè)面上下文 (Page Context) 中僅支持部分 CSS 屬性舷礼，支持的屬性有：margin鹃彻、size、marks妻献、bleed 以及頁(yè)面外邊距盒子等浮声，不支持的屬性將會(huì)被忽略。
頁(yè)面外邊距盒子 (CSS3)
注：常見(jiàn)瀏覽器都不支持該屬性旋奢，推薦使用 Prince
頁(yè)面的外邊距被分成了 16 個(gè)頁(yè)面外邊距盒子。每個(gè)外邊距盒子都有自己的外邊距然痊、邊框至朗、內(nèi)邊距和內(nèi)容區(qū)域。頁(yè)面外邊距盒子用于創(chuàng)建頁(yè)眉和頁(yè)腳剧浸，頁(yè)眉和頁(yè)腳是頁(yè)面的一部分锹引，用于補(bǔ)充信息，如頁(yè)碼或標(biāo)題唆香。
頁(yè)面外邊距盒子需要在 @page 下使用嫌变，使用起來(lái)和偽類(lèi)類(lèi)似，也包含 content 屬性躬它。
@page {
/* 頁(yè)面內(nèi)容區(qū)域底部添加一條 1px 的灰線(xiàn) */
@bottom-left, @bottom-center, @bottom-right {
border-top: 1px solid gray;
}
/* 頁(yè)腳中間顯示格式如 "第 3 頁(yè)" 的頁(yè)碼 */
@bottom-center {
content: "第" counter(page) "頁(yè)";
}
}
屬性
margin (CSS2.1)
margin 系列屬性（margin-top腾啥、margin-right、margin-bottom冯吓、margin-left 和 margin）用于指定頁(yè)面外邊距大小倘待。
在 CSS2.1 中，頁(yè)面上下文中只支持 margin 系列屬性组贺。而且因?yàn)?CSS2.1 的頁(yè)面上下文中沒(méi)有字體的概念凸舵，margin 系列屬性的值的單位不支持 em 和 ex。
@page {
size: A4 portrait;
margin: 3.7cm 2.6cm 3.5cm; /* 國(guó)家標(biāo)準(zhǔn)公文頁(yè)邊距 GB/T 9704-2012 */
}
size (CSS3)
size 屬性支持 auto失尖、landscape啊奄、portrait、<length>{1,2} 和 <page-size>掀潮。
- 默認(rèn)值為
auto菇夸，表示頁(yè)面大小和方向由用戶(hù)代理決定 -
landscape指定頁(yè)面為橫向，如果<page-size>沒(méi)有指定仪吧，大小則由用戶(hù)代理決定 -
portrait指定頁(yè)面為縱向峻仇，如果<page-size>沒(méi)有指定，大小則由用戶(hù)代理決定 -
<length>{1,2}表示指定頁(yè)面大小邑商，填寫(xiě)兩個(gè)值則分別指定頁(yè)面盒子的寬度和高度摄咆，填寫(xiě)一個(gè)值則同時(shí)指定寬度和高度凡蚜。在 CSS3 中，值的單位支持em和ex吭从，大小相對(duì)于頁(yè)面上下文中字體的大小 -
<page-size>也用于指定頁(yè)面大小朝蜘，等價(jià)于使用<length>{1,2}。常用的值有：A3涩金、A4谱醇、A5、B4和B5等步做，詳細(xì)尺寸請(qǐng)參考 ISO 216副渴。<page-size>可以與landscape或portrait組合同時(shí)指定頁(yè)面方向。
偽類(lèi)
頁(yè)面上下文也支持使用偽類(lèi)全度，其中支持的偽類(lèi)有：:left煮剧、:right、:first 和 :blank将鸵。
偽類(lèi) :left 和 :right
需要雙面打印時(shí)勉盅，通常需要將左頁(yè)和右頁(yè)設(shè)置不同的樣式（如頁(yè)邊距、頁(yè)碼位置）顶掉。這時(shí)左頁(yè)和右頁(yè)可以分別用 :left 和 :right 表示草娜。再次強(qiáng)調(diào)，通過(guò) :left 和 :right 設(shè)置左右頁(yè)面不同樣式痒筒，并不代表用戶(hù)代理會(huì)將頁(yè)面雙面打印
/* 通過(guò)分別設(shè)置左頁(yè)和右頁(yè)不同的左右頁(yè)面距宰闰，為裝訂邊留出更多的空間 */
@page :left {
margin-left: 2.5cm;
margin-right: 2.7cm;
}
@page :right {
margin-left: 2.7cm;
margin-right: 2.5cm;
}
偽類(lèi) :first
偽類(lèi) :first 用于匹配到文檔的第一頁(yè)。
@page :first {
margin-top: 10cm; /* 首頁(yè)上頁(yè)邊距設(shè)置為 10cm */
}
偽類(lèi) :blank
偽類(lèi) :blank 用于匹配文檔的空白頁(yè)簿透。
h1 {
page-break-before: left; /* 一級(jí)標(biāo)題強(qiáng)制分配到右頁(yè) */
}
@page :blank {
@top-center {
content: "這是空白頁(yè)";
}
}
注意议蟆，空白頁(yè)既可能是左頁(yè)，又可能是右頁(yè)萎战，設(shè)置左頁(yè)或右頁(yè)的樣式也會(huì)顯示在空白頁(yè)上咐容，如果不希望顯示在空白頁(yè)上，可以清除這些樣式蚂维。
h1 {
break-before: left;
}
@page :left {
@left-center {
content: "這是左頁(yè)";
}
}
@page :right {
@right-center {
content: "這是右頁(yè)";
}
}
@page :blank {
@left-center, @right-center {
content: none; /* 如果是空白頁(yè)則不顯示 */
}
}
分頁(yè)
page-break-before戳粒，page-break-after，page-break-inside (CSS 2.1)
用于控制元素之前虫啥、之后或之中是否分頁(yè)蔚约，沒(méi)有生成盒子的塊元素不會(huì)生效。
page-break-before涂籽、page-break-after 屬性支持 auto苹祟、always、avoid、left树枫、right直焙、recto 和 verso。
h2 {
page-break-before: always;
}
-
auto默認(rèn)值砂轻，表示既不強(qiáng)制分頁(yè)也不禁止分頁(yè) -
always奔誓、avoid表示在該元素之前（或之后）強(qiáng)制或禁止分頁(yè) -
left、right表示在該元素之前（或之后）強(qiáng)制分頁(yè)搔涝，使得下一頁(yè)出現(xiàn)在左頁(yè)或右頁(yè) -
recto厨喂、verso頁(yè)面進(jìn)度從左至右時(shí)，分別與right和left一致庄呈；反之與left和right一致
page-break-inside 屬性?xún)H支持 auto 和 avoid蜕煌，表示在元素內(nèi)允許或禁止分頁(yè)。
thead, tfoot {
display: table-row-group;
}
thead, tfoot, tr, th, td {
page-break-inside: avoid;
}
orphans诬留，windows (CSS 2.1)
orphans 和 windows 用于指定在頁(yè)面的底部或頂部斜纪，元素中允許剩余的最少行數(shù)，默認(rèn)為 2 行故响。
最佳實(shí)踐
- “白紙黑字”--避免不必要的背景顏色、加深文字顏色等
- 避免打印次要的內(nèi)容颁独，比如導(dǎo)航欄彩届、側(cè)邊欄等
- 鏈接后顯示鏈接地址
- 做好分頁(yè)，避免標(biāo)題誓酒、表格單元格等換行
示例：
@media print {
@page {
size: A4 portrait;
margin: 3.7cm 2.6cm 3.5cm;
}
h1 {
page-break-before: always;
}
h1, h2, h3, h4, h5, h6,
thead, tfoot, tr, th, td,
li {
page-break-inside: avoid;
}
body {
background-color: white;
color: black;
}
nav, aside {
display: none;
}
a::after {
content: "(" attr(href) ")";
}
thead, tfoot {
display: table-row-group;
}
}
https://lon.im/post/css-print.html
參考鏈接：
