Web实现蓝牙打印及Webbluetooth的用法
2021/4/13 18:55:33
本文主要是介绍Web实现蓝牙打印及Webbluetooth的用法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在Web的项目中,前端界面往往会有一些打印功能,本身浏览器的打印功能也挺好用的,但是浏览器一般是输出到普通A4打印机,如果需要打印一些便签之类,需要用到蓝牙打印机,这时这个打印功能就无能为力了。幸好我发现了一个Webbluetooth的项目,这个项目也是一个谷歌官方发起的项目,实现网页对蓝牙的调用,目前Chrome系较高版本浏览器支持。
要使用Web蓝牙功能需要一个usb口的蓝牙适配器,可以在Chrome浏览器中输入"chrome://bluetooth-internals"查看蓝牙设备状态,该调试功能非常强大!
通过UUID可以查看到所有的蓝牙设备、service、Characteristics,以及读写蓝牙设备
蓝牙打印机连接上后不是发文本就能直接打印,而是要转换成打印指令,一般是通过ESC/POS通用打印指令传递打印指令的,就是说我们要输出的文本、二维码、图片等内容需要转换成ESC/POS指令。目前大多数蓝牙打印机都是支持ESC/POS指令的,指令可以看https://www.jianshu.com/p/dd6ca0054298 了解下,百度上还有专门详尽的指令集说明,不过我们不需要自己来写指令转换代码,我找到一个js库,很方便的实现了ESC/POS编码,https://www.npmjs.com/package/@freedom_sky/esc-pos-encoder
Webbluetooth如何应用,https://segmentfault.com/a/1190000018224699,这里有个文档简单说明。https://bluetooth.rocks/tweets/这个则是有案例,也可以把代码扒下来,我将它改写成一个模块
`
class BluetoothPrinter {
constructor() {
this._EVENTS = {};
this._CHARACTERISTIC = null;
this._QUEUE = [];
this._WORKING = false;
}
connect() { console.log('Requesting Bluetooth Device...'); return new Promise((resolve, reject) => { navigator.bluetooth.requestDevice({ filters: [{ services: ['000018f0-0000-1000-8000-00805f9b34fb'] }] }) .then(device => { console.log('Connecting to GATT Server...'); device.addEventListener('gattserverdisconnected', this._disconnect.bind(this)); return device.gatt.connect(); }) .then(server => server.getPrimaryService("000018f0-0000-1000-8000-00805f9b34fb")) .then(service => service.getCharacteristic("00002af1-0000-1000-8000-00805f9b34fb")) .then(characteristic => { this._CHARACTERISTIC = characteristic; resolve(); }) .catch(error => { console.log('Could not connect! ' + error); reject(); }); }); } print(command) { const maxLength = 100; let chunks = Math.ceil(command.length / maxLength); if (chunks === 1) { this._queue(command); } else { for (let i = 0; i < chunks; i++) { let byteOffset = i * maxLength; let length = Math.min(command.length, byteOffset + maxLength); this._queue(command.slice(byteOffset, length)); } } } _queue(f) { var that = this; function run() { if (!that._QUEUE.length) { that._WORKING = false; return; } that._WORKING = true; that._CHARACTERISTIC.writeValue(that._QUEUE.shift()).then(() => run() ); } that._QUEUE.push(f); if (!that._WORKING) run(); } addEventListener(e, f) { this._EVENTS[e] = f; } isConnected() { return !! this._CHARACTERISTIC; } _disconnect() { console.log('Disconnected from GATT Server...'); this._CHARACTERISTIC = null; if (this._EVENTS['disconnected']) { this._EVENTS['disconnected'](); } }
};
module.exports = BluetoothPrinter;
`
使用的时候直接require进来,在调用的过程中却总是出错
Could not connect! SecurityError: Failed to execute 'requestDevice' on 'Bluetooth': Must be handling a user gesture to show a permission request.
用必应查了一遍文章解决了这个问题https://web.dev/bluetooth/,原来出来安全性的考虑,一定需要用户交互才能使用Web蓝牙,就是说必须是通过点击按钮等用户行为才能有权限打开蓝牙,创建一个index.js
`let EscPosEncoder = require('esc-pos-encoder');
let BluetoothPrinter = require('./bluetooth-printer');
window.EscPosEncoder=new EscPosEncoder();
window.BluetoothPrinter = new BluetoothPrinter();
`
然后再创建index.html
`
` 用webpack打包运行,成功打印。这篇关于Web实现蓝牙打印及Webbluetooth的用法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行