goTOP
December 21, 2020

Bo-Blog 金流插件收據列印方式與CSS調整

| |
伺服器架設 心得 » BO-BLOG | 閱覽(196) | Posted by apao at 08:08
我們製作的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/
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我