如何使用樣式打印HTML

有關使用CSS從瀏覽器打印到打印機或PDF文檔的一些技巧

即使我們越來越注視屏幕，但打印仍然是一回事。

即使有博客文章。我記得2009年的某個時候，我遇到一個人，告訴我他在我發布的每篇博客文章上都打印他的私人助理（是的，我呆呆地呆了片刻。絕對出乎意料。

我研究打印的主要用例通常是打印為PDF。我可能會在瀏覽器中創建一些內容，並希望將其提供為PDF。

瀏覽器使此操作非常容易，Chrome在嘗試打印文檔且打印機不可用時將Chrome默認設置為“保存”，並且Safari在菜單欄中有一個專用按鈕：

Safari Export PDF

打印CSS

打印時可能要執行的一些常見操作是隱藏文檔的某些部分，例如頁腳，頁眉中的某些內容，側邊欄。

也許您想使用其他字體進行打印，這是完全合法的。

如果要打印的CSS較大，則最好使用單獨的文件。瀏覽器僅在打印時下載：

<link rel="stylesheet"
      src="print.css"
      type="text/css"
      media="print" />

CSS @media打印

先前方法的替代方法是媒體查詢。您在此塊中添加的任何內容：

@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打印”對話框中出現的“保存”按鈕

The right way to print in Chrome

這樣生成PDF的速度比其他兩種方法快得多，並且大小要小得多。

調試打印演示

Chrome DevTools提供了模擬打印佈局的方法：

Enable Chrome DevTools Rendering

面板打開後，將渲染仿真更改為print：

Change the render to print

免費下載我的CSS手冊