需求背景

最近项目上接到一个新的需求：实现一个在浏览器端通过连接蓝牙打印机打印文件的功能！

以下是关于这个需求的详细描述：

• 支持主流浏览器：如 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 参数，表示请求脚本可以接受所有蓝牙设备。

复制 1  
 2  <button id="connect" onclick="handleConnect()">连接蓝牙设备</button>

复制 1  function handleConnect() {
 2    navigator.bluetooth
 3      .requestDevice({
 4        acceptAllDevices: true,
 5      })
 6      .then((device) => {
 7        console.log("Device Name:", device.name);
 8        console.log("Device ID:", device.id);
 9        return device.gatt;
10      })
11      .then((server) => {
12        
13      })
14      .catch((error) => {
15        console.error("Error:", error);
16      });
17  }

点击配对按钮，可以获取到 Device Name 以及对应的 Device ID：

发现服务与特征

成功连接到蓝牙设备后，下一步是发现设备上的服务和特征。

首先，使用 connect() 方法连接到设备。

然后，调用 getPrimaryService() 方法获取指定的服务。

❗️ 注意：这里的 YOUR_SERVICE_UUID 占位符表示实际的服务 UUID。

复制 1server.connect()
 2  .then(server => {
 3    return server.getPrimaryService('YOUR_SERVICE_UUID');
 4  })
 5  .then(service => {
 6    
 7  })
 8  .catch(error => {
 9    console.error('Error:', error);
10  });

读取写入数据

使用 readValue() 和 writeValue() 方法读取和写入特征值:

复制 1characteristic.readValue()
 2  .then(value => {
 3    console.log('Characteristic Value:', value);
 4  })
 5  .catch(error => {
 6    console.error('Error:', error);
 7  });
 8
 9
10const encoder = new TextEncoder();
11const data = encoder.encode('Hello, Bluetooth!');
12characteristic.writeValue(data)
13  .then(() => {
14    console.log('Data written successfully');
15  })
16  .catch(error => {
17    console.error('Error:', error);
18  });

这样一个简单的连接蓝牙设备并读写数据的功能案例就实现了，接下来就直接按照需求开干了，具体的实现这里不做过多的讲解了，感兴趣的小伙伴可以自己去动手尝试一下

参考连接：

• Web Bluetooth API：https://developer.mozilla.org/en-US/docs/Web/API/Bluetooth