search

列印

書到用時方恨少

hashtag
使用時機

網頁除了提供螢幕使用外，通常還會應用在一些情境下：

  • 將目前看到的網頁列印下來

  • 將主要內容列印下來

這兩者的不同在於需不需要印出除了主要內容外的資訊。

hashtag
如何設定列印畫面

概念有點像是我們在上一個章節學的 CSS hack，只是這次的 hack 是要給列印出來的樣式使用。

首先，如果我們沒有做任何設定，列印就會依照我們當前看到的頁面列印，但是通常伴隨而來的問題是版面很容易就跑版。

要解決這個問題，我們先設定只有列印時才要套用的樣式，使用方式如下：

第一種方式：在 HTML 引入 CSS 時，設置 media 為 print
<link rel="stylesheet" media="print" href="css/print.css">

第二種方式：使用 CSS 媒體查詢
@media print {
    selector {}
}

這兩種方式都是列印時才會套用裡面的樣式，接著我們來看看可以設定些什麼。

hashtag
列印頁面配置

我們會使用 @page

關於寬高的地方，可以使用這個網站換算單位：https://pixelcalculator.com/enarrow-up-right 根據 DPI 的不同，螢幕單位 與 實際長度單位 的換算也不同。

頁與頁之間的斷點設置

  • 元素之前是否要分頁： page-break-before

  • 元素之後是否要分頁： page-break-after

  • 元素是否要分頁： page-break-inside

其他注意事項：

  • 字級單位使用 pt（但不確定會不會被無障礙機器 freego 掃出來，待驗證。）

  • 非必要內容使用 display: none 隱藏

  • <img> 寬度設為 max-width: 100%

  • 容器：寬度改為 100%、取消浮動、margin: 0

  • 連結網址直接列印出來，例如： a::after { content: "("attr(href)")"; }

  • 強制開啟背景圖片（因為瀏覽器的列印有時候預設會是關閉的）

hashtag
小結

其實列印的需求在實務上很常見，因為跟書面業務性質有關，只要是需要交紙本報告就有可能會用到，所以建議這個技巧還是可以好好學習。

hashtag
作業

如果你現在正在自製一個 UI 框架，請幫這個 UI 框架設定一個初始列印的 print.css

參考解答arrow-up-right

hashtag
參考連結

Previous瀏覽器 Hack 技巧Next動畫（未完成）

Last updated

Was this helpful?