js使用 webSocket 连接菜鸟平台、微信视频号平台、拼多多、京东、抖音小店、快手、小红书、得物直发、唯品会打印组件，唤起打印机实现打印功能

1.创建一个printMixins.js文件

import webPrint from '@/utils/print.js' //唯品会专用

export default {
  data() {
    return {
      printerList: [], //打印机列表
      printer: '' //选中打印机名字，微信组件用
    }
  },
  mounted() {
    this.printWX({
      requestID: '12345',
      command: 'getPrinterList'
    })
  },
  methods: {
   // datas 后台返回数据，1.返回打印类型type 2.返回打印参数
    getPrint(datas) {
      console.log('测试打印面板===========', datas)
      for (var i = 0; i < datas.length; i++) {
        var type = datas[i].type
        if (type == 'caiNiao') {
          //菜鸟
          this.printCaiNao(datas[i].message)
        }
        if (type == 'PDD') {
          //拼多多
          this.printPdd(datas[i].message)
        }
        if (type == 'JD') {
          //京东
          this.printJd(datas[i].message)
        }
        if (type == 'DYXD') {
          //抖音
          this.printDyxd(datas[i].message)
        }
        if (type == 'KS') {
          //快手
          this.printKs(datas[i].message)
        }
        //唯品会 -特殊处理
        if (type === 'VOP') {
          const dom = datas[i].message?.reduce((cur, pre) => {
            return cur + '<div style="page-break-after: always;"></div>' + pre
          })
          this.printVOP(dom)
        }
        //小红书
        if (type === 'XHS') {
          this.printXHS(datas[i].message)
        }
        //微信
        if (type === 'WXSPHXD') {
          this.printWX({ ...datas[i].message, printer: this.printer })
        }
        if (type === 'DWZF') {
          this.printDw(datas[i].message)
        }
      }
    },
   // 唯品会打印
    printVOP(message) {
      webPrint(message, { noPrintParent: false })
    },
    printXHS(message) {
      var ws = new WebSocket('ws://localhost:14528')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {}
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('小红书打印组件已关闭...', true)
      }
    },
    printWX(message) {
      var ws = new WebSocket('ws://127.0.0.1:12705')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = e => {
        const data = JSON.parse(e.data)
        if (data.command === 'getPrinterList') {
          this.printerList = data.printerList
          this.printer = this.printerList[0].name
        }
      }
      ws.onerror = () => {
        console.error('链接失败')
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        // alert('微信打印组件已关闭...', true)
      }
    },
    printCaiNao(message) {
      var ws = new WebSocket('ws://127.0.0.1:13528')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据d
        console.log('发送给服务端数据:' + JSON.stringify(message))
        console.log(message)
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        var received_msg = evt.data
        console.log('接收服务端数据：' + received_msg)
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('菜鸟打印组件已关闭...', true)
      }
    },
    printPdd(message) {
      var ws = new WebSocket('ws://127.0.0.1:5000')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据
        console.log('发送给服务端数据:' + JSON.stringify(message))
        console.log(message)
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        var received_msg = evt.data
        console.log('接收服务端数据：' + received_msg)
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('拼多多打印组件已关闭...', true)
      }
    },
    printJd(message) {
      var ws = new WebSocket('ws://127.0.0.1:9113')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据
        console.log('发送给服务端数据:' + JSON.stringify(message))
        console.log(message)
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        var received_msg = evt.data
        console.log('接收服务端数据：' + received_msg)
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('京东打印组件已关闭...', true)
      }
    },
    printDyxd(message) {
      var ws = new WebSocket('ws://127.0.0.1:13888')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据d
        console.log('发送给服务端数据:' + JSON.stringify(message))
        console.log(message)
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        var received_msg = evt.data
        console.log('接收服务端数据：' + received_msg)
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('抖音打印组件已关闭...', true)
      }
    },
    printKs(messages) {
      var timestamp = new Date().getTime()
      var req = '{"cmd": "getPrinters","requestID": "' + timestamp + '","version": "1.0"}'
      var ws = new WebSocket('ws://127.0.0.1:16888/ks/printer')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据
        console.log('获取打印机转换后的JSON：' + req)
        ws.send(req)
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        // var received_msg = eval('(' + evt.data + ')')
        var received_msg = evt.data
        console.log('----------------接收获取打印机数据111：' + JSON.parse(received_msg).defaultPrinter)
        var defaultPrinter = JSON.parse(received_msg).defaultPrinter
        if (defaultPrinter) {
          // messages = JSON.stringify(messages)
          console.log('messages', messages)
          for (var i = 0; i < messages.length; i++) {
            var message = messages[[i]]
            message.task.printer = defaultPrinter
            console.log(message)
            ws.send(JSON.stringify(message))
            // 接收服务端数据时触发事件
            ws.onmessage = function(evt) {
              var received_msgPrint = evt.data
              console.log('接收服务端返回数据：' + received_msgPrint)
              var received_msgJson = eval('(' + received_msgPrint + ')')
              if (received_msgJson.cmd === 'notifyPrintResult') {
                return true
              }
            }
            // setTimeout(function() {
            //   console.log('延迟1000毫秒')
            // }, 1 * 1000) //延迟5000毫秒
          }
        } else {
          alert('获取默认打印机信息失败、请配置默认打印机：' + JSON.stringify(received_msg))
        }
      }
      ws.onclose = function() {
        alert('快手打印组件已关闭...', true)
      }
    },
    printDw(message) {
      console.log('得物直发')
      var ws = new WebSocket('ws://127.0.0.1:23825')
      // 建立 web socket 连接成功触发事件
      ws.onopen = function() {
        //使用 send() 方法发送数据
        console.log('发送给服务端数据:' + JSON.stringify(message))
        console.log(message)
        ws.send(JSON.stringify(message))
      }
      // 接收服务端数据时触发事件
      ws.onmessage = function(evt) {
        var received_msg = evt.data
        console.log('接收服务端数据：' + received_msg)
      }
      // 断开 web socket 连接成功触发事件
      ws.onclose = function() {
        alert('得物打印组件已关闭...', true)
      }
    },
    changePrinter(v) {
      console.log('printer', v)
      this.printer = v
    }
  }
}

2.针对唯品会打印特殊处理文件print.js

const isDOM = obj => {
  return typeof HTMLElement === 'object'
    ? obj instanceof HTMLElement
    : obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
}
/* const extend = (obj, obj2) => {
  for (const k in obj2) {
    if (obj2.hasOwnProperty(k)) obj[k] = obj2[k]
  }
  return obj
} */
const isInBody = node => {
  return node === document.body ? false : document.body.contains(node)
}
const wrapperRefDom = refDom => {
  let prevDom = null
  let currDom = refDom
  if (!isInBody(currDom)) return currDom

  while (currDom) {
    if (prevDom) {
      const element = currDom.cloneNode(false)
      element.appendChild(prevDom)
      prevDom = element
    } else {
      prevDom = currDom.cloneNode(true)
    }
    currDom = currDom.parentElement
  }
  return prevDom
}
const getStyle = options => {
  let str = ''
  const styles = document.querySelectorAll('style,link')
  for (let i = 0; i < styles.length; i++) {
    str += styles[i].outerHTML
  }
  str += '<style>' + (options.noPrint ? options.noPrint : '.no-print') + '{display:none;}</style>'
  return str
}
const getHtml = (dom, options) => {
  const inputs = document.querySelectorAll('input')
  const textAreas = document.querySelectorAll('textarea')
  const selects = document.querySelectorAll('select')

  for (let k = 0; k < inputs.length; k++) {
    if (inputs[k].type === 'checkbox' || inputs[k].type === 'radio') {
      if (inputs[k].checked === true) {
        inputs[k].setAttribute('checked', 'checked')
      } else {
        inputs[k].removeAttribute('checked')
      }
    } else if (inputs[k].type === 'text') {
      inputs[k].setAttribute('value', inputs[k].value)
    } else {
      inputs[k].setAttribute('value', inputs[k].value)
    }
  }

  for (let k2 = 0; k2 < textAreas.length; k2++) {
    if (textAreas[k2].type === 'textarea') {
      textAreas[k2].innerHTML = textAreas[k2].value
    }
  }

  for (let k3 = 0; k3 < selects.length; k3++) {
    if (selects[k3].type === 'select-one') {
      const child = selects[k3].children
      for (const i in child) {
        if (child[i].tagName === 'OPTION') {
          if (child[i].selected === true) {
            child[i].setAttribute('selected', 'selected')
          } else {
            child[i].removeAttribute('selected')
          }
        }
      }
    }
  }
  return options.noPrintParent ? dom.outerHTML : wrapperRefDom(dom).outerHTML
}
const toPrint = frameWindow => {
  try {
    setTimeout(function() {
      frameWindow.focus()
      try {
        if (!frameWindow.document.execCommand('print', false, null)) {
          frameWindow.print()
        }
      } catch (e) {
        frameWindow.print()
      }
      frameWindow.close()
    }, 10)
  } catch (err) {
    console.log('err', err)
  }
}
const writeIframe = content => {
  const iframe = document.createElement('iframe')
  const f = document.body.appendChild(iframe)
  iframe.id = 'myIframe'
  iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;')
  const w = f.contentWindow || f.contentDocument
  const doc = f.contentDocument || f.contentWindow.document
  doc.open()
  doc.write(content)
  doc.close()
  iframe.onload = function() {
    toPrint(w)
    setTimeout(function() {
      document.body.removeChild(iframe)
    }, 100)
  }
}

const Print = (dom, options) => {
  options = { ...options, noPrint: '.no-print' }
  let targetDom
  if (typeof dom === 'string') {
    try {
      targetDom = document.querySelector(dom)
    } catch {
      //自定义打印内容HTML
      const createDom = document.createElement('div')
      createDom.innerHTML = dom
      targetDom = createDom
      targetDom.querySelector('#ddhtmDiv').style.transform = 'scale(0.8)'
      targetDom.querySelector('#ddhDiv').style.transform = 'scale(0.8)'

      const destRouteDiv = targetDom.querySelector('#destRouteDiv')
      destRouteDiv.style.transform = 'scale(0.8)'
      destRouteDiv.style.height = '8mm'
      destRouteDiv.style.lineHeight = '8mm'
      const ydhtmDiv = targetDom.querySelector('#ydhtmDiv')
      ydhtmDiv.style.transform = 'scaleY(1.4)'
      ydhtmDiv.style.top = '50mm'
      // document.body.append(createDom)
      // console.log(createDom)
    }
  } else {
    targetDom = isDOM(dom) ? dom : dom.$el
  }

  const content = getStyle(options) + getHtml(targetDom, options)
  writeIframe(content)
}

export default Print

3.目录及使用