December 21, 2020
我們製作的Bo-Blog 金流插件也有個列印收據的功能，為符合客戶需求，客戶因為有許多收據單，希望能夠不列印收據表格，把需要的文字資料列印出來。針對這個選項，介紹一下我們在金流插件中的選項與列印功能。
備註：因為每一家印表機功能與列印界線的問題，原始設定為另外一台雷射印表機，後來客戶搬家使用另外一台印表機，使用者設定被安裝驅動程式後改變，所以需要在使用者端調整。
▼後台中的列印
▼Chrome中的列印選項，不想印背景卻出現背景
▼Firefox中可能的狀況，出現不需要的網址、頁數等資訊
▼Chrome中的列印選項（更多選項->背景圖形->取消選項）
就可以不列印背景圖片
▼Firefox中的列印選項（瀏覽器 列印->頁面設定->邊界與頁首/頁尾->空白）
另外在程式端為了盡量減低使用者出差錯，必須盡量事前設定好讓使用者不需要再設定的CSS
▼除了將頁面顯示設定一般使用px，這時就可以針對A4紙來做設定，也可以使用cm來做設定，前提是在body的style要事前設定好margin、padding、border
orphans和widows用於指定在頁面的底部或頂部，元素中允許剩餘的最少行數，默認為2行。
▼對應列印上則使用@media print
▼針對客戶換印表機後做了多次修改的其中的筆記
更詳盡的參考資料：
英文
https://www.w3.org
簡中
http://lon.im/
備註：因為每一家印表機功能與列印界線的問題，原始設定為另外一台雷射印表機，後來客戶搬家使用另外一台印表機，使用者設定被安裝驅動程式後改變，所以需要在使用者端調整。
▼後台中的列印
▼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;
}
/*A4直印*/
size: A4 portrait;
/*列印範圍*/
margin: 0.5cm;
/*頂部行數*/
orphans:4;
/*頁尾行數*/
widows:2;
}
@page {
/*A4橫印*/
size: A4 Landscape;
/*列印範圍*/
margin: 0.5cm;
/*頂部行數*/
orphans:4;
/*頁尾行數*/
widows:2;
}
/*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) ")";
}
}
body{
/*不列印背景*/
background:none;
/*不超頁列印*/
page-break-inside:avoid;
}
a::after {
/*顯示列印網址*/
content: "(" attr(href) ")";
}
}
▼針對客戶換印表機後做了多次修改的其中的筆記
更詳盡的參考資料：
英文
https://www.w3.org
簡中
http://lon.im/
找到 U2SPACE 網站讀取速
Bo-Blog Ver 2.1.
0 Comment(s)
