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

article/2025/8/26 6:21:22

在这里插入图片描述

效果图：
在这里插入图片描述
思路：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);});
}