记录第一次使用H5的WebBluetooth完成蓝牙标签打印机的(踩坑)过程

第1步

首先第一步,调试环境必须是https的,由于浏览器的强制安全策略,本地可以采用localhost

第2步

然后,如果打印需要服务UUID(Service UUID)特征UUID(Characteristic UUID),否则无法通信,这里可以咨询厂家或者找官网或技术人员拿去,我是通过浏览器chrome://bluetooth-internals/#devices查询可用的UUID
在这里插入图片描述

第3步

然后查询所有蓝牙设备的配对 navigator.bluetooth.requestDevice

	const sppUuid = `xxxx-xxx-xx`// 打印机型号的uuid
	const device = await navigator.bluetooth.requestDevice({
		acceptAllDevices: true, // 不过滤蓝牙设备,接受所有蓝牙设备
		optionalServices: [sppUuid] // 打印机服务UUID
	});
	// 验证GATT可用性
	if (!device.gatt) {
		throw new Error('设备不支持GATT协议');
	}
	console.log('配对打印机名称:', device.name)
	const server = await device.gatt.connect();
	// console.log('server对象:', server)

第4步

获取服务server.getPrimaryService

	const service = await server.getPrimaryService(sppUuid);
	console.log('获取服务:',service)
	if (!service || service.length === 0) {
		throw new Error('未发现可用服务');
	}

第5步

获取特征对象service.getCharacteristics,同时需要保证其properties需要的权限(官方标注writeValue后续版本将会删除,必须用writeWithoutResponse

	// 保存特征对象供后续使用
	const characteristics = await service.getCharacteristics();
	if (!characteristics || characteristics.length === 0) {
		throw new Error('未发现可用特征对象');
	}
	characteristics.forEach(characteristic => {
		// console.log('特征:', characteristic.properties);
		// 需要配对一个有读写权限的特征对象
		if( characteristic.properties.writeWithoutResponse){
			this.characteristic = characteristic;
		}
	});
	console.log(this.characteristic)// 打印结果如下:

在这里插入图片描述

第6步

打印的字符串如果含有简体中文,必须使用GBK或者GB2312编码格式,同时使用 Uint8Array类型的数据,否则会报错

// TextEncoder默认且唯一支持的编码为 UTF-8,无法指定其他字符集, 打印机无法识别导致乱码
	const encoder = new TextEncoder();
	const textData = encoder.encode(str);
// 依赖第三方库iconv-lite,将字符串转换为GBK编码
	let textData = iconv.encode(printValue, 'GBK');

第7步

最后打印使用characteristic.writeValue,characteristic.writeValue 必须 返回 Uint8Array 类型数据

	// 分片发送数据(部分蓝牙设备限制单次发送长度)
	const chunkSize = 512;
	for (let i = 0; i < textData.length; i += chunkSize) {
		const chunk = textData.subarray(i, i + chunkSize);
		await characteristic.writeValue(chunk).then(()=>{
			console.log("写入成功,等待设备响应...")
		});
	}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值