從瀏覽器中列印到打印機或PDF文件時,我們提供了一些使用CSS的提示。
儘管我們越來越多地盯著屏幕,但列印仍然很重要。
即使是博客文章。我記得在2009年的某個時候,我遇到一個人告訴我,他讓他的個人助理打印我發布的每篇博客文章(是的,我詫異地看了一會兒)。絕對出乎意料。
我通常查看列印的主要用例是將內容列印為PDF。我可能在瀏覽器內創建了一些東西,然後希望它以PDF方式保存。
瀏覽器讓這變得非常容易,Chrome在嘗試列印文檔且沒有可用打印機時,將默認設置為“保存”,而Safari則在菜單欄中提供了一個專用按鈕。
打印CSS
在列印時,您可能希望隱藏文檔的某些部分,例如底部、頁眉、側邊欄。
也許您還希望在列印時使用不同的字體,這是完全合理的。
如果您有一個用於打印的大型CSS,最好使用單獨的文件來處理。瀏覽器只在列印時下載該文件:
<link rel="stylesheet"
src="print.css"
type="text/css"
media="print" />
CSS @media print
除了上面的方式,還可以使用媒體查詢(media queries)。您可以在此塊中添加的任何內容都只會套用於列印的文檔中:
@media print {
/* ... */
}
鏈接
HTML之所以偉大,是因為它具有鏈接功能。這就是為什麼它被稱為超文本的原因。當我們列印時,可能會丟失很多信息,這取決於內容。
CSS提供了一種很好的解決方法,即編輯內容,在<a>
標籤文本後附加鏈接,使用以下方式:
@media print {
a[href\*='//']:after {
content:" (" attr(href) ") ";
color: $primary;
}
}
我將目標定位到僅外部鏈接a[href*='//']
。因為我可能還有用於導航和內部索引的內部鏈接,這在大多數用例中都不起作用。如果您希望也列印內部鏈接,只需使用以下方式:
@media print {
a:after {
content:" (" attr(href) ") ";
color: $primary;
}
}
頁面邊距
您可以為每個頁面添加邊距。針對紙張列印,cm
或 in
是一個很好的單位。
@page {
margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 2cm;
margin-right: 2cm;
}
您還可以使用@page
僅針對第一頁進行設置,使用@page :first
,或僅針對左和右頁面進行設置,使用 @page :left
和 @page: right
。
分頁
您可能希望在某些元素之後或之前添加分頁。使用page-break-after
和page-break-before
:
.book-date {
page-break-after: always;
}
.post-content {
page-break-before: always;
}
這些屬性接受多種值。
避免在中間斷裂圖像
我在使用Firefox時遇到過這個問題:默認情況下,圖像被中間切斷,並繼續放在下一頁。這也可能發生在文本上。
使用以下方式:
p {
page-break-inside: avoid;
}
將您的圖像包裹在p
標籤中。在我的測試中,直接對img
進行定位並不起作用。
這也適用於其他內容,不僅僅是圖像。如果您注意到某些內容在您不希望的地方被切斷,請使用此屬性。
PDF大小
使用Chrome嘗試將具有400多頁帶有圖像的PDF列印時,最初生成的文件大小超過100MB,儘管圖像的總大小並沒有那麼大。
我嘗試了Firefox和Safari,它們的大小都不到10MB。
經過一些實驗,我發現Chrome有3種將HTML列印為PDF的方式:
- ❌ 不要使用系統對話框列印
- ❌ 不要點擊“在預覽中打開PDF”
- ✅ 相反,點擊Chrome打印對話框中的“保存”按鈕
使用這種方式生成的PDF更快,且大小更小。
調試列印效果
Chrome DevTools提供了模擬打印布局的功能:
打開面板後,將渲染模擬更改為print
: