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

最新推荐文章于 2024-04-27 22:13:08 发布
最新推荐文章于 2024-04-27 22:13:08 发布
阅读量1k 收藏 1
点赞数 1
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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();  
    }  
}

 

 

屋里珍珠。
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
【Python_Zebra斑马打印机编程学习笔记（四）】ZPL的一些简单指令
禾戊之昂的博客
02-26 2029
本文介绍 ZPL 的一些简单指令，有需要的读者可以点赞收藏，也欢迎在评论区进行讨论。
斑马Zebra ZPL语言编程手册
06-20
最新版斑马Zebra ZPLII语言编程手册.
通过JavaScript使用ZPL指令打印标签，实现过程总结
weixin_52835211的博客
05-16 2708
通过JavaScript使用ZPL指令进行标签打印，该文章归纳了实现过程，ZPL的学习文档、解决文中乱码及图片打印问题的文章，供大家学习。
uniapp(vue3) H5页面连接打印机并打印
qq_26711723的博客
03-22 799
三、运行代码调用浏览器打印，主要使用的是window.print()功能。下面使用的是基于ifream的，这样可以控制到具体打印范围，全屏打印可以考虑不用。（原理应该就是打印机打印PDF）一、找到对应厂商打印机的驱动并在windows上面安装。查看是否安装完成可以在：控制面板->查看设备和打印机，找到对应打印机驱动是否安装完成。四、打印样式不全或者其他，可以考虑设置打印格式 或者 代码样式调整。二、打印机USB连接电脑。
调用蓝牙打印机示例源代码
05-12
C++ Builder XE7 调用蓝牙打印机示例源代码
一种基于浏览器的自动小票机打印实现方案(js版)
12-07
1、使用场景 用户在浏览器做了某项操作后，自动打印小票。 2、测试方式 2.1 JavaScript实现 尝试了很多办法，最终都会出现一个弹出框，让用户选择打印机。不符合我们需求。 2.2 lodop 功能比较强大，但是收费的。暂不考虑。 2.3 PAZU 功能也很强大，免费许可。非常赞！ 详情：http://www.4fang.net/article/tech/pazu_tprinter.html 实现过程： 2.3.1 打印详情页面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>小票</tit
斑马打印机ZPL语言编程实战
热门推荐
btmood的博客
08-24 1万+
ZPL是斑马条码打印机工业型号用的编程语言。利用这些编程语言，编辑好一个打印的指令集，发送给条码打印机，条码打印机就会把ZPL所绘制的标签打印出来。
使用ZPL控制Zebra打印机
qq_42860989的博客
12-09 5389
Zebra编程语言 (ZPL)是所有 ZPL 兼容打印机使用的命令语言。可用于绘制文本、形状、条形码和图像等元素，组合这些元素。打印机使用它作为指令来创建打印在标签上的图像。
Zebra标签指令，ZPL的使用记录
qq_42322158的博客
07-07 2045
一般在打印快递或者其他标签时，通常会生成PDF来打印，但是也可以直接使用ZPL指令来打印，当然前提用的是支持这种语言的打印机。
斑马打印机 ZPLII命令集手册
08-26
英文的,可以按命令字母目录转到对应命令语法解释,很方便, 英文都是很简明易懂的
斑马打印机ZPL指令说明
09-21
斑马打印机ZPL指令说明，使用ZPL指令编写斑马打印机打印程序，使用C#编写上位机程序也可以进行控制打印机进行打印
html5-bluetooth-demo
04-25
html5-bluetooth-demo H5实现蓝牙连接demo
zpl_manual（斑马打印机指令集）_斑马打印机指令集_zpl_
10-01
斑马打印机指令集方便有需求的人学习使用ZPL指令
h5连接手持蓝牙打印机，打印二维码和条码
06-07
mui h5连接手持蓝牙打印机，打印二维码和条码
Java实现斑马打印机ZPL指令打印，源码，可运行
02-10
Java实现斑马打印机ZPL指令打印，源码，可运行。Java调用Zebra打印机，采用ZPL指令。支持打印中文，不需要ts24.lib文件，支持打印二维码。
使用java实现，通过zpl指令调用 zebra打印机打印标签，含二维码及中文
05-10
两种方案介绍，整个源码可以运行，源码中包含zpl中文手册及需要使用的第三方库及jar包，demo完美解决中文打印及二维码中中文乱码问题
Zebra打印机ZPL指令编程手册
05-17
Zebra打印机ZPLII指令编程手册，Programming Guide for ZPLII ZBI SGD Mirror WML P1012728-004_中文版
Zebra斑马打印机CPCL和ZPL中文手册.zip
08-07
Zebra斑马打印机CPCL和ZPL中文手册.zip
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
最新发布
qq_51752841的博客
04-27 498
前端HTML5学习2（新增多媒体标签，H5的兼容性处理）
斑马打印机zpl指令使标签格式
05-24
斑马打印机使用的是 ZPL（Zebra Programming Language）指令集，可以通过发送 ZPL 指令来控制打印机的行为，从而实现标签格式化的需求。 以下是一个简单的 ZPL 指令示例，可以将其发送给斑马打印机来打印一个包含文本和条形码的标签： ``` ^XA ^FO50,50^A0N,50,50^FDHello World!^FS ^FO50,100^BY3^B3N,N,100,Y^FD0123456789^FS ^XZ ``` 这个 ZPL 指令序列实现了以下功能： 1. `^XA` 和 `^XZ` 指令将整个标签格式定义包裹在其中； 2. `^FO` 指令指定了文本和条形码的位置； 3. `^A0` 指令定义了文本的字体和大小； 4. `^BY` 和 `^B3` 指令定义了条形码的宽度和类型以及编码的数据； 5. `^FS` 指令表示一个字段的结束。 通过类似这样的 ZPL 指令序列，可以实现各种标签格式化的需求。需要注意的是，ZPL 指令集非常庞大，需要根据具体需求选择合适的指令组合来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值