關於 @media print

前陣子,在工作上碰到客戶要列印網頁的需求,想說大概 window.print(); 問題就可以解決。但後來發現轉 PDF 列印出來的東西,都不是他們要的或是看起來根本莫名其妙🙄。
一查資料才發現,原來有 @media print 這個屬性。

既然查到了就代表可以解決,但我在幾個地方碰到困難,也不是解決不了,就是需要點耐心。

  1. background-image無法正常顯示。
  2. @media print 即使設定好,呈現出來還是跟預期不一樣。
  3. 畫面是否換頁的問題,切到圖文的狀況。
  4. 展開與收合資訊,列印模式需要強制顯示。
  • 不是每一頁都需要特地設定 @media print
    因為我們並不會想要把一個網站的全部頁面都印下來,通常有需要的會是:機票訂購的詳細資訊、行程訂購的詳細資訊…等等。
  • 我自己認為最不需要出現的,就是 Header、Nav、Footer、Back to top…除非,上面有重要的客服聯絡資訊,不然在列印的排版上,不必出現。
  • 展開與收合的資訊,如果不重要可以隱藏;反之,需要設定顯示全部。
    display:none; 這時候就是你的好朋友啦!
  • 分頁的選項(Pagination)需隱藏。
    不知道是什麼的話,可以搜尋 Pagination
  • 不建議使用背景圖,有需要建議直接寫在 HTML <img> 裡面。
  • 如果要印出連結,可以這樣寫:
a:after {
content: “ (“ attr(href) “) “;
}
// 這樣寫會是完整的網址
a[href^="http://"]:after {
content: " (" attr(href) ") ";
}
  • 取消浮動元素,或是將其設定為不顯示

簡單來說,就是平時要列印網頁上的資訊,都會先存成 PDF 檔案。
這個功能的好處是,讓你可以不用一直滑鼠右鍵→列印,確認轉檔的 PDF 畫面。而是像平時切版一樣,可以透過更改 CSS 即時調整畫面。

不過,這個功能也不是百分之百就是了,最後還是要實際的測試一次。
就跟切手機版的時候,明明在開發者工具裡面看都沒問題,實機測試卻跑版的問題一樣。

STEP 01. 打開你的 Console(Windows 是 F12)。
STEP 02. 按下 Ctrl+Shift+P,就會出現一個功能列表。
STEP 03. 輸入 Show Rendering,就會看到畫面上多了 Rendering 的頁籤。
STEP 04. 找到 Emulate CSS media type,選擇 print。
Emulate 是仿真的意思,下面有一排小字說明:「Forces media type for testing print and screen styles」,簡單來說就是方便你在電腦上去設定列印(列印的 PDF)的排版樣式。

STEP 02
STEP 03
STEP 04
  • @media print{…} 列印樣式,列印的時候才會呼叫裡面的 CSS 出來做事。
  • @page{…} 設定紙張配置-大小、方向、邊界。
    - 通常會設定的單位是 cm 或 mm,也可以直接寫 A4。
    - 因為列印的時候需要考慮紙張跟內容的間距,就可以用 margin 直接指定邊界。
    -可以特別指定某一頁:@page:first
@page{
margin: 1cm;    /*紙張邊界*/
size:210mm 148mm; /*列印紙張大小*/
/*或是這樣寫*/
size: A4 portrait; /*A4 大小,直式*/
size: B5 lanscape; /*B5 大小,橫式*/
}
  • 避免圖片或段落斷掉:page-break-inside: avoid;
    如果是圖片的話,盡量包在 <p></p> 裡面,因為 <img> 沒有效果。
p {
page-break-inside: avoid;
}
  • 控制換頁設定:這個 CSS 屬性有很多值可以設定,請參考 MDN 文件
page-break-after: always;
page-break-before:always;
  • 強制顯示背景圖片:-webkit-print-color-adjust: exact !important;
  • 展開與收合的資訊(Print Hide Content with Toggle):
    - 先把 toggle 的符號 display:none;
    - 再把被隱藏起來的內容強制 display:block;
  • 引用自「關於 media print 的二三事…」的通用設定:

題外話,覺得 Chrome 的功能還真多,只是我們通常都只會部分的功能。
如果有任何問題也歡迎留言討論,這些都是彙整自己搜尋到的資料。

參考資料:
關於 media print 的二三事…
Google 開發者官方文件:說明 print-preview
原來前端網頁列印,不是只要 window.print() 就好了
How to print your HTML with style

正往前端工程師之路邁進!