小票列印頁面

2022-03-31 07:56:59 字數 4728 閱讀 2216

列印小票頁面，效果圖：

css**及html如下：

doctype html


>


<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


meta 


name


="viewport"


content


="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"


/>


<


title


>小票列印


title


>


<


style 


type


="text/css"


>*h1


h3.left


.right


.clearfix


ul.print_container


.section1


.section2 label


.section3 label


.section4


.section4 .total label


.section4 .other_fee


.section5 label


style


>


head


>


<


body 


style


="background-color:#fff;"


>


<


div 


class


="print_container"


>


<


h1>給顧客專用


h1>


<


span


>**************************


span


>


<


div 


class


="section1"


>


<


h3h3


>


<


h3h3


>


div>


<


span


>**************************


span


>


<


div 


class


="section2"


>


<


label


label


>


<


label


>訂單備註：1111


label


>


div>


<


span


>**************************


span


>


<


div 


class


="section3"


>


<


label


>訂單編號：567890


label


>


<


label


label


>


div>


<


span


>**************************


span


>


<


div 


class


="section4"


>


<


div 


style


="border-bottom: 1px solid #dadada;"


>


<


table 


style


="width: 100%;"


>


<


thead


>


<


tr>


<


td width


="60%"


>選單名稱


td>


<


td width


="20%"


>數量


td>


<


td width


="20%"


>金額


td>


tr>


thead


>


<


tbody


>


<


tr>


<


td>公尺飯


td>


<


td>2


td>


<


td>28.00


td>


tr>


<


tr>


<


td>公尺飯


td>


<


td>2


td>


<


td>28.00


td>


tr>


<


tr>


<


td>公尺飯


td>


<


td>2


td>


<


td>28.00


td>


tr>


tbody


>


table


>


div>


<


div 


class


="other_fee"


>


<


div 


class


="canh"


>


<


label 


class


="left"


>餐盒費


label


>


<


label 


class


="right"


>0


label


>


<


div 


class


="clearfix"


>


div>


div>


<


div 


class


="peis"


>


<


label 


class


="left"


>配送費


label


>


<


label 


class


="right"


>0


label


>


<


div 


class


="clearfix"


>


div>


div>


<


div 


class


="manj"


>


<


label 


class


="left"


>立減優惠


label


>


<


label 


class


="right"


>0


label


>


<


div 


class


="clearfix"


>


div>


div>


div>


<


div 


class


="total"


>


<


label 


class


="left"


>總計


label


>


<


label 


class


="right"


>39


label


>


<


div 


class


="clearfix"


>


div>


div>


<


div 


style


="text-align: right;"


>


<


label


>顧客已付款


label


>


div>


<


span


>**************************


span


>


div>


<


div 


class


="section5"


>


<


label


>姓名：小花


label


>


<


label


label


>


<


label


label


>


div>


<


span


>**************************


span


>


div>


body


>


html


>

小票列印頁面

列印小票頁面，效果圖 css 及html如下 doctype html html head meta charset utf 8 meta name viewport content width device width,initial scale 1.0,user scalable no,mini...

lodop 小票排版 Lodop列印小票

web列印控制項lodop 預覽 varlodop 宣告為全域性變數 function prn1 preview 批量列印相同內容可以用份數 lodop getlodop lodop.print init lodop.set print pagesize 1,300,500,lodop.set pr...

vue electorn列印小票

在主線程獲取裝置已連線的印表機列表 import from electron const window newbrowserwindow 監聽獲取印表機列表事件 ipcmain.on getprinterlist event import from electron export default e...