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=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个字符， 如果要打印复杂的样式，可以截个图打印为图片。