H5开发 连接蓝牙打印机 打印标签（斑马ZR628）
生活随笔
收集整理的這篇文章主要介紹了
H5开发 连接蓝牙打印机 打印标签（斑马ZR628）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.連接藍(lán)牙打印機(jī)（先用手機(jī)自帶藍(lán)牙進(jìn)行配對(duì)），然后綁定出已配對(duì)的藍(lán)牙設(shè)備（用來(lái)選擇/切換打印機(jī)之用），代碼如下
已配對(duì)藍(lán)牙設(shè)備，中顯示的就是已連接的，點(diǎn)擊一下即可
代碼：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>打印機(jī)配對(duì)</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">打印機(jī)配對(duì)</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>搜索設(shè)備</span> 55 <div class="mui-btn"> 56 <input id="bt1" class="mui-icon mui-icon-search" type="button" value="搜索設(shè)備" onclick="searchDevices('a')"> 57 <!--<span class="mui-icon mui-icon-search"> 搜索</span>--> 58 </div> 59 </li> 60 </ul> 61 62 <div class="title">未配對(duì)藍(lán)牙設(shè)備</div> 63 <ul class="mui-table-view" id="list1"> 64 <li class="mui-table-view-cell">無(wú)</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">已配對(duì)藍(lán)牙設(shè)備</div> 69 <ul class="mui-table-view" id="list2"> 70 <li class="mui-table-view-cell">無(wú)</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">其他測(cè)試</a> 84 <p><input id="bt1" type="button" value="搜索設(shè)備" οnclick="searchDevices('a')"></p> 85 </button> 86 </div> 87 <div> 88 未配對(duì)藍(lán)牙設(shè)備 89 <ul id="list1"> 90 </ul> 91 </div> 92 <div> 93 已配對(duì)藍(lán)牙設(shè)備 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=""搜索藍(lán)牙//address=設(shè)備mac地址，自動(dòng)配對(duì)給出mac地址的設(shè)備 111 function searchDevices(address) { 112 //注冊(cè)類 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("開(kāi)始搜索設(shè)備"); 119 var filter = new IntentFilter(); 120 var bdevice = new BluetoothDevice(); 121 var on = null; 122 var un = null; 123 var vlist1 = document.getElementById('list1'); //注冊(cè)容器用來(lái)顯示未配對(duì)設(shè)備 124 vlist1.innerHTML = ''; //清空容器 125 var vlist2 = document.getElementById('list2'); //注冊(cè)容器用來(lái)顯示未配對(duì)設(shè)備 126 vlist2.innerHTML = ''; //清空容器 127 var button1 = document.getElementById('bt1'); 128 button1.disabled = true; 129 button1.value = '正在搜索請(qǐng)稍候...'; 130 BAdapter.startDiscovery(); //開(kāi)啟搜索 131 var receiver; 132 receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', { 133 onReceive: function(context, intent) { //實(shí)現(xiàn)onReceiver回調(diào)函數(shù) 134 plus.android.importClass(intent); //通過(guò)intent實(shí)例引入intent類，方便以后的‘.’操作 135 console.log(intent.getAction()); //獲取action 136 if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") { 137 main.unregisterReceiver(receiver); //取消監(jiān)聽(tīng) 138 button1.disabled = false; 139 button1.value = '搜索設(shè)備'; 140 console.log("搜索結(jié)束") 141 } else { 142 143 BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE); 144 //判斷是否配對(duì) 145 if(BleDevice.getBondState() == bdevice.BOND_NONE) { 146 console.log("未配對(duì)藍(lán)牙設(shè)備：" + BleDevice.getName() + ' ' + BleDevice.getAddress()); 147 //參數(shù)如果跟取得的mac地址一樣就配對(duì) 148 if(address == BleDevice.getAddress()) { 149 if(BleDevice.createBond()) { //配對(duì)命令.createBond() 150 console.log("配對(duì)成功"); 151 var li2 = document.createElement('li'); //注冊(cè) 152 li2.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 153 li2.setAttribute('onclick', 'print(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行打印 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) { //判斷防止重復(fù)添加 161 var li1 = document.createElement('li'); //注冊(cè) 162 li1.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 163 li1.setAttribute('onclick', 'searchDevices(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行配對(duì) 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) { //判斷防止重復(fù)添加 174 console.log("已配對(duì)藍(lán)牙設(shè)備：" + BleDevice.getName() + ' ' + BleDevice.getAddress()); 175 var li2 = document.createElement('li'); //注冊(cè) 176 li2.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 177 li2.setAttribute('onclick', 'print(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行打印 178 li2.setAttribute('class', 'mui-table-view-cell'); //注冊(cè)click點(diǎn)擊列表進(jìn)行打印 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); //注冊(cè)監(jiān)聽(tīng) 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('請(qǐng)選擇藍(lán)牙打印機(jī)'); 207 return; 208 } 209 //alert(mac_address); 210 localStorage.setItem("macaddress", mac_address); 211 alert('打印機(jī)已配對(duì)成功'); 212 return; 213 } 214 </script> 215 216 </html>2.打印頁(yè)面，只有一個(gè)按鈕（生成條碼），見(jiàn)下圖，代碼如下
注：打印是用的斑馬ZPL指令（如需學(xué)習(xí) 百度很多~）
?
?
代碼如下：方法：printIndex(mol)
1 <script type="application/javascript"> 2 //address=""搜索藍(lán)牙//address=設(shè)備mac地址，自動(dòng)配對(duì)給出mac地址的設(shè)備 3 function searchDevices(address) { 4 //注冊(cè)類 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("開(kāi)始搜索設(shè)備"); 11 var filter = new IntentFilter(); 12 var bdevice = new BluetoothDevice(); 13 var on = null; 14 var un = null; 15 var vlist1 = document.getElementById('list1'); //注冊(cè)容器用來(lái)顯示未配對(duì)設(shè)備 16 vlist1.innerHTML = ''; //清空容器 17 var vlist2 = document.getElementById('list2'); //注冊(cè)容器用來(lái)顯示未配對(duì)設(shè)備 18 vlist2.innerHTML = ''; //清空容器 19 var button1 = document.getElementById('bt1'); 20 button1.disabled = true; 21 button1.value = '正在搜索請(qǐng)稍候'; 22 BAdapter.startDiscovery(); //開(kāi)啟搜索 23 var receiver; 24 receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', { 25 onReceive: function(context, intent) { //實(shí)現(xiàn)onReceiver回調(diào)函數(shù) 26 plus.android.importClass(intent); //通過(guò)intent實(shí)例引入intent類，方便以后的‘.’操作 27 console.log(intent.getAction()); //獲取action 28 if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") { 29 main.unregisterReceiver(receiver); //取消監(jiān)聽(tīng) 30 button1.disabled = false; 31 button1.value = '搜索設(shè)備'; 32 console.log("搜索結(jié)束") 33 } else { 34 BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE); 35 //判斷是否配對(duì) 36 if(BleDevice.getBondState() == bdevice.BOND_NONE) { 37 console.log("未配對(duì)藍(lán)牙設(shè)備：" + BleDevice.getName() + ' ' + BleDevice.getAddress()); 38 //參數(shù)如果跟取得的mac地址一樣就配對(duì) 39 if(address == BleDevice.getAddress()) { 40 if(BleDevice.createBond()) { //配對(duì)命令.createBond() 41 console.log("配對(duì)成功"); 42 var li2 = document.createElement('li'); //注冊(cè) 43 li2.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 44 li2.setAttribute('onclick', 'printIndex(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行打印 45 li2.innerText = BleDevice.getName(); 46 vlist2.appendChild(li2); 47 } 48 49 } else { 50 if(BleDevice.getName() != on) { //判斷防止重復(fù)添加 51 var li1 = document.createElement('li'); //注冊(cè) 52 li1.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 53 li1.setAttribute('onclick', 'searchDevices(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行配對(duì) 54 on = BleDevice.getName(); 55 li1.innerText = on; 56 vlist1.appendChild(li1); 57 58 } 59 60 } 61 } else { 62 if(BleDevice.getName() != un) { //判斷防止重復(fù)添加 63 console.log("已配對(duì)藍(lán)牙設(shè)備：" + BleDevice.getName() + ' ' + BleDevice.getAddress()); 64 var li2 = document.createElement('li'); //注冊(cè) 65 li2.setAttribute('id', BleDevice.getAddress()); //打印機(jī)mac地址 66 67 li2.setAttribute('onclick', 'printIndex(id)'); //注冊(cè)click點(diǎn)擊列表進(jìn)行打印 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); //注冊(cè)監(jiān)聽(tīng) 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('請(qǐng)輸入打印數(shù)量...', total, '', btnArray, function(e) { 97 if(e.index == 0) { 98 total = parseFloat(e.value); 99 if(total == 0) { 100 alert("請(qǐng)輸入大于0的數(shù)量!"); 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("標(biāo)簽打印中,請(qǐng)稍等..."); 113 var mac_address = localStorage.getItem("macaddress"); 114 if(!mac_address) { 115 mui.toast('請(qǐng)選擇藍(lán)牙打印機(jī)'); 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('檢測(cè)到設(shè)備未連接，嘗試連接....'); 132 bluetoothSocket.connect(); 133 } 134 135 console.log('設(shè)備已連接'); 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訂單號(hào):" + ddh + "^FS" + 159 "^FO15,115" + 160 "^A@N,20,20,E:HANS.TTF" + 161 "^FD到貨日期:" + app.PSTNG_DATE + " 數(shù)量:" + 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 //這里關(guān)鍵 177 bluetoothSocket.close(); //必須關(guān)閉藍(lán)牙連接否則意外斷開(kāi)的話打印錯(cuò)誤 178 179 } 180 } 181 </script> 182?
轉(zhuǎn)載于:https://www.cnblogs.com/pingfanren/p/11532854.html
總結(jié)
以上是生活随笔為你收集整理的H5开发 连接蓝牙打印机 打印标签（斑马ZR628）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Geany编辑器配置Python路径（W
- 下一篇： 无法访问 gcr.io 的解决方案