vue+lodop打印快递面单

1.引入官方的LodopFuncs.js

var CreatedOKLodop7766 = null; var CLodopIsLocal

// ====判断是否需要 Web打印服务CLodop:===
// ===(不支持插件的浏览器版本需要用它)===
export function needCLodop() {
  try {
    var ua = navigator.userAgent
    if (ua.match(/Windows\sPhone/i)) { return true }
    if (ua.match(/iPhone|iPod|iPad/i)) { return true }
    if (ua.match(/Android/i)) { return true }
    if (ua.match(/Edge\D?\d+/i)) { return true }

    var verTrident = ua.match(/Trident\D?\d+/i)
    var verIE = ua.match(/MSIE\D?\d+/i)
    var verOPR = ua.match(/OPR\D?\d+/i)
    var verFF = ua.match(/Firefox\D?\d+/i)
    var x64 = ua.match(/x64/i)
    if ((!verTrident) && (!verIE) && (x64)) { return true } else if (verFF) {
      verFF = verFF[0].match(/\d+/)
      if ((verFF[0] >= 41) || (x64)) { return true }
    } else if (verOPR) {
      verOPR = verOPR[0].match(/\d+/)
      if (verOPR[0] >= 32) { return true }
    } else if ((!verTrident) && (!verIE)) {
      var verChrome = ua.match(/Chrome\D?\d+/i)
      if (verChrome) {
        verChrome = verChrome[0].match(/\d+/)
        if (verChrome[0] >= 41) { return true }
      }
    }
    return false
  } catch (err) {
    return true
  }
}

// ====页面引用CLodop云打印必须的JS文件,用双端口(8000和18000）避免其中某个被占用：====
if (needCLodop()) {
  var src1 = 'http://localhost:8000/CLodopfuncs.js?priority=1'
  var src2 = 'http://localhost:18000/CLodopfuncs.js?priority=0'

  var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
  var oscript = document.createElement('script')
  oscript.src = src1
  head.insertBefore(oscript, head.firstChild)
  oscript = document.createElement('script')
  oscript.src = src2
  head.insertBefore(oscript, head.firstChild)
  CLodopIsLocal = !!((src1 + src2).match(/\/\/localho|\/\/127.0.0./i))
}

// ====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {
  var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>"
  var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>"
  var strHtmFireFox = "<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>"
  var strHtmChrome = "<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>"
  var strCLodopInstall_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>"
  var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）"
  var strCLodopInstall_3 = '，成功后请刷新本页面。</font>'
  var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>"
  var LODOP
  try {
    var ua = navigator.userAgent
    var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))
    if (needCLodop()) {
      try {
        LODOP = getCLodop()
      } catch (err) {}
      if (!LODOP && document.readyState !== 'complete') {
        alert('网页还没下载完毕，请稍等一下再操作.')
        return
      }
      if (!LODOP) {
        document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
        return
      } else {
        if (CLODOP.CVERSION < '3.0.7.5') {
          document.body.innerHTML = strCLodopUpdate + document.body.innerHTML
        }
        if (oEMBED && oEMBED.parentNode) { oEMBED.parentNode.removeChild(oEMBED) }
        if (oOBJECT && oOBJECT.parentNode) { oOBJECT.parentNode.removeChild(oOBJECT) }
      }
    } else {
      var is64IE = isIE && !!(ua.match(/x64/i))
      // =====如果页面有Lodop就直接使用，没有则新建:==========
      if (oOBJECT || oEMBED) {
        if (isIE) { LODOP = oOBJECT } else { LODOP = oEMBED }
      } else if (!CreatedOKLodop7766) {
        LODOP = document.createElement('object')
        LODOP.setAttribute('width', 0)
        LODOP.setAttribute('height', 0)
        LODOP.setAttribute('style', 'position:absolute;left:0px;top:-100px;width:0px;height:0px;')
        if (isIE) { LODOP.setAttribute('classid', 'clsid:2105C259-1E0C-4534-8141-A753534CB4CA') } else { LODOP.setAttribute('type', 'application/x-print-lodop') }
        document.documentElement.appendChild(LODOP)
        CreatedOKLodop7766 = LODOP
      } else { LODOP = CreatedOKLodop7766 }
      // =====Lodop插件未安装时提示下载地址:==========
      if ((!LODOP) || (!LODOP.VERSION)) {
        if (ua.indexOf('Chrome') >= 0) { document.body.innerHTML = strHtmChrome + document.body.innerHTML }
        if (ua.indexOf('Firefox') >= 0) { document.body.innerHTML = strHtmFireFox + document.body.innerHTML }
        document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML
        return LODOP
      }
    }
    if (LODOP.VERSION < '6.2.2.6') {
      if (!needCLodop()) { document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML }
      return LODOP
    }
    // ===如下空白位置适合调用统一功能(如注册语句、语言选择等):==

    // =======================================================
    return LODOP
  } catch (err) {
    alert('getLodop出错:' + err)
  }
}

2.根据不同的面单编写不同的模板

比如物流028

<template>
  <div style="width: 98mm; height: 98mm;" id="print_content">
    <table width="100%" height="100" cellspacing="0" cellpadding="0" border="0" style="border: 1px dashed #999999; margin: 0px">
      <tbody>
        <tr>
          <td>
            <div align="right">
              <table width="100%" cellspacing="0" cellpadding="1" border="0" style="border-bottom: 5px #000000 solid;">
                <tbody>
                  <tr>
                    <td rowspan="2">
                      {{ order.transportationModeChinese }}
                    </td>

                    <td width="" valign="top" rowspan="2">
                      <span style="font-size: 18px;font-weight: 600">{{ order.logistics }}</span>
                    </td>
                    <td width="1" valign="top" rowspan="2">
                      <div align="right" />
                    </td>
                  </tr>

                </tbody>
              </table>
            </div>
          </td>
        </tr>

        <tr>
          <td>
            <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-bottom: 5px #000000 solid;">
              <tbody>
                <tr>
                  <td width="40%" valign="top" rowspan="2">
                    <span style="margin-right: 20px" class="STYLE6"> From: {{ order.fromAddress }} </span>
                    <div align="center" />
                  </td>
                  <td width="60%" valign="top">
                    <span class="STYLE4"> Send To:
                      <span class="fontStyle2">{{ order.buyerName }}</span><br>
                      {{ order.street }} {{ order.street2 }}<br>
                      {{ order.buyerCity }} {{ order.buyerStateOrProvince }} {{ order.buyerPostalCode }}<br>
                      <span class="fontStyle2">
                        {{ order.buyerCountryEn }}
                      </span>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td valign="top">Phone: {{ order.buyerTel }} {{ order.buyerMobile }}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td height="35">
            <table width="100%" cellspacing="0" cellpadding="0" bordercolor="#000000" border="0" bgcolor="#000000">
              <tbody>
              <tr>
                <td bgcolor="#FFFFFF" style="font-size: 13px;line-height: 14px;">
                  <div style="height: 50mm; overflow: hidden; position: relative;">
                    <span v-for="(item, index) in order.orderItems" :key="index">
                      {{item.productSku }} [{{item.locationNumber }}]*{{item.saleQuantity }}<br>
                    </span>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Waybill028',
  props: {
    order: {
      required: true,
      type: Object,
      default: () => {}
    },
    doPrint: {
      type: Function
    }
  },
  watch: {
    'order.printDate': {
      handler: function(val, oldVal) {
        this.doPrint()
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
  .STYLE2 {font-size: 14px}
  .STYLE4 {font-size: 14px; font-weight: bold;line-height: 14px; }
  .STYLE6 {font-size: 10px}
  .fontStyle2{font-size:18px; font-weight: bold;}
  .table2{border-collapse:collapse;font-size:9px}
  .table2 td{ border:1px solid #000}
</style>

重点：1.我们在每个面单模板中使用了watch来监听父组件传来的订单数据

           2.父组件把打印函数传到子组件来回调

3.编写打印主页面

<template>
  <div class="app-container" @click="formFocus">
    <el-row :gutter="20">
      <el-col :md="4">

        <el-form :label-position="'top'" label-width="80px" :model="scan" style="margin-top: 100px" @submit.native.prevent>
          <el-form-item label="Order ID">
            <el-input ref="order_id" v-model="scan.orderId" @keyup.enter.native="handlePrint" />
          </el-form-item>

        </el-form>
      </el-col>
      <el-col :md="10">
        <div id="check_region">
          <el-table
            border
            :data="printOrders"
            style="width: 100%">
            <el-table-column
              prop="orderId"
              label="订单号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="logistics"
              label="物流"
              width="180">
            </el-table-column>
            <el-table-column
              prop="status"
              label="状态">
              <el-tag type="success">成功</el-tag>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :md="10">
        <waybill028 v-if="order.logistics == '028'" :order="order" :doPrint="doPrint"  />
        <waybill034 v-if="order.logistics == '034'" :order="order" :doPrint="doPrint"  />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLodop } from '@/tools/lodop/LodopFuncs'
import { getOrder } from '@/api/order'

export default {
  components: {
    waybill028: () => import('@/views/waybill/eub/028'),
    waybill034: () => import('@/views/waybill/yun-express/034')
  },
  data() {
    return {
      scan: {
        orderId: null
      },
      order: {
        orderId: null,
        logistics: null,
        printDate: new Date().getTime,
        orderItems: []
      },
      printOrders: []
    }
  },
  created() {
    this.formFocus()
  },
  methods: {
    getDate() {
      return new Date().getTime()
    },
    formFocus() {
      this.$nextTick(() => {
        this.$refs.order_id.focus()
      })
    },
    handlePrint: function() {
      getOrder(this.scan.orderId).then(response => {
        this.scan.orderId = null
        this.order = response.data
        this.printOrders.unshift(this.order)
        if (this.printOrders.length > 10) {
          this.printOrders.pop()
        }
        this.order.printDate = this.getDate()
      })
    },
    doPrint() {
      this.$nextTick(() => {
        const LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'))
        LODOP.PRINT_INIT('打印')
        LODOP.ADD_PRINT_HTM(0, 0, '100mm', '100mm', document.getElementById('print_content').innerHTML)
        LODOP.PREVIEW()
      })
    }
  }
}
</script>

4.最终效果图