H5+ zebra打印机（ZPL指令）打印标签

本文链接：https://blog.csdn.net/oliverQuill/article/details/132100468

公司新增一台打印机需求，与之前的打印机指令不一致，需要用到斑马的ZPL指令
之前的打印机由前同事开发，用到的是JPL的打印机，封装的jar包
本次参考了网上的教程，结合之前打印机获取蓝牙设备
可以直接打印结果
打印机：Zebra 斑马打印机 ZD421
手机：PDA - C500 （安卓12）
功能：扫描周围蓝牙设备加入列表，点击未配对设备，自动配对设备，点击已配对设备，进行打印测试
先上html

<!doctype html>  
<html>  

<head>  
    <meta charset="UTF-8">  
    <title>打印测试</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <link href="../../css/mui.min.css" rel="stylesheet" />  
    <link rel="stylesheet" type="text/css" href="../../css/GLBcustom.css" />  
    <link rel="stylesheet" type="text/css" href="../../css/iconfont-download.css" />  
    <link rel="stylesheet" type="text/css" href="../../css/icons-extra.css" />  
    <style type="text/css">  
            #scroll1 {  
                position: absolute;  
                z-index: 2;  
                bottom: 44px;  
                left: 0;  
                overflow: hidden;  
                width: 100%;  
            }  

            #scroll2 {  
                position: absolute;  
                z-index: 2;  
                bottom: 44px;  
                left: 0;  
                overflow: hidden;  
                width: 100%;  
            }  

            #scroll3 {  
                position: absolute;  
                z-index: 2;  
                bottom: 44px;  
                left: 0;  
                overflow: hidden;  
                width: 100%;  
            }  
            /*扫描记录 单独定制样式，不需要分组*/  
/*          .mui-btn-green, .mui-btn-positive, .mui-btn-success {  
                border: 1px solid #4cd964 !important;  
                padding: 2px;  
            }*/  
            .mui-popup {  
                position: fixed;  
                z-index: 10000;  
                top: 50%;  
                left: 50%;  
                display: none;  
                overflow: hidden;  
                width: 80%;  
                -webkit-transition-property: -webkit-transform,opacity;  
                transition-property: transform,opacity;  
                -webkit-transform: translate3d(-50%,-50%,0) scale(1.185);  
                transform: translate3d(-50%,-50%,0) scale(1.185);  
                text-align: left;  
                opacity: 0;  
                color: #000000;  
                border-radius: 13px;  
            }  
            .mui-popup-inner {  
                position: relative;  
                padding:15px;  
                border-radius: 13px 13px 0 0;  
                background: rgba(255,255,255,1);  
            }  
            .mui-popup-title {  
                font-size: 15px;  
                font-weight: 500;  
                text-align: center;  
            }  
            .mui-popup-title+.mui-popup-text {  
                font-family: inherit;  
                font-size: 14px;  
                margin: 5px 0 0;  
            }  
            .mui-popup-buttons {  
                position: relative;  
                display: -webkit-box;  
                display: -webkit-flex;  
                display: flex;  
                height: 30px;  
                -webkit-box-pack: center;  
                -webkit-justify-content: center;  
                justify-content: center;  
            }  

            .mui-popup-button {  
                font-size: 15px;  
                line-height: 30px;  
                position: relative;  
                display: block;  
                overflow: hidden;  
                box-sizing: border-box;  
                width: 100%;  
                height: 30px;  
                padding: 0 5px;  
                cursor: pointer;  
                text-align: center;  
                white-space: nowrap;  
                text-overflow: ellipsis;  
                color: #000000;  
                /*background: rgba(49,112,143,1);*/  
                background: rgba(255,255,255,1);  
                -webkit-box-flex: 1;  
            }  

            .mui-popup-title{  
                background-color: transparent !important;  
            }  
            .mui-popup-text{  
                background-color: #FFFFFF;  
                min-height: 30px;  
                line-height: 30px;  
            }  
            .mui-table-view-cell-a{  
                padding-left: 10px !important;  
            }  
        </style>  
</head>  

<body>  
<div id="bledevice" v-show="hide" class="mui-popup mui-popup-in" style="display: block;">  
    <div class="mui-popup-inner" style="height: 300px;">  
        <div class="mui-popup-title">  
            <span lang='zh-cn' class="i18n" data-textid="选择打印机">选择打印机</span>  
        </div>  
        <div class="mui-popup-text" style="position: relative;height: 259px;">  
            <div id="scroll6" class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <div class="mui-popup-text">  
                        <span lang='zh-cn' class="i18n" data-textid="已配对设备">已配对设备</span>  
                    </div>  
                    <div class="mui-popup-select">  
                        <ul class="mui-table-view">  
                            <li v-for="obj in bound" class="mui-table-view-cell">  
                                <a class="mui-table-view-cell-a" @click="connect" v-bind:mac="obj.value" v-text="obj.text+' -- '+obj.value">  
                                    obj.text  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  
                    <div class="mui-popup-text">  
                        <span lang='zh-cn' class="i18n" data-textid="未配对设备">未配对设备</span>  
                    </div>  
                    <div class="mui-popup-select">  
                        <ul class="mui-table-view">  
                            <li v-for="obj in unbound" class="mui-table-view-cell">  
                                <a class="mui-table-view-cell-a" @click="pairconnect" v-bind:mac="obj.value" v-text="obj.text+' -- '+obj.value">  
                                    ss  
                                </a>  
                            </li>  
                        </ul>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
    <div class="mui-popup-buttons">  
        <span class="mui-popup-button mui-popup-button-bold i18n" data-textid="重新扫描" @click="rescan">重新扫描</span>  
        <span class="mui-popup-button mui-popup-button-bold i18n" data-textid="关闭" @click="close">关闭</span>  
    </div>  
</div>  
<script type="text/javascript" src="../../js/i18n/zh_cn.js" ></script>  
<script src="../../js/mui.min.js"></script>  
<script src="../../js/mui.picker.js"></script>  
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript" src="../../js/vue.js"></script>  
<script type="text/javascript" src="../../js/app.js"></script>  
<script src="../../js/mui.poppicker.js"></script>  
<script src="../../js/JPL.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript" src="js/print.js"></script>  
<script type="text/javascript">  
</script>  
</body>  

</html>

下面是js文件

mui.init({  
    swipeBack: false //启用右滑关闭功能  
});  
var menban = false;  
var mask = mui.createMask(function() {  
    return menban;  
}); //callback为用户点击蒙版时自动执行的回调；  
//mask.show(); //显示遮罩  
var hybird = true; //表示当前是混合开发状态，可以调用java，true，false状态表示是H5，不调用蓝牙  

mui.plusReady(function() {  

    if(hybird){  
        plus.nativeUI.showWaiting("加载已绑定蓝牙设备");  
        //获取已绑定设备  
        var bounded = plus.JPLplugin.getBoundedBleDevice();  
        bluetooth.bound = bounded.bounded;  
        plus.nativeUI.closeWaiting();  
    }  

});  

var bluetooth = new Vue({  
    el: '#bledevice',  
    data: {  
        hide: true,  
        mac_address: '',  
        bound: [],  
        unbound: [],  
    },  
    methods: {  
        close: function() {  
            if(hybird){  
               if(this.mac_address == ''){  
                    mui.toast('请选择一个蓝牙设备');  
                    return;  
                }else{  
                    this.hide = false;  
                    menban = true;  
                    mask.close();  
                }  
            }else{  
              this.hide = false;  
                menban = true;  
                mask.close();  
            }  
        },  
        rescan: function(e) {  
            //扫描未绑定设备  
            plus.nativeUI.showWaiting("正在搜索蓝牙设备");  
            var list = plus.JPLplugin.scanBleDevice();  
            this.unbound = list.unbonded;  
            plus.nativeUI.closeWaiting();  
        },  
        connect: function(e) {  
            var target = e.target;  
            console.log(target.getAttribute('mac'));  
            this.mac_address = target.getAttribute('mac');  
            //连接打印机  
            //plus.nativeUI.showWaiting('正在连接打印机');  
            plus.nativeUI.showWaiting(_DEVICE_PRINTER_);  
            setTimeout(function(){  
                if(!plus.JPLplugin.OpenPrinter(bluetooth.mac_address)) {  
                    //mui.toast("打印机连接失败，请再试一次");  
                    mui.toast(_DEVICE_AGAIN_);  
                    plus.nativeUI.closeWaiting();  
                    return;  
                }else{  
                    //mui.toast("打印机连接成功");  
                    mui.toast(_DEVICE_SUCCESS_);  
                    plus.nativeUI.closeWaiting();  
                    //document.getElementById('bledevice').style.display = "none";  
                    bluetooth.hide = false;  
                    menban = true;  
                    mask.close();  
                    //连接成功后，获取打印机状态  
                    if(plus.JPLplugin.getPrinterState()){  
                       print();  
                    }  
                }  
            },200);  

        },  
        pairconnect: function(e) {  
            var target = e.target;  
            var flag = plus.JPLplugin.pairBle($(target).attr('mac'));  
            if(flag) {  
                this.mac_address = target.getAttribute('mac');  
                this.hide = false;  
                menban = true;  
                mask.close();  
                $('#search').focus();  
            } else {  
                //mui.toast("配对失败");  
                mui.toast(_DEVICE_FAIL_);  
            }  

        }  
    }  
});  

function print() {  
        if (!bluetooth.mac_address) {  
            mui.toast('请选择蓝牙打印机');  
            return;  
        }  

        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(bluetooth.mac_address);  
        plus.android.importClass(device);  
        bluetoothSocket = device.createInsecureRfcommSocketToServiceRecord(uuid);  
        plus.android.importClass(bluetoothSocket);  

        if (!bluetoothSocket.isConnected()) {  
            console.log('检测到设备未连接，尝试连接....');  
            bluetoothSocket.connect();  
        }  

         console.log(bluetoothSocket.isConnected());  

        if (bluetoothSocket.isConnected()) {  
            var outputStream = bluetoothSocket.getOutputStream();  
            plus.android.importClass(outputStream);  
            var string = "^XA" +   //开始标签  

                         "^JMA^LL1800^PW1000^MD10^PR2^PON^LRN^LH0,0" + "\r\n" +   //毫米单位  宽  

                         "^FO0,100" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDDescription:^FS" + "\r\n" +  

                         "^FO0,180" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDGW 40V 2.0Ah 8-in. GEN II Polesaw w/ B&C^FS" + "\r\n" +  

                         "^FO0,350" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDITEM#: ^FS" + "\r\n" +  

                         "^FO300,350" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FD1403702^FS" + "\r\n" +  

                         "^FO00,410^BY3" + "\r\n" + "^BCN,100,Y,N,N" + "\r\n" + "^FD 1403702 ^FS" + "\r\n" +  

                         "^FO0,600" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDQTY: ^FS" + "\r\n" +  

                         "^FO400,600" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDPCS: ^FS" + "\r\n" +  

                         "^FO00,700" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDG.W: ^FS" + "\r\n" +  

                         "^FO400,700" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDKGS ^FS" + "\r\n" +  

                         "^FO550,700" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDN.W: ^FS" + "\r\n" +  

                         "^FO910,700" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDKGS ^FS" + "\r\n" +  

                         "^FO00,800" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDMade in China ^FS" + "\r\n" +  

                        "^FO00,900" + "\r\n" + "^A0,N,50,50" + "\r\n" + "^FDPallet Code:  PA1122061500000011^FS" + "\r\n" +  

                         "^FO00,1000^BY3" + "\r\n" + "^BCN,200,Y,N,N" + "\r\n" + "^FD PA1122061500000011 ^FS" + "\r\n" +  
                         "^XZ"; //横线  

            var bytes = plus.android.invoke(string, 'getBytes', 'UTF-8');  
            outputStream.write(bytes);  
            outputStream.flush();  

            device = null //这里关键  
            bluetoothSocket.close(); //必须关闭蓝牙连接否则意外断开的话打印错误  

        }  

};  

mui.back = function() {  
    var flag = false;  
    for(var key in item_one.records) {  
        flag = true;  
        break;  
    }  
    if(flag) {  
        var btnArray = [_NO_, _YES_];  
        mui.confirm(_WDDCH_QUIT_CONFIRM_, _NULL_TITLE_, btnArray, function(e) {  
            if(e.index == 1) { //退出  

                plus.webview.currentWebview().close();  
            } else {  
                //return false;  
            }  
        }, 'div');  
    } else {  
        plus.webview.currentWebview().close();  
    }  
}