/

如何以帶有風格的形式列印您的HTML文件

如何以帶有風格的形式列印您的HTML文件

從瀏覽器中列印到打印機或PDF文件時，我們提供了一些使用CSS的提示。

儘管我們越來越多地盯著屏幕，但列印仍然很重要。

即使是博客文章。我記得在2009年的某個時候，我遇到一個人告訴我，他讓他的個人助理打印我發布的每篇博客文章（是的，我詫異地看了一會兒）。絕對出乎意料。

我通常查看列印的主要用例是將內容列印為PDF。我可能在瀏覽器內創建了一些東西，然後希望它以PDF方式保存。

瀏覽器讓這變得非常容易，Chrome在嘗試列印文檔且沒有可用打印機時，將默認設置為“保存”，而Safari則在菜單欄中提供了一個專用按鈕。

Safari導出PDF

打印CSS

在列印時，您可能希望隱藏文檔的某些部分，例如底部、頁眉、側邊欄。

也許您還希望在列印時使用不同的字體，這是完全合理的。

如果您有一個用於打印的大型CSS，最好使用單獨的文件來處理。瀏覽器只在列印時下載該文件：

1
2
3
4
<link rel="stylesheet"
 src="print.css"
 type="text/css"
 media="print" />

CSS @media print

除了上面的方式，還可以使用媒體查詢（media queries）。您可以在此塊中添加的任何內容都只會套用於列印的文檔中：

1
2
3
@media print {
  /* ... */
}

鏈接

HTML之所以偉大，是因為它具有鏈接功能。這就是為什麼它被稱為超文本的原因。當我們列印時，可能會丟失很多信息，這取決於內容。

CSS提供了一種很好的解決方法，即編輯內容，在<a>標籤文本後附加鏈接，使用以下方式：

1
2
3
4
5
6
@media print {
 a[href\*='//']:after {
 content:" (" attr(href) ") ";
 color: $primary;
 }
}

我將目標定位到僅外部鏈接a[href*='//']。因為我可能還有用於導航和內部索引的內部鏈接，這在大多數用例中都不起作用。如果您希望也列印內部鏈接，只需使用以下方式：

1
2
3
4
5
6
@media print {
 a:after {
 content:" (" attr(href) ") ";
 color: $primary;
 }
}

頁面邊距

您可以為每個頁面添加邊距。針對紙張列印，cm 或 in 是一個很好的單位。

1
2
3
4
5
6
@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：

1
2
3
4
5
6
7
.book-date {
 page-break-after: always;
}

.post-content {
 page-break-before: always;
}

這些屬性接受多種值。

避免在中間斷裂圖像

我在使用Firefox時遇到過這個問題：默認情況下，圖像被中間切斷，並繼續放在下一頁。這也可能發生在文本上。

使用以下方式：

1
2
3
p {
 page-break-inside: avoid;
}

將您的圖像包裹在p標籤中。在我的測試中，直接對img進行定位並不起作用。

這也適用於其他內容，不僅僅是圖像。如果您注意到某些內容在您不希望的地方被切斷，請使用此屬性。

PDF大小

使用Chrome嘗試將具有400多頁帶有圖像的PDF列印時，最初生成的文件大小超過100MB，儘管圖像的總大小並沒有那麼大。

我嘗試了Firefox和Safari，它們的大小都不到10MB。

經過一些實驗，我發現Chrome有3種將HTML列印為PDF的方式：

  • ❌ 不要使用系統對話框列印
  • ❌ 不要點擊“在預覽中打開PDF”
  • ✅ 相反，點擊Chrome打印對話框中的“保存”按鈕

在Chrome中正確的打印方式

使用這種方式生成的PDF更快，且大小更小。

調試列印效果

Chrome DevTools提供了模擬打印布局的功能：

啓動Chrome DevTools渲染

打開面板後，將渲染模擬更改為print：

將渲染更改為打印