原來前端網頁列印，不是只要 window.print() 就好了
Outline
* 使用情境
* 實作
- Step1：設定 @media print
- Step2：設定 @page
* 身爲開發者要知道的 debug 模式
* 後記使用情境
在最近的接案中，案主需要在後台列印出客製化商品的明細，開心的下了 window.print() 語法後，發現顏色不見以外，我的表格也被切成一半了！大家可以試試看，在不同的網站下，右鍵按下列印，可能會看到網站走山的樣子！搜尋資料後，才知道列印功能是需要額外設定的！
接著我們就用下面這個版面，來示範如何設定列印功能吧！
網頁內容包含：
- 人員名單表格
- 五張 media card
- Pagination (分頁切換）
當我按下列印後：
可以發現有幾件需要解決的事情：
- 剛剛在表格中對人員的顏色註記不見了
- 第四張 media card 被分頁切割了
- 不想要印出 Pagination
接著我們就來看看相關設定吧！
實作
Step1：設定@media print
media 最常被使用在製作 RWD 切版時，用 screen 辨別裝置大小，但它其實還可以辨別列印狀態。我們可以設置 @media print，告知瀏覽器你想要的列印設定。
針對上述問題的第一點(表格顏色消失)，介紹給大家 print-color-adjust 這個屬性，此屬性用以設定瀏覽器列印背景顏色時的行爲，此屬性有兩個比較重要的參數：
- economy（默認值）：允許瀏覽器自動調整
- exact：使用你設定好的樣式顏色
程式碼如下(也可以針對對象設定，不要使用 * )
效果如下，顏色出現了。
針對上述問題第二點(media card 被分頁切割)，介紹一下重要的三個屬性：
這三個屬性可以設定元素跟分頁斷點之間的關係，可以利用這些屬性達成強迫元素前後換頁等效果，詳細內容可以看 MDN 說明。在此次的範例中，我們需要第三個屬性，元素內容中間，不能被換頁。
程式碼如下，設定一個 class noBreak 給不想被換頁的元素。
效果如下，media card 不會中間換頁了。
針對上述問題第三點(不想要印出 Pagination)，要配合我們熟悉的屬性 display，增加一個 class noPrint，並設定 display 爲 none，使它在列印條件下消失。
程式碼如下，除了 Pagination 以外，其他在列印時，不想看見的內容也可以一律加上 class noPrint。
效果如下，原本右下角的 Pagination 消失了。
在這次接案的實作過程中，遇到列印內容並非在網頁操作下所看到的內容，這時可以一樣用 display 設定解決。
把列印要用的切版切好之後，在正常操作先隱藏起來，再到 @media print 設定相對應的 class，display 設回可以看見的 block。相反的，原本網頁內容是不想被列印出來的，相反操作就可以了。
Step2：設定@page
利用 @ page 可以設定紙張配置。有兩個比較常用的屬性：
- size：指定目標紙張寬高度或是通用尺寸(A4、A5)、以及頁面方向(portrait / Landscape。
- margin：利用 margin 設定邊距，亦可以利用 css 選擇器，選擇第一頁。
如下程式碼示範：
debug 模式
在 Chrome 中，有提供開發模式，身爲開發者，當然要使用開發模式來進行開發囉。
檢查 -> 右上角三個點點 -> More tools -> Rendering
Rendering 拉到下方可以選擇 CSS Media Type，選擇 print。
選擇 print 後，就可以在網頁中看到列印後的樣貌了，這樣開發是不是方便多了呢:)
後記
這次接案過程，沒有遇到太複雜的列印要求，先跟大家分享簡單的基礎操作，下次遇到比較複雜的需求，再寫個 part2 吧。透過接案了解列印的世界，挺好的，感覺長大了一點點:)
