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)
    }
  }