5，uniapp功能之—打印机，打印文本和二维码等，（佳博的打印机）

效果图：

思路：1，一个打印按钮，2点击按钮弹窗一个蓝牙模块，选择蓝牙进行连接，连接成功就直接进行打印了，3，打印的内容自己设置
项目结构：

上代码，打印机参数的js文件私信我发给你，(太多了)
1，打印按钮页面

<button type="default" @click="print">打 印</button>
<iip-gp-printer ref="printer"></iip-gp-printer>
<script>
import iipGpPrinter from '@/components/iip/iip-gp-printer/iip-gp-printer.vue';
import {printLabel} from '@/common/js/print/labelPrinter.js';
export default {
	components: {
		iipGpPrinter
	},
	methods:{
		print() {
			let labelContent = {
				cfName: '测试123',
				zyNumber: 'A231',
				qrcodeContent: '666',
			};
			printLabel(this.$refs.printer, labelContent);
		}
	}
}
</script>

2.蓝牙模块

<template>
	<view>
		<u-popup title="请连接打印机" v-model="showModel" mode="bottom" height="80%">
			<view class="content">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange"></text>
						蓝牙列表
						<u-loading mode="flower" :show="searching" size="36"></u-loading>
					</view>
					<view class="action">
						<u-button @click="searchDevice" v-if="!searching">搜索</u-button>
						<u-button @click="stopSearch" v-if="searching">停止搜索</u-button>
					</view>
				</view>
				<view class="cu-list menu sm-border">
					<view class="cu-item" v-for="(item, index) in bleDevices" :key="index"
						@click="connect(item.deviceId)">
						<view class="content">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import printKit from '@/common/js/kit/print/printKit.js';
	import bleKit from '@/common/js/kit/bluetoothKit.js';
	import {
		labelCommand
	} from '@/common/js/kit/print/labelCommand.js';
	export default {
		props: {
			canvasWidth: {
				type: Number,
				default: 70
			},
			canvasHeight: {
				type: Number,
				default: 130
			}
		},
		data() {
			return {
				searching: false,
				showModel: false,
				printing: false,
				bleDevices: [],
				deviceId: '',
			};
		},
		computed: {
			canvasStyle() {
				return {
					width: this.canvasWidth,
					height: this.canvasHeight
				};
			}
		},
		methods: {
			//展示搜索的蓝牙列表
			showBluetoothList() {
				this.showModel = true;
				this.searchDevice();
			},
			async print(width, height, generateContentFunction) {
				this.toPrint(() => {
					let command = new labelCommand(width, height);
					command.setGap(3);
					generateContentFunction(command);
					command.setPagePrint();
					printKit.sendData(command.getData());
					setTimeout(() => {
						uni.hideLoading();
					}, 2000);
				});
			},
			async toPrint(callback, tips = "打印中...") {
				let isInited = printKit.isInited();
				if (!isInited) {
					this.$u.toast('请连接蓝牙打印机');
					this.showModel = true;
					this.searchDevice();
				}
				await this.printInited();
				uni.showLoading({
					title: tips,
					mask: true
				});
				setTimeout(() => {
					callback();
				}, 300);
			},
			printInited() {
				return new Promise((reslove, rejct) => {
					let i = 0;
					let intervalId = setInterval(() => {
						if (printKit.isInited()) {
							clearInterval(intervalId);
							reslove();
							return;
						}
						// 防止死循环
						if (i++ > 1000) {
							clearInterval(intervalId);
							reject('打印机连接超时');
						}
					}, 500);
				});
			},
			async connect(deviceId) {
				try {
					await printKit.init(deviceId);
					// 缓存连接
					this.showModel = false;
					this.deviceId = deviceId;
				} catch (err) {
					this.deviceId = '';
					console.error(err);
					this.$u.toast('打印机连接失败');
				} finally {
					uni.hideLoading();
				}
			},
			async searchDevice() {
				this.searching = true;
				// 10s后自动关闭搜索
				setTimeout(() => {
					this.searching = false;
					bleKit.stopSearch();
				}, 10000);
				try {
					await bleKit.open();
					await bleKit.startSearch(devices => (this.bleDevices = devices));
				} finally {
					this.searching = false;
				}
			},
			stopSearch() {
				this.searching = false;
				bleKit.stopSearch();
			},
			async tryAutoConnect() {
				// 自动连接蓝牙
				let deviceId = this.deviceId;
				if (!deviceId) {
					return;
				}
				await bleKit.open();
				await this.searchDevice();
				// 用户已经操作选择了其它蓝牙
				if (this.deviceId != deviceId) {
					return;
				}
				// 当前能搜索到指定的设备
				if (this.bleDevices.some(e => e.deviceId == deviceId)) {
					this.connect(this.deviceId);
				}
			}
		},
		async created() {
			this.tryAutoConnect();
		}
	};
</script>

<style></style>

3，打印的内容

export function printLabel(printer, content) {
	printer.print(55, 60, command => {
		// 创建盒子
		command.setBox(5, 5, 120, 200);
		// 第一行
		command.setVerticalText(10, 8, '产妇姓名');
		command.setBar(36, 5, 0.5);
		command.setVerticalText(50, 8, content.name);
		// 分割线
		command.setBarHeng(5, 15, 60);
		// 第二行
		command.setVerticalText(10, 20, '住院号');
		command.setVerticalText(50, 20, content.hospitalNumber);
		// 分割线
		command.setBarHeng(5, 27, 60);
		// 二维码
		command.setQrCode(19, 30, content.qrcodeContent, 14);
		command.setVerticalText(10, 95, '日期');
		command.setVerticalText(25, 95, content.uploadTime);
	});
}

4，打印机的参数文件太多了。里面内容也很多。自己拿点击前往
📢没了，结束了，是不是很简单呐，如有问题，欢迎留言。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~