@media print 你是誰？

關於 @media print

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

@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