需求背景
最近项目上接到一个新的需求：实现一个在浏览器端通过连接蓝牙打印机打印文件的功能！
以下是关于这个需求的详细描述：
- 支持主流浏览器：如 Chrome、Firefox、Safari 等以及不同操作系统（如 Windows、macOS、Linux 等）。
- 蓝牙连接：用户能够通过浏览器自动搜索并连接到附近的蓝牙打印机。
- 文件打印：用户可以选择本地文件（如 PDF、Word、图片等格式）并通过蓝牙打印机进行打印。
- 用户界面：提供一个简洁明了的用户界面，方便用户选择打印机、上传文件和开始打印。
为了实现这个功能，我们将采用 Web Bluetooth API 技术方案：
Web Bluetooth API 是一个用于与蓝牙设备通信的 Web API，可以让我们在浏览器端直接与蓝牙打印机进行交互。
环境准备与权限获取
在使用 Web Bluetooth API 之前，请确保您的网站运行在支持该 API 的浏览器上（目前主要是 Chrome 和基于 Chromium 的浏览器）。
同时，用户需要授权网站访问蓝牙设备。这意味着您需要在网站中添加适当的 UI 提示，引导用户授权。
连接蓝牙设备
❗️Web Bluetooth API 规定，对于需要用户授权的操作，必须在用户有明确交互行为（例如点击按钮）发生时才能进行。这是为了保护用户隐私，防止自动化访问。
要连接蓝牙设备，首先需要使用 navigator.bluetooth.requestDevice()方法请求用户选择一个蓝牙设备。
这个方法接受一个 acceptAllDevices:true 参数，表示请求脚本可以接受所有蓝牙设备。
<!-- 按钮点击连接蓝牙 -->
<button id="connect" onclick="handleConnect()">连接蓝牙设备</button>function handleConnect() {
navigator.bluetooth
.requestDevice({
acceptAllDevices: true,
})
.then((device) => {
console.log("Device Name:", device.name);
console.log("Device ID:", device.id);
return device.gatt;
})
.then((server) => {
// 连接到设备并发现服务
})
.catch((error) => {
console.error("Error:", error);
});
}
点击配对按钮，可以获取到 Device Name 以及对应的 Device ID：
发现服务与特征
成功连接到蓝牙设备后，下一步是发现设备上的服务和特征。
首先，使用 connect() 方法连接到设备。
然后，调用 getPrimaryService() 方法获取指定的服务。
❗️ 注意：这里的 YOUR_SERVICE_UUID 占位符表示实际的服务 UUID。
server.connect()
.then(server => {
return server.getPrimaryService('YOUR_SERVICE_UUID');
})
.then(service => {
// 发现特征
})
.catch(error => {
console.error('Error:', error);
});读取写入数据
使用 readValue() 和 writeValue() 方法读取和写入特征值:
// 读取特征值
characteristic.readValue()
.then(value => {
console.log('Characteristic Value:', value);
})
.catch(error => {
console.error('Error:', error);
});
// 写入特征值
const encoder = new TextEncoder();
const data = encoder.encode('Hello, Bluetooth!');
characteristic.writeValue(data)
.then(() => {
console.log('Data written successfully');
})
.catch(error => {
console.error('Error:', error);
});这样一个简单的连接蓝牙设备并读写数据的功能案例就实现了，接下来就直接按照需求开干了，具体的实现这里不做过多的讲解了，感兴趣的小伙伴可以自己去动手尝试一下
参考连接：
- Web Bluetooth API：
https://developer.mozilla.org/en-US/docs/Web/API/Bluetooth
