uniapp打印功能实现

功能实现"/>

uniapp打印功能实现

要实现的需求是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=thisprint.connect(res => {isConnect = res.connect == "hello"that.print();//打印})          },print() {let that=thisif(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"}),//打印网络端的图片logoprint.printBitmap({url:".jpg",align:1})//空白行分割之后的打印内容（类似走空白）print.printDividingline({style:"4",height:"10"}),*/let list=that.listlet riqi=that.riqifor(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个字符， 如果要打印复杂的样式，可以截个图打印为图片。