如何使用樣式打印HTML

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


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

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

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

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

Safari Export PDF

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

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

如果要打印的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-afterpage-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手冊


更多CSS教程: