
uniapp打印功能实现
要实现的需求是uniapp打包的Android APP 安装到商米一体机里面(一体机含有内置打印机),在用户支付成功后自动打印小票,uniapp没有直接打印的方法,要想和打印机联动需要借助第三方的东西,于是我倒uniapp的插件应用市场搜索打印插件,终于找到了一个免费好用的插件(打印的内容位置设置只有左、中、右三种效果,如果要往里一点,可以在文字前面加空格,一个空格占位一个字符,一个中文汉字占位2
·
要实现的需求是uniapp打包的Android APP 安装到商米一体机里面(一体机含有内置打印机),在用户支付成功后自动打印小票,uniapp没有直接打印的方法,要想和打印机联动需要借助第三方的东西,于是我到uniapp的插件应用市场搜索打印插件,终于找到了一个免费好用的插件(商米打印插件),里面有关于打印的基础用法,每次我测试打印效果都是打包拷到U盘然后到商米一体机安装测试;
插件安装使用方法如下:
例如我在test.vue页面打印东西,在这个页面引入打印插件进行打印就行了,
<template>
<view>
<button class="btn" @click="btnclick">点击测试打印</button>
</view>
</template>
<script>
const print = uni.requireNativePlugin('Sunmi-Print-Inner'); //在页面引入打印插件
var isConnect = false; //打印是否已连接判断
export default {
data() {
return {
startres:"",
lianjie:"",
riqi:"2023年05月10",
list:[
{f1:'某某某中心小学食堂',f3:"2023-05-13 12:22:33",f5:"0.01",f4:"张三"},
{f1:'某某某中心小学食堂',f3:"2023-05-13 12:22:33",f5:"0.01",f4:"李四"},
],
}
},
methods: {
btnclick(){
this.start()
},
start() {
let that=this
print.connect(res => {
isConnect = res.connect == "hello"
that.print();//打印
})
},
print() {
let that=this
if(isConnect){
this.lianjie="isConnect连接成功,可以进行打印了"
//打印小票
/*print.printText({
text:"商米打印测试",
align:1,
size:30,
bold:true,
// underline:true,
// compact:true,
skip:true
})
//空白行分割之前打印内容(类似走空白)
print.printDividingline({
style:"4",
height:"10"
}),
//按列打印一行简单的内容,每列分别居左、居中、居右
print.printColumnsText({
texts:["一", "二二", "三三三"],
lengths:[10, 10, 10],
aligns:[0, 1, 2]
})
//虚线分割线
print.printDividingline({
style:"3",
height:"3"
}),
//打印网络端的图片logo
print.printBitmap({
url:"http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1607/06/c3/23806812_1467754402821_1024x1024.jpg",
align:1
})
//空白行分割之后的打印内容(类似走空白)
print.printDividingline({
style:"4",
height:"10"
}),
*/
let list=that.list
let riqi=that.riqi
for(let i=0;i<list.length;i++){
print.printDividingline({
style:"4",
height:"50"
})
print.printText({
text:list[i].f1,
align:1,
size:32,
bold:true,
})
print.printDividingline({
style:"4",
height:"20"
})
print.printText({
text:" 支付时间:"+list[i].f3,
align:0,
size:24,
})
print.printDividingline({
style:"4",
height:"10"
})
print.printBitmap({
path:"/static/jiucanquan.png",
align:1
})
print.printDividingline({
style:"4",
height:"10"
})
print.printText({
text:" 金额:"+list[i].f5+"元",
align:0,
size:24,
})
print.printDividingline({
style:"4",
height:"10"
})
print.printText({
text:" 就餐日期:"+riqi,
align:0,
size:24,
})
print.printDividingline({
style:"4",
height:"10"
})
print.printText({
text:" 就餐人员:"+list[i].f4,
align:0,
size:24,
})
print.printDividingline({
style:"4",
height:"50"
})
print.printText({
text:"当日有效 过期作废",
align:1,
size:28,
})
print.printDividingline({
style:"4",
height:"6"
})
print.printText({
text:"教体系统食堂财务平台",
align:1,
size:28,
})
//空白行分割之前打印内容(类似走空白)
print.printDividingline({
style:"4",
height:"60"
})
print.printDividingline({
style:"4",
height:"60"
})
print.printDividingline({
style:"4",
height:"30"
})
//虚线分割线
print.printDividingline({
style:"3",
height:"3"
})
//切纸
print.cutPaper()
}
that.over() //最后关闭打印
}
},
over() {
print.disconnect()
}
}
}
</script>
<style>
</style>
打印的效果如下:
打印的内容位置设置只有左、中、右三种效果,如果要往里一点,可以在文字前面加空格,一个空格占位一个字符,一个中文汉字占位2个字符, 如果要打印复杂的样式,可以截个图打印为图片。
更多推荐
所有评论(0)