Vue 和 Zebra 打印机连接直接打印条码

首先，Vue是无法调用Windows系统功能的，那么打印只能通过浏览器的打印功能来实现，这样显然不行，效率太低，而且斑马打印机是通过ZPL指令进行打印的，用浏览器打印非常不方便。

两个办法：

1. 换技术，使用能够调用Windows Api的语言进行开发功能。
2. 转手给后台程序打印。

我继续用Vue，用C#写了一个后台打印程序，C#开启websocket服务，Vue连接websocket进行通讯，如果Vue接收到ZPL指令就发送后台打印程序，由后台打印程序完成条码打印。

后台打印程序Websocket，保持心跳。

using Fleck;
using log4net;
using System;
using System.Collections.Generic;
using System.Text;

namespace CiemisPrintService
{
    class WebSocketBootStrap
    {

        public static void Start()
        {
            ILog logger = LogManager.GetLogger(typeof(FleckLog));

            FleckLog.LogAction = (level, message, ex) =>
            {
                switch (level)
                {
                    case LogLevel.Debug:
                        SimpleLogHelper.LogInfo(message);
                        break;
                    case LogLevel.Error:
                        SimpleLogHelper.LogError(message);
                        break;
                    case LogLevel.Warn:
                        SimpleLogHelper.LogError(message);
                        break;
                    default:
                        SimpleLogHelper.LogInfoSuccess(message);
                        break;
                }
            };

            var server = new WebSocketServer("ws://0.0.0.0:8181");
            server.SupportedSubProtocols = new[] { "v10.stomp", "v11.stomp" };
            server.RestartAfterListenError = true;
            server.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    string clientUrl = socket.ConnectionInfo.ClientIpAddress + ":" + socket.ConnectionInfo.ClientPort;
                    SimpleLogHelper.LogInfoSuccess("连接进入:"+ clientUrl);
                };
                socket.OnClose = () => SimpleLogHelper.LogError("服务关闭!"); ;
                socket.OnMessage = message => {
                    if (message.Equals("ping"))
                    {
                        socket.Send("pong");
                    }
                    else {
                        ZebraLibrary.ZebraPrintHelper.PrinterType = ZebraLibrary.DeviceType.DRV;
                        ZebraLibrary.ZebraPrintHelper.PrinterName = MainForm.mainWindow.GetDefaultPrinterName();
                        ZebraLibrary.ZebraPrintHelper.PrintCommand(message);
                    }
                    SimpleLogHelper.LogInfoSuccess(message);
                };
                socket.OnError = e =>
                {
                    SimpleLogHelper.LogError(e.Message);
                };
                socket.OnPing = ping =>
                {
                    socket.SendPong(Encoding.Default.GetBytes("pong"));
                    SimpleLogHelper.LogInfoSuccess(Encoding.Default.GetString(ping));
                };

            });

        }

    }
}

代码很少，很简单的功能。

Vue Socket进行连接。

  initSocket () {
      // 实例化socket
      // 监听socket连接
      this.socket.onopen = this.open
      // 监听socket错误信息
      this.socket.onerror = this.error
      // 监听socket消息
      this.socket.onmessage = this.getMessage
      this.socket.onclose = this.close
    },
    reInitSocket () {
      // 实例化socket
      // 监听socket连接
      this.socket = new WebSocket(MQTT_SERVICE)
      this.socket.onopen = this.open
      // 监听socket错误信息
      this.socket.onerror = this.error
      // 监听socket消息
      this.socket.onmessage = this.getMessage
      this.socket.onclose = this.close
    },
    countDownChanged (dismissCountDown) {
      this.dismissCountDown = dismissCountDown
    },
    showAlert () {
      this.dismissCountDown = this.dismissSecs
    },
    keepAlive () {
      var timeout = 1000
      if (this.socket.readyState === WebSocket.OPEN) {
        this.$store.commit('PING', true)
        this.socket.send('ping')
      }
      this.timeId = setTimeout(this.keepAlive, timeout)
    },
    cancelKeepAlive () {
      if (this.timeId) {
        clearTimeout(this.timeId)
      }
    },
    open: function () {
      console.log('socket连接成功')
      this.$store.commit('PING', true)
      this.$global.setWs(this.socket)
      JSON.parse(localStorage.getItem('zpl')).forEach((item, i) => {
        this.socket.send(item)
      })
      localStorage.setItem('zpl', '')
      this.keepAlive()
    },
    error: function () {
      console.log('连接错误')
    },
    getMessage: function (msg) {
    },
    send: function (msg) {
      this.socket.send(msg)
    },
    close: function () {
      window._VMA.$emit('PRINTER_ERROR', {
        time: 0,
        show: true,
        text: '打印机已断开连接',
        type: 'danger'
      })
      this.$store.commit('PING', false)
      console.log('socket已经关闭')
      setTimeout(() => {
        this.reInitSocket()
      }, 5000)
    }
  }