JavaScript 连接蓝牙&传输数据！需求背景 最近项目上接到一个新的需求：实现一个在浏览器端通过连接蓝牙打印机打印

哈喽，大家好 我是 xy👨🏻‍💻。今天给大家分享一个如何用 js 连接蓝牙设备并传输数据！！！

需求背景

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

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

• 支持主流浏览器：如 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

最后

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：前端开发爱好者 回复加群，一起学习前端技能 公众号内包含很多实战精选资源教程，欢迎关注