<![CDATA[A.PAO designSTUDIO BLOG]]> https://blog.apao.idv.tw/index.php zh-tw https://blog.apao.idv.tw/post// <![CDATA[Bo-Blog 金流插件收據列印方式與CSS調整]]> apao <apao@www.apao.idv.tw> Mon, 21 Dec 2020 00:08:05 +0000 https://blog.apao.idv.tw/post// 我們製作的Bo-Blog 金流插件也有個列印收據的功能，為符合客戶需求，客戶因為有許多收據單，希望能夠不列印收據表格，把需要的文字資料列印出來。針對這個選項，介紹一下我們在金流插件中的選項與列印功能。

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

▼後台中的列印
點擊在新視窗中瀏覽此圖片
▼Chrome中的列印選項，不想印背景卻出現背景
點擊在新視窗中瀏覽此圖片
▼Firefox中可能的狀況，出現不需要的網址、頁數等資訊
點擊在新視窗中瀏覽此圖片

▼Chrome中的列印選項（更多選項->背景圖形->取消選項）
就可以不列印背景圖片
點擊在新視窗中瀏覽此圖片
▼Firefox中的列印選項（瀏覽器 列印->頁面設定->邊界與頁首/頁尾->空白）
點擊在新視窗中瀏覽此圖片

另外在程式端為了盡量減低使用者出差錯，必須盡量事前設定好讓使用者不需要再設定的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://www.w3.org
簡中
http://lon.im/
Tags - , , , , , , ]]> https://blog.apao.idv.tw/post//#blogcomment <![CDATA[[評論] Bo-Blog 金流插件收據列印方式與CSS調整]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 https://blog.apao.idv.tw/post//#blogcomment