小票列印頁面

2021-09-08 19:14:08 字數 4728 閱讀 9179

列印小票頁面,效果圖:

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...