H5开发 连接蓝牙打印机 打印标签（斑马ZR628）
1.连接蓝牙打印机（先用手机自带蓝牙进行配对），然后绑定出已配对的蓝牙设备（用来选择/切换打印机之用），代码如下
已配对蓝牙设备，中显示的就是已连接的，点击一下即可
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>打印机配对</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<style>
.title {
margin: 20px 15px 7px;
color: #6d6d72;
font-size: 15px;
} .mui-bar-nav {
background: #004A86;
} .mui-icon-back:before,
.mui-icon-left-nav:before,
.mui-bar .mui-title {
color: #ffffff;
} .mui-content>.mui-table-view:first-child {
margin-top: 0px;
} .mui-btn {
padding: 1px 1px;
}
/*.mui-btn-primary{ border: 1px solid #004A86; background: #004A86;}*/ .mui-icon-search:before {
font-size: 16px;
}
</style>
</head> <body>
<div id="app" class="mui-off-canvas-wrap mui-slide-in">
<header id="header" class="mui-bar mui-bar-nav" style="height: 44px;">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">打印机配对</h1> </header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell" style=" height: 45px;">
<span>搜索设备</span>
<div class="mui-btn">
<input id="bt1" class="mui-icon mui-icon-search" type="button" value="搜索设备" onclick="searchDevices('a')">
<!--<span class="mui-icon mui-icon-search"> 搜索</span>-->
</div>
</li>
</ul> <div class="title">未配对蓝牙设备</div>
<ul class="mui-table-view" id="list1">
<li class="mui-table-view-cell">无</li>
<!--<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>-->
</ul>
<div class="title">已配对蓝牙设备</div>
<ul class="mui-table-view" id="list2">
<li class="mui-table-view-cell">无</li>
<!--<li class="mui-table-view-cell">Item 2</li>
<li class="mui-table-view-cell">Item 3</li>-->
</ul> </div>
<!--<header id="header" class="mui-bar mui-bar-nav" style="height: 44px;">
<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
<h1 class="mui-title">物料清单.</h1> </header> <div id="pullrefresh" class="mui-content">
<a href="new_file.html">其他测试</a>
<p><input id="bt1" type="button" value="搜索设备" onclick="searchDevices('a')"></p>
</button>
</div>
<div>
未配对蓝牙设备
<ul id="list1">
</ul>
</div>
<div>
已配对蓝牙设备 <ul id="list2"> </ul>
</div>--> </div> </body>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/libs/vue.min.js"></script>
<script type="text/javascript" src="../js/common/config.js"></script>
<script type="text/javascript" src="../js/common/global.js"></script>
<script src="../js/cgn/mui.mkey.js"></script>
<script src="../js/cgn/cgnpc.js"></script>
<script type="application/javascript">
//address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备
function searchDevices(address) {
//注册类
var main = plus.android.runtimeMainActivity();
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
var BAdapter = BluetoothAdapter.getDefaultAdapter();
console.log("开始搜索设备");
var filter = new IntentFilter();
var bdevice = new BluetoothDevice();
var on = null;
var un = null;
var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备
vlist1.innerHTML = ''; //清空容器
var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
vlist2.innerHTML = ''; //清空容器
var button1 = document.getElementById('bt1');
button1.disabled = true;
button1.value = '正在搜索请稍候...';
BAdapter.startDiscovery(); //开启搜索
var receiver;
receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
console.log(intent.getAction()); //获取action
if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
main.unregisterReceiver(receiver); //取消监听
button1.disabled = false;
button1.value = '搜索设备';
console.log("搜索结束")
} else { BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
//判断是否配对
if(BleDevice.getBondState() == bdevice.BOND_NONE) {
console.log("未配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
//参数如果跟取得的mac地址一样就配对
if(address == BleDevice.getAddress()) {
if(BleDevice.createBond()) { //配对命令.createBond()
console.log("配对成功");
var li2 = document.createElement('li'); //注册
li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印
li2.setAttribute('class', 'mui-table-view-cell');
li2.innerText = BleDevice.getName();
vlist2.appendChild(li2);
} } else {
if(BleDevice.getName() != on) { //判断防止重复添加
var li1 = document.createElement('li'); //注册
li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对
li1.setAttribute('class', 'mui-table-view-cell');
on = BleDevice.getName();
li1.innerText = on;
vlist1.appendChild(li1); } }
} else {
if(BleDevice.getName() != un) { //判断防止重复添加
console.log("已配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
var li2 = document.createElement('li'); //注册
li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
li2.setAttribute('onclick', 'print(id)'); //注册click点击列表进行打印
li2.setAttribute('class', 'mui-table-view-cell'); //注册click点击列表进行打印
un = BleDevice.getName();
li2.innerText = un;
vlist2.appendChild(li2);
}
}
} }
}); filter.addAction(bdevice.ACTION_FOUND);
filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
filter.addAction(BAdapter.ACTION_STATE_CHANGED); main.registerReceiver(receiver, filter); //注册监听
} var device = null,
BAdapter = null,
BluetoothAdapter = null,
uuid = null,
main = null,
bluetoothSocket = null; function print(mac_address) {
if(!mac_address) {
mui.toast('请选择蓝牙打印机');
return;
}
//alert(mac_address);
localStorage.setItem("macaddress", mac_address);
alert('打印机已配对成功');
return;
}
</script> </html>
2.打印页面，只有一个按钮（生成条码），见下图，代码如下
注：打印是用的斑马ZPL指令（如需学习 百度很多~）
代码如下：方法：printIndex(mol)
<script type="application/javascript">
//address=""搜索蓝牙//address=设备mac地址，自动配对给出mac地址的设备
function searchDevices(address) {
//注册类
var main = plus.android.runtimeMainActivity();
var IntentFilter = plus.android.importClass('android.content.IntentFilter');
var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
var BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
var BAdapter = BluetoothAdapter.getDefaultAdapter();
console.log("开始搜索设备");
var filter = new IntentFilter();
var bdevice = new BluetoothDevice();
var on = null;
var un = null;
var vlist1 = document.getElementById('list1'); //注册容器用来显示未配对设备
vlist1.innerHTML = ''; //清空容器
var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
vlist2.innerHTML = ''; //清空容器
var button1 = document.getElementById('bt1');
button1.disabled = true;
button1.value = '正在搜索请稍候';
BAdapter.startDiscovery(); //开启搜索
var receiver;
receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
onReceive: function(context, intent) { //实现onReceiver回调函数
plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
console.log(intent.getAction()); //获取action
if(intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
main.unregisterReceiver(receiver); //取消监听
button1.disabled = false;
button1.value = '搜索设备';
console.log("搜索结束")
} else {
BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
//判断是否配对
if(BleDevice.getBondState() == bdevice.BOND_NONE) {
console.log("未配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
//参数如果跟取得的mac地址一样就配对
if(address == BleDevice.getAddress()) {
if(BleDevice.createBond()) { //配对命令.createBond()
console.log("配对成功");
var li2 = document.createElement('li'); //注册
li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
li2.setAttribute('onclick', 'printIndex(id)'); //注册click点击列表进行打印
li2.innerText = BleDevice.getName();
vlist2.appendChild(li2);
} } else {
if(BleDevice.getName() != on) { //判断防止重复添加
var li1 = document.createElement('li'); //注册
li1.setAttribute('id', BleDevice.getAddress()); //打印机mac地址
li1.setAttribute('onclick', 'searchDevices(id)'); //注册click点击列表进行配对
on = BleDevice.getName();
li1.innerText = on;
vlist1.appendChild(li1); } }
} else {
if(BleDevice.getName() != un) { //判断防止重复添加
console.log("已配对蓝牙设备：" + BleDevice.getName() + ' ' + BleDevice.getAddress());
var li2 = document.createElement('li'); //注册
li2.setAttribute('id', BleDevice.getAddress()); //打印机mac地址 li2.setAttribute('onclick', 'printIndex(id)'); //注册click点击列表进行打印
un = BleDevice.getName();
li2.innerText = un;
vlist2.appendChild(li2);
}
}
} }
}); filter.addAction(bdevice.ACTION_FOUND);
filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
filter.addAction(BAdapter.ACTION_STATE_CHANGED); main.registerReceiver(receiver, filter); //注册监听
} var device = null,
BAdapter = null,
BluetoothAdapter = null,
uuid = null,
main = null,
bluetoothSocket = null; function printIndex(molList) {
var total = 1;
var btnArray = ['确定', '取消'];
mui.prompt('请输入打印数量...', total, '', btnArray, function(e) {
if(e.index == 0) {
total = parseFloat(e.value);
if(total == 0) {
alert("请输入大于0的数量!");
return false;
} else {
print(molList, total);
}
} else {
mui.toast("已取消");
}
});
} function print(molList, total) {
g.showWaiting("标签打印中,请稍等...");
var mac_address = localStorage.getItem("macaddress");
if(!mac_address) {
mui.toast('请选择蓝牙打印机');
return;
}
localStorage.setItem("macaddress", mac_address);
//alert(localStorage.getItem("macaddress"));
main = plus.android.runtimeMainActivity();
BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
UUID = plus.android.importClass("java.util.UUID");
uuid = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
BAdapter = BluetoothAdapter.getDefaultAdapter();
device = BAdapter.getRemoteDevice(mac_address);
plus.android.importClass(device);
bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);
plus.android.importClass(bluetoothSocket); if(!bluetoothSocket.isConnected()) {
console.log('检测到设备未连接，尝试连接....');
bluetoothSocket.connect();
} console.log('设备已连接'); if(bluetoothSocket.isConnected()) {
// alert(bluetoothSocket.isConnected());
var outputStream = bluetoothSocket.getOutputStream();
plus.android.importClass(outputStream);
var wlbm = molList.MATERIAL_CODE.slice(-10);
var wlms = molList.MATERIAL_DESCRIPTION;
var ddh = molList.ORDER_NUMBER;
var sl = molList.CHECK_SUM;
var dw = molList.SALES_UNIT; var string = "^XA^MNW^JUS^CI28" +
"^FO15,25" +
"^MD" +
"^A@N,20,20,E:HANS.TTF" +
//"^A@N,20,20,E:SIMSUN.TTF" +
"^FD" + wlbm + "^FS" +
"^FO15,55" +
"^A@N,20,20,E:HANS.TTF" +
"^FD名称:" + wlms + "^FS" +
"^FO15,85" +
"^A@N,20,20,E:HANS.TTF" +
"^FD订单号:" + ddh + "^FS" +
"^FO15,115" +
"^A@N,20,20,E:HANS.TTF" +
"^FD到货日期:" + app.PSTNG_DATE + " 数量:" + sl + "^FS" +
"^FO15,145" +
"^A@N,20,20,E:HANS.TTF" +
"^FD工厂:5020 单位:" + dw + "^FS" +
"^FO55,175^BY1.8" +
"^BCN,50,Y,N,N" +
"^FD" + wlbm + "^FS" +
"^PQ" + total + ",2,1,Y" +
"^XZ"; var bytes = plus.android.invoke(string, 'getBytes', 'UTF-8');
outputStream.write(bytes);
outputStream.flush();
g.closeWaiting(); device = null //这里关键
bluetoothSocket.close(); //必须关闭蓝牙连接否则意外断开的话打印错误 }
}
</script>
补充下：本人已经离项目 没拿代码， 官网案例 请参考 https://ask.dcloud.net.cn/article/643
H5开发 连接蓝牙打印机 打印标签（斑马ZR628）的更多相关文章
- android 连接蓝牙打印机 BluetoothAdapter
android 连接蓝牙打印机 BluetoothAdapter 源码下载地址:https://github.com/yylxy/BluetoothText.git public class Prin ...
- android蓝牙打印机
您还未登录!|登录|注册|帮助 首页 业界 移动 云计算 研发 论坛 博客 下载 更多 reality_jie的专栏 编程的过程是一种微妙的享受 目录视图 摘要视图 订阅 CSDN2013 ...
- 微信小程序蓝牙连接小票打印机
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAda ...
- iOS开发之蓝牙通讯
iOS开发之蓝牙通讯 一.引言 蓝牙是设备近距离通信的一种方便手段,在iPhone引入蓝牙4.0后,设备之间的通讯变得更加简单.相关的蓝牙操作由专门的CoreBluetooth.framework进行 ...
- Android网络开发之蓝牙
蓝牙采用分散式网络结构以及快调频和短包技术,支持点对点及点对多点通信,工作在全球通用的2.4GHz ISM(I-工业.S-科学.M-医学)频段,其数据速率为1Mbps,采用时分双工传输方案. 蓝牙 ...
- H5开发HybridApp
1 H5开发 开发HybridApp一般都是先完成H5部分,所谓的H5就是Html5页面,开发的时候我们在PC机上的浏览器调试即可,这里推荐Chrome F12模式. 在调试服务器请求数据部分要给ch ...
- iOS开发之--蓝牙开发实战
转载自:http://www.cnblogs.com/zyjzyj/p/6029968.html ,感谢英杰 前言 最近一直在开发关于蓝牙的功能,本来是不想写这一篇文章,因为网上关于ios蓝牙开发的文 ...
- iOS开发 最近开发了蓝牙模块，在此记录总结一下（转载）
1.基本概念 <1>中心者模式:常用的(其实99.99%)就是使用中心者模式作为开发,就是我们手机作为主机,连接蓝牙外设.由于开发只用到了中心者模式,所以我也只介绍中心者模式. <2 ...
- iOS开发之蓝牙业务封装
因为公司做智能家居开发,有很多蓝牙的智能硬件.因此项目中经常需要和蓝牙打交道.为此为了提高开发效率,就把蓝牙的公共业务进行了封装. 本文将对封装的思路做一个简单的阐述. 首先我们需要一个头文件.在这个 ...
随机推荐
- dva+umi+antd项目从搭建到使用（没有剖验证，不知道在说i什么）
先创建一个新项目,具体步骤请参考https://www.cnblogs.com/darkbluelove/p/11338309.html 一.添加document.ejs文件(参考文档:https:/ ...
- 【Linux命令】EOF自定义终止符
EOF自定义终止符用法 我们在脚本中经常会发现使用EOF的情况.EOF可以结合cat命令对内容进行追加.比如:执行脚本的时候,需要往一个文件里自动输入多行内容.如果是少数的几行内容,可以用echo命令 ...
- 巧妙利用selenium中的JS操作来处理特殊的文本框
在使用selenium对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框: 2.检索框:可以直接输入文本,但必须要点击根据输入的 ...
- _NtCreateDebugObject(ntoskrnl.exe)函数逆向分析
该函数由 DbgUiConnectToDbg(ntdll.dll)函数 调用. 其调用时传入的参数如下: 函数作用:初始化被调试的内核对象,将被调试对象句柄放入调试对象的 [fs:f24]处. 1.现 ...
- abp实战-ContosoUniversity Abp版-2添加菜单与创建实体
这里略过理论篇,但需要了解abp分层,对于小项目来说abp分层有点复杂,这里只是演示,个别地方没有完全按照ddd理论去写,后期我将会完善. 1. 创建ContosoUniversity相关功能的菜单 ...
- C# 矢量图EMF 总结
个人知识记录.如果有用请点赞,否则勿喷.忽略. 个人站点:https://i.cnblogs.com/EditPosts.aspx?opt=1 注意:句柄的操作1.创建 代码如下: Metafile ...
- arcgis api 3.x for js 地图加载多个气泡窗口展示（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Linux中IP配置
一.获取网卡名称 ip a ifconfig(安装net-tools后可用) 二.进入网卡配置文件所在路径 cd /etc/sysconfig/network-scripts/ 三.编辑网卡配置文件 ...
- 【原创】CentOS 7 安装解压版mysql5.7
1.将mysql压缩包解压至 /usr/local 文件夹下,将其改名为mysql #解压 tar -zxf mysql-5.7.27-el7-x86_64.tar.gz -C /usr/local/ ...
- CGROUP九大子系统
blkio -- 这个子系统为块设备设定输入/输出限制,比如物理设备(磁盘,固态硬盘,USB 等等). cpu -- 这个子系统使用调度程序提供对 CPU 的 cgroup 任务访问. cpuacct ...