Introduction
這些年來其實鮮少遇到 print 相關的 task，恰巧隨著 Yahoo 奇摩拍賣 訂單列表的改版就遇到了兩個和 print 相關的 task。分別是
- 當 dialog 開啟的時候進行列印，僅列印 dialog 裡頭的 content。
- 列印非既有頁面本身的內容。
第一個可以在筆者先前撰文「Some Tips for Print Dialog Content」窺探一二，所以不再贅訴。今天將討論第二點的相關實作方式。
相關情境是這麼來著：
- 賣家來到訂單列表欲進行商品出貨。
- 選好欲進行出貨的訂單後，點擊列印出貨單，將 寄件人 / 收件人 以及訂單內容商品進行列印。
由於這些內容獨立於當前頁面資訊的呈現，因此如何完成這個需求變不是那般容易了～這也是本文想跟大家分享的要點所在。
Method 1： CSS media query > print
Developers 在 user 選完欲進行列印的訂單後，可以動態把對應的內容 append 到 DOM Tree 上，然後透過 media query > print 來進行頁面元素的遮掩，再 call window.print() 便可以單獨列印相關的內容。
如上面範例所示，當 user 按下 print 按鈕，我們會動態把內容塞到 .container-for-print 裡頭，然後動態 call window.print() 進行列印。由於 CSS media query 的設置，所以這些內容僅會在 print 模式下顯現，如此便可以達成我們需求。
Method 2：plug print content in new window
Method 1 展現了 CSS 精妙之處，但是有些 developer 有潔癖或是不想把 CSS 搞得太過複雜，便希望能把欲列印的資訊獨立出來，不要和當前的頁面混在一塊兒。這時候便可以考慮用這個方法了。
核心思想很簡單，就是開啟新視窗，然後組 content（html string）塞進去，最後透過 await 去等 window.print() 的操作，再把新開啟的視窗進行關閉。
Conclusion
透過以上兩種方式便可以列印獨立於當前頁面資訊的內容，各有自己的魅力，大家若有遇到類似的需求，便可以挑選最適宜自己情境的方式，希望本篇分享對大家都有所助益～