標題：Bo-Blog 金流插件收據列印方式與CSS調整
出處：A.PAO designSTUDIO BLOG
時間：Mon, 21 Dec 2020 08:08:05 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1385/

內容：
我們製作的Bo-Blog 金流插件也有個列印收據的功能，為符合客戶需求，客戶因為有許多收據單，希望能夠不列印收據表格，把需要的文字資料列印出來。針對這個選項，介紹一下我們在金流插件中的選項與列印功能。

備註：因為每一家印表機功能與列印界線的問題，原始設定為另外一台雷射印表機，後來客戶搬家使用另外一台印表機，使用者設定被安裝驅動程式後改變，所以需要在使用者端調整。

▼後台中的列印

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4066

▼Chrome中的列印選項，不想印背景卻出現背景

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4070

▼Firefox中可能的狀況，出現不需要的網址、頁數等資訊

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4074


▼Chrome中的列印選項（更多選項->背景圖形->取消選項）
就可以不列印背景圖片

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4071

▼Firefox中的列印選項（瀏覽器 列印->頁面設定->邊界與頁首/頁尾->空白）

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4075


另外在程式端為了盡量減低使用者出差錯，必須盡量事前設定好讓使用者不需要再設定的CSS
▼除了將頁面顯示設定一般使用px，這時就可以針對A4紙來做設定，也可以使用cm來做設定，前提是在body的style要事前設定好margin、padding、border
orphans和widows用於指定在頁面的底部或頂部，元素中允許剩餘的最少行數，默認為2行。
@page {
     /*A4直印*/
     size: A4 portrait;
     /*列印範圍*/
     margin: 0.5cm;
     /*頂部行數*/
     orphans:4;
     /*頁尾行數*/
     widows:2;
}

@page {
     /*A4橫印*/
     size: A4 Landscape;
     /*列印範圍*/
     margin: 0.5cm;
     /*頂部行數*/
     orphans:4;
     /*頁尾行數*/
     widows:2;
}

▼對應列印上則使用@media print
@media print {
body{
     /*不列印背景*/
     background:none;
     /*不超頁列印*/
     page-break-inside:avoid;
}
a::after {
     /*顯示列印網址*/
     content: "(" attr(href) ")"; 
}
}


▼針對客戶換印表機後做了多次修改的其中的筆記

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=4082


更詳盡的參考資料：
英文
https://www.w3.org
簡中
http://lon.im/


Generated by Bo-blog 2.1.1 Release