H5开发连接蓝牙打印机打印标签（斑马ZR628）

最新推荐文章于 2025-03-19 10:35:18 发布

weixin_30894583

最新推荐文章于 2025-03-19 10:35:18 发布

阅读量3.6k

点赞数 2

文章标签：移动开发 javascript runtime ViewUI

原文链接：http://www.cnblogs.com/pingfanren/p/11532854.html

版权

本文介绍了如何使用H5在移动端通过蓝牙连接斑马ZR628打印机来打印标签。首先，需要进行蓝牙设备的配对和绑定，然后通过JavaScript代码实现打印功能，其中打印指令采用斑马ZPL。用户只需点击生成条码按钮，即可完成打印操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.连接蓝牙打印机（先用手机自带蓝牙进行配对），然后绑定出已配对的蓝牙设备（用来选择/切换打印机之用），代码如下

已配对蓝牙设备，中显示的就是已连接的，点击一下即可

代码：

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <title>打印机配对</title>
  7         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8         <meta name="apple-mobile-web-app-capable" content="yes">
  9         <meta name="apple-mobile-web-app-status-bar-style" content="black">
 10         <link href="../css/mui.min.css" rel="stylesheet" />
 11         <link rel="stylesheet" type="text/css" href="../css/app.css" />
 12         <style>
 13             .title {
    
 14                 margin: 20px 15px 7px;
 15                 color: #6d6d72;
 16                 font-size: 15px;
 17             }
 18             
 19             .mui-bar-nav {
    
 20                 background: #004A86;
 21             }
 22             
 23             .mui-icon-back:before,
 24             .mui-icon-left-nav:before,
 25             .mui-bar .mui-title {
    
 26                 color: #ffffff;
 27             }
 28             
 29             .mui-content>.mui-table-view:first-child {
    
 30                 margin-top: 0px;
 31             }
 32             
 33             .mui-btn {
    
 34                 padding: 1px 1px;
 35             }
 36             /*.mui-btn-primary{ border: 1px solid #004A86; background: #004A86;}*/
 37             
 38             .mui-icon-search:before {
    
 39                 font-size: 16px;
 40             }
 41         </style>
 42     </head>
 43 
 44     <body>
 45         <div id="app" class="mui-off-canvas-wrap mui-slide-in">
 46             <header id="header" class="mui-bar mui-bar-nav" style="height: 44px;">
 47                 <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
 48                 <h1 class="mui-title">打印机配对</h1>
 49 
 50             </header>
 51             <div class="mui-content">
 52                 <ul class="mui-table-view">
 53                     <li class="mui-table-view-cell" style=" height: 45px;">
 54                         <span>搜索设备</span>
 55                         <div class="mui-btn">
 56                             <input id="bt1" class="mui-icon mui-icon-search" type="button" value="搜索设备" onclick="searchDevices('a')">
 57                             <!--<span class="mui-icon mui-icon-search">&nbsp;搜索</span>-->
 58                         </div>
 59                     </li>
 60                 </ul>
 61 
 62                 <div class="title">未配对蓝牙设备</div>
 63                 <ul class="mui-table-view" id="list1">
 64                     <li class="mui-table-view-cell">无</li>
 65                     <!--<li class="mui-table-view-cell">Item 2</li>
 66                      <li class="mui-table-view-cell">Item 3</li>-->
 67                 </ul>
 68                 <