Introduction
一直以來從沒把 web print 放在心上，或者說一直以為 browser 怎麼呈現，列印的時候就會忠實呈現。直到最近需求來到才知道原來不是這麼一回事，可以說水深、眉角多，要做好真的得下一番功夫。
先聊聊需求好了，適逢服務（Yahoo 奇摩拍賣）訂單改版，所以筆者趁此機會有原先獨立的訂單列表以及訂單內容儂成一頁。
點擊上述畫面「明細」後，則用 dialog 的形式將該訂單內容內容做呈現。
這是一個再 common 不過的互動行為，當筆者按下列印後赫然發現：
怎麼預覽窗看到的樣子像是破版一般，一些透過 CSS 渲染的內容都丟失了～此外，dialog 由於是浮動，一但內容物超過 viewport block size，那麼就會有很詭異的列印效果（會根據頁面高度分頁，然後每頁都會有同樣內容的 dialog 呈現且內部內容無法完整攤開）。
對大多數賣家來說，他們會把訂單內容列印一份出來並夾放在商品包裹中，讓買家能夠清楚知曉該筆訂單明細。也就是說如果無法完整列印出 dialog 裡頭的內容勢必無法有效滿足 user 的需求。
經過反覆的實驗之後整理了一些小技巧要分享給大家。
Page Size
一般列印大多是 A4 portrait 進行頁面切割列印，如果想要自己調整 default 的 page size 的話，也可以透過 CSS 介入進行調試。
其實這也意味著定義了列印時的 viewport size 了，透過 media query 來設置 responsive web design 已是基本中的基本了，如果有做好的話，應該可以從列印預覽窗看到他掉到那個 range 的設置。
Make CSS render contents alive
列印時，default 會關閉 CSS render 的顏色與背景，可能是約定俗成的設置，避免印表機碳粉、墨水的損耗，實際上也有對應的 CSS 可以強制開啟喔！
可以針對想要 full print 的元件或者頁面加上 print-color-adjust: exact 即可。
此外，web component 的樣式渲染基本上都是獨立的 sandbox，如果有 CSS 渲染的內容且想讓它們可以被完整列印出來的話，建議把於 sdhadow DOM 中的 style 也加上該屬性。
media query > print
Web developers 可以透過 link 或者 media query > print 來針對 print 環境下進行樣式置換。筆者個人比較親睞透過 media query 來進行局部變更。
如此一來，當進行列印的時候便可以吃到我們設置好的 style sheet 或者 media query 樣式了。（上面的範例便是透過 media query，把 header / main / footer 藏掉。）
ENDLESS ⌘ + P
如果每次只能透過列印預覽窗觀看調適後的樣式也未免太辛苦了，這時候可以搭配 Chrome DevTools > Rendering。裡頭有個項目強製模擬成 print 的環境，自然就可以讓當前頁面吃到 print 相關的樣式，便無需不斷的 ⌘ + P 開啟列印預覽窗來看 render 後的樣子。
Adjust dialog style
如同開頭所述，筆者希望當 user 開啟訂單明細 dialog 的時候進行列印，可以完整列印出 dialog 中的內容就好。所以便可以透過 media query 進行相關的樣式調適。
從範例可以得知分別針對 position 以及 size 進行 rewrite，主要就是希望它不要浮動在頁面上並且能放滿整頁的形式進行呈現。所以分別調整了 position 以及定位的內容，另外也透過 overflow: visible 的設置讓系統不要出現 inner scroll 去包覆超出的內容。
另外要特別注意的是如果有針對 dialog 進行不同尺寸的變化時，亦要記得把屬性洗回你期待的樣子。
由於需求是希望只列印出訂單明細的內容就好，所以建議把其他不必要的元件都隱藏，避免列印時依照頁面高度列印出許多不必要的內容出來。如果有調整 dialog overlay 顏色的話也建議把它洗「白」，因為白色不會被列印出來。
完成以上設置後，按下列印後便可以發現不僅 CSS render 的內容都有完整呈現，列印的內容也僅僅是 dialog 放滿整頁後的樣子了，輕輕鬆鬆幾個步驟便能完成需求。
Conclusion
以上便是筆者調整 print 的點滴分享，可以說透過 CSS 便可以輕鬆完成需求，最後再幫大家 recap 一下：
- 透過 CSS 設置 page size
- 透過 CSS > print-color-adjust: exact 設置讓 CSS 渲染的 content 可以被列出來
- 使用 link[media=print] 或者 media query > print 來動態調整欲列印的樣式
- 搭配 Chrome > DevTools > Rendering 設置模擬 print 環境，輕鬆完成開發
希望本篇分享對大家都有所助益～