H5开发 连接蓝牙打印机 打印标签（斑马ZR628）
2024-05-15 05:28:28
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"> 搜索</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 <div class="title">已配对蓝牙设备</div>
69 <ul class="mui-table-view" id="list2">
70 <li class="mui-table-view-cell">无</li>
71 <!--<li class="mui-table-view-cell">Item 2</li>
72 <li class="mui-table-view-cell">Item 3</li>-->
73 </ul>
74
75 </div>
76 <!--<header id="header" class="mui-bar mui-bar-nav" style="height: 44px;">
77 <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
78 <h1 class="mui-title">物料清单.</h1>
79
80 </header>
81
82 <div id="pullrefresh" class="mui-content">
83 <a href="new_file.html">其他测试</a>
84 <p><input id="bt1" type="button" value="搜索设备" οnclick="searchDevices('a')"></p>
85 </button>
86 </div>
87 <div>
88 未配对蓝牙设备
89 <ul id="list1">
90 </ul>
91 </div>
92 <div>
93 已配对蓝牙设备
94
95 <ul id="list2">
96
97 </ul>
98 </div>-->
99
100 </div>
101
102 </body>
103 <script type="text/javascript" src="../js/mui.min.js"></script>
104 <script type="text/javascript" src="../js/libs/vue.min.js"></script>
105 <script type="text/javascript" src="../js/common/config.js"></script>
106 <script type="text/javascript" src="../js/common/global.js"></script>
107 <script src="../js/cgn/mui.mkey.js"></script>
108 <script src="../js/cgn/cgnpc.js"></script>
109 <script type="application/javascript">
110 //address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备
111 function searchDevices(address) {
112 //注册类
113 var main = plus.android.runtimeMainActivity();
114 var IntentFilter = plus.android.importClass('android.content.IntentFilter');
115 var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
116 var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
117 var BAdapter = BluetoothAdapter.getDefaultAdapter();
118 console.log("开始搜索设备");
119 var filter = new IntentFilter();
120 var bdevice = new BluetoothDevice();
121 var on = null;
122 var un = null;
123 var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备
124 vlist1.innerHTML = ''; //清空容器
125 var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
126 vlist2.innerHTML = ''; //清空容器
127 var button1 = document.getElementById('bt1');
128 button1.disabled = true;
129 button1.value = '正在搜索请稍候...';
130 BAdapter.startDiscovery(); //开启搜索
131 var receiver;
132 receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
133 onReceive: function(context, intent) { //实现onReceiver回调函数
134 plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
135 console.log(intent.getAction()); //获取action
136 if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
137 main.unregisterReceiver(receiver); //取消监听
138 button1.disabled = false;
139 button1.value = '搜索设备';
140 console.log("搜索结束")
141 } else {
142
143 BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
144 //判断是否配对
145 if(BleDevice.getBondState() == bdevice.BOND_NONE) {
146 console.log("未配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
147 //参数如果跟取得的mac地址一样就配对
148 if(address == BleDevice.getAddress()) {
149 if(BleDevice.createBond()) { //配对命令.createBond()
150 console.log("配对成功");
151 var li2 = document.createElement('li'); //注册
152 li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
153 li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印
154 li2.setAttribute('class', 'mui-table-view-cell');
155 li2.innerText = BleDevice.getName();
156 vlist2.appendChild(li2);
157 }
158
159 } else {
160 if(BleDevice.getName() != on) { //判断防止重复添加
161 var li1 = document.createElement('li'); //注册
162 li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
163 li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对
164 li1.setAttribute('class', 'mui-table-view-cell');
165 on = BleDevice.getName();
166 li1.innerText = on;
167 vlist1.appendChild(li1);
168
169 }
170
171 }
172 } else {
173 if(BleDevice.getName() != un) { //判断防止重复添加
174 console.log("已配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
175 var li2 = document.createElement('li'); //注册
176 li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
177 li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印
178 li2.setAttribute('class', 'mui-table-view-cell'); //注册click点击列表进行打印
179 un = BleDevice.getName();
180 li2.innerText = un;
181 vlist2.appendChild(li2);
182 }
183 }
184 }
185
186 }
187 });
188
189 filter.addAction(bdevice.ACTION_FOUND);
190 filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
191 filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
192 filter.addAction(BAdapter.ACTION_STATE_CHANGED);
193
194 main.registerReceiver(receiver, filter); //注册监听
195 }
196
197 var device = null,
198 BAdapter = null,
199 BluetoothAdapter = null,
200 uuid = null,
201 main = null,
202 bluetoothSocket = null;
203
204 function print(mac_address) {
205 if(!mac_address) {
206 mui.toast('请选择蓝牙打印机');
207 return;
208 }
209 //alert(mac_address);
210 localStorage.setItem("macaddress", mac_address);
211 alert('打印机已配对成功');
212 return;
213 }
214 </script>
215
216 </html>2.打印页面，只有一个按钮（生成条码），见下图，代码如下
注：打印是用的斑马ZPL指令（如需学习 百度很多~）
代码如下：方法：printIndex(mol)
1 <script type="application/javascript">
2 //address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备
3 function searchDevices(address) {
4 //注册类
5 var main = plus.android.runtimeMainActivity();
6 var IntentFilter = plus.android.importClass('android.content.IntentFilter');
7 var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
8 var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
9 var BAdapter = BluetoothAdapter.getDefaultAdapter();
10 console.log("开始搜索设备");
11 var filter = new IntentFilter();
12 var bdevice = new BluetoothDevice();
13 var on = null;
14 var un = null;
15 var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备
16 vlist1.innerHTML = ''; //清空容器
17 var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
18 vlist2.innerHTML = ''; //清空容器
19 var button1 = document.getElementById('bt1');
20 button1.disabled = true;
21 button1.value = '正在搜索请稍候';
22 BAdapter.startDiscovery(); //开启搜索
23 var receiver;
24 receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
25 onReceive: function(context, intent) { //实现onReceiver回调函数
26 plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
27 console.log(intent.getAction()); //获取action
28 if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
29 main.unregisterReceiver(receiver); //取消监听
30 button1.disabled = false;
31 button1.value = '搜索设备';
32 console.log("搜索结束")
33 } else {
34 BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
35 //判断是否配对
36 if(BleDevice.getBondState() == bdevice.BOND_NONE) {
37 console.log("未配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
38 //参数如果跟取得的mac地址一样就配对
39 if(address == BleDevice.getAddress()) {
40 if(BleDevice.createBond()) { //配对命令.createBond()
41 console.log("配对成功");
42 var li2 = document.createElement('li'); //注册
43 li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
44 li2.setAttribute('onclick', 'printIndex(id)'); //注册click点击列表进行打印
45 li2.innerText = BleDevice.getName();
46 vlist2.appendChild(li2);
47 }
48
49 } else {
50 if(BleDevice.getName() != on) { //判断防止重复添加
51 var li1 = document.createElement('li'); //注册
52 li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
53 li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对
54 on = BleDevice.getName();
55 li1.innerText = on;
56 vlist1.appendChild(li1);
57
58 }
59
60 }
61 } else {
62 if(BleDevice.getName() != un) { //判断防止重复添加
63 console.log("已配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
64 var li2 = document.createElement('li'); //注册
65 li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
66
67 li2.setAttribute('onclick', 'printIndex(id)'); //注册click点击列表进行打印
68 un = BleDevice.getName();
69 li2.innerText = un;
70 vlist2.appendChild(li2);
71 }
72 }
73 }
74
75 }
76 });
77
78 filter.addAction(bdevice.ACTION_FOUND);
79 filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
80 filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
81 filter.addAction(BAdapter.ACTION_STATE_CHANGED);
82
83 main.registerReceiver(receiver, filter); //注册监听
84 }
85
86 var device = null,
87 BAdapter = null,
88 BluetoothAdapter = null,
89 uuid = null,
90 main = null,
91 bluetoothSocket = null;
92
93 function printIndex(molList) {
94 var total = 1;
95 var btnArray = ['确定', '取消'];
96 mui.prompt('请输入打印数量...', total, '', btnArray, function(e) {
97 if(e.index == 0) {
98 total = parseFloat(e.value);
99 if(total == 0) {
100 alert("请输入大于0的数量!");
101 return false;
102 } else {
103 print(molList, total);
104 }
105 } else {
106 mui.toast("已取消");
107 }
108 });
109 }
110
111 function print(molList, total) {
112 g.showWaiting("标签打印中,请稍等...");
113 var mac_address = localStorage.getItem("macaddress");
114 if(!mac_address) {
115 mui.toast('请选择蓝牙打印机');
116 return;
117 }
118 localStorage.setItem("macaddress", mac_address);
119 //alert(localStorage.getItem("macaddress"));
120 main = plus.android.runtimeMainActivity();
121 BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
122 UUID = plus.android.importClass("java.util.UUID");
123 uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
124 BAdapter = BluetoothAdapter.getDefaultAdapter();
125 device = BAdapter.getRemoteDevice(mac_address);
126 plus.android.importClass(device);
127 bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);
128 plus.android.importClass(bluetoothSocket);
129
130 if(!bluetoothSocket.isConnected()) {
131 console.log('检测到设备未连接，尝试连接....');
132 bluetoothSocket.connect();
133 }
134
135 console.log('设备已连接');
136
137 if(bluetoothSocket.isConnected()) {
138 // alert(bluetoothSocket.isConnected());
139 var outputStream = bluetoothSocket.getOutputStream();
140 plus.android.importClass(outputStream);
141 var wlbm = molList.MATERIAL_CODE.slice(-10);
142 var wlms = molList.MATERIAL_DESCRIPTION;
143 var ddh = molList.ORDER_NUMBER;
144 var sl = molList.CHECK_SUM;
145 var dw = molList.SALES_UNIT;
146
147 var string = "^XA^MNW^JUS^CI28" +
148 "^FO15,25" +
149 "^MD" +
150 "^A@N,20,20,E:HANS.TTF" +
151 //"^A@N,20,20,E:SIMSUN.TTF" +
152 "^FD" + wlbm + "^FS" +
153 "^FO15,55" +
154 "^A@N,20,20,E:HANS.TTF" +
155 "^FD名称:" + wlms + "^FS" +
156 "^FO15,85" +
157 "^A@N,20,20,E:HANS.TTF" +
158 "^FD订单号:" + ddh + "^FS" +
159 "^FO15,115" +
160 "^A@N,20,20,E:HANS.TTF" +
161 "^FD到货日期:" + app.PSTNG_DATE + " 数量:" + sl + "^FS" +
162 "^FO15,145" +
163 "^A@N,20,20,E:HANS.TTF" +
164 "^FD工厂:5020 单位:" + dw + "^FS" +
165 "^FO55,175^BY1.8" +
166 "^BCN,50,Y,N,N" +
167 "^FD" + wlbm + "^FS" +
168 "^PQ" + total + ",2,1,Y" +
169 "^XZ";
170
171 var bytes = plus.android.invoke(string, 'getBytes', 'UTF-8');
172 outputStream.write(bytes);
173 outputStream.flush();
174 g.closeWaiting();
175
176 device = null //这里关键
177 bluetoothSocket.close(); //必须关闭蓝牙连接否则意外断开的话打印错误
178
179 }
180 }
181 </script>
182 转载于:https://www.cnblogs.com/pingfanren/p/11532854.html
H5开发 连接蓝牙打印机 打印标签（斑马ZR628）相关推荐
- uni-app H5+ 连接蓝牙打印机打印文字及二维码
基于Native.js 实现的连接蓝牙打印机 打印效果图 核心代码 测试代码 运行设备及环境 PS: PPS: Demo 打印效果图 核心代码 /*** @Description: 蓝牙打印类 基于h ...
- android 如何实现连接蓝牙打印机来实现打印功能
============问题描述============ 目前,android 如何实现连接蓝牙打印机来实现打印功能,请大侠来指点, 是否要遵循什么协议标准,还是有设备提供商会提供打印的sdk, 我们 ...
- android 蓝牙地址连接打印机,android 连接蓝牙打印机 BluetoothAdapter
android 连接蓝牙打印机 BluetoothAdapter 源码下载地址:https://github.com/yylxy/BluetoothText.git public class Prin ...
- js连接蓝牙打印机打印一维码和二维码
JavaScript使用原生JS(native.JS)连接蓝牙打印机,打印一维码.二维码 使用说明: 代码已经过测试,可正常使用 测试蓝牙打印机为 商米(SUNMI)V2S plus打印机,此设备为一 ...
- Android手机连接蓝牙打印机连接不上的问题
目前碰到的情况(虽然可能是小情况,但是在解决的时候还是很费时间的): 问题描述:用Android机连接蓝牙打印机,发现华为P7可以连接,而其余的手机都连接失败,找了一上午资料也没解决这个问题. 接着我 ...
- android h5链接蓝牙,h5+runtime Native.js 混合APP连接蓝牙打印机
自己摸索了一下,并参考其他人的代码,修复了原来代码存在的问题, 问题1:字符串的getBytes函数,返回null[需要通过new的方式创建字符串] 问题2:初始化打印一次,之后无法使用[不要重复调用 ...
- Android连接蓝牙打印机
前言 在之前写过一篇Android操作蓝牙打印机(上),当时也是因为自己在工作中确实走了许多弯路,所以当时计划着用两篇文章详细阐述蓝牙打印的整个流程,也是对工作的一种总结,其次也可以给蓝牙打印方面感觉 ...
- android 蓝牙打印 js,Native.js 安卓连接蓝牙打印机【可连续打印】
自己摸索了一下,并参考其他人的代码,并修复了原来代码存在的问题, 问题1:字符串的getBytes函数,返回null[需要通过new的方式创建字符串] 问题2:初始化打印一次,之后无法使用[不要重复调 ...
- HC-05蓝牙模块连接蓝牙打印机步骤
近朋友让帮忙调试一款蓝牙打印机,没办法朋友所托只有硬着头皮调试了,立马买了一个HC-05的蓝牙模块 (注意是HC-05),下面把我的调试方法给大家共享下: 1.按键上电进入AT模式 2.获取模块信息( ...
最新文章
- CodeForces Gym-101350M
- Bugzilla/使用
- vue3数据绑定显示列表数据局
- 企业办公自动化系统_OA系统的核心功能有哪些？分析当下OA系统的缺陷以及相关解决方案...
- SQL Server-聚焦IN VS EXISTS VS JOIN性能分析（十九）
- 《音频、图像及视频技术》学习笔记
- 一加3支持android9吗,不忘老用户！一加3更新Android 9，网友：真的不将就
- U盘分区与启动是怎么回事？
- 数据库事务的四大特性以及事务的隔离级别-与-Spring事务传播机制隔离级别
- jQuery多文件上传的实例
- 看完这篇还不了解 Nginx，那我就哭了！
- 吾爱破解安卓逆向入门教程
- SqlDataReader的用法（重点：访问字段的值）
- kafka数据丢包原因及解决方案
- 新猿木子李：0基础学python培训教程 python下载文件的多种方法汇总
- 【第八期送书活动】+ 购书福利
- PostgreSQL的json和jsonb比较
- 批量ping多个IP地址
- [汇编]怎样让猫吃辣椒
- OpenGL - Hermite算法多点画光滑曲线