vue使用lodop.js实现前端标签打印

最近做项目， 需要使用到类似顺丰标签的那种标签打印， 需实现单打和批量打印，由于打印的功能是给到国外的同事使用，纸张大小为4*6， 有点特殊，国外打印机和国内的也不一样， 所以调试的时候也是花费了挺多时间， 最后采用的是容大的标签打印机和lodop 的结合使用， 这里重点记录下打印的实现方式。

使用步骤

1、 lodop.js 下载驱动和插件， 传送门：http://www.c-lodop.com/download.html​​​​​​
2、 将下载的插件放在静态文件夹下，其中注意的需要设置下加密秘钥， 可以用于删除水印 （官方代码未写， 需要购买正版获取秘钥）， 下面直接贴代码

var CreatedOKLodop7766=null;

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
  try{
    var ua=navigator.userAgent;
    if (ua.match(/Windows\sPhone/i) !=null) return true;
    if (ua.match(/iPhone|iPod/i) != null) return true;
    if (ua.match(/Android/i) != null) return true;
    if (ua.match(/Edge\D?\d+/i) != null) 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==null)&&(verIE==null)&&(x64!==null))
      return true; else
    if ( verFF !== null) {
      verFF = verFF[0].match(/\d+/);
      if ((verFF[0]>= 42)||(x64!==null)) return true;
    } else
    if ( verOPR !== null) {
      verOPR = verOPR[0].match(/\d+/);
      if ( verOPR[0] >= 32 ) return true;
    } else
    if ((verTrident==null)&&(verIE==null)) {
      var verChrome=ua.match(/Chrome\D?\d+/i);
      if ( verChrome !== null ) {
        verChrome = verChrome[0].match(/\d+/);
        if (verChrome[0]>=42) return true;
      };
    };
    return false;
  } catch(err) {return true;};
};

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var oscript = document.createElement("script");
  oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
  head.insertBefore( oscript,head.firstChild );

  //引用双端口(8000和18000）避免其中某个被占用：
  oscript = document.createElement("script");
  oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
  head.insertBefore( oscript,head.firstChild );
};

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){
  var strHtmInstall="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
  var strHtmUpdate="
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
  var strHtm64_Install="
打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。";
  var strHtm64_Update="
打印控件需要升级!点击这里执行升级,升级后请重新进入。";
  var strHtmFireFox="

（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）";
  var strHtmChrome="

(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）";
  var strCLodopInstall="
CLodop云打印服务(localhost本地)未安装启动!点击这里执行安装,安装后请刷新页面。";
  var strCLodopUpdate="
CLodop云打印服务需升级!点击这里执行升级,升级后请刷新页面。";
  var LODOP;
  try{
    var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
    if (needCLodop()) {
      try{ LODOP=getCLodop();} catch(err) {};
      if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好，请稍后再试！"); return;};
      if (!LODOP) {
        // if (isIE) document.write(strCLodopInstall); else
          // document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
        // return;
      } else {

        if (CLODOP.CVERSION<"3.0.0.2") {
          if (isIE) document.write(strCLodopUpdate); else
            document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML;
        };
        if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
      };
    } else {
      var is64IE  = isIE && (navigator.userAgent.indexOf('x64')>=0);
      //=====如果页面有Lodop就直接使用，没有则新建:==========
      if (oOBJECT!=undefined || oEMBED!=undefined) {
        if (isIE) LODOP=oOBJECT; else  LODOP=oEMBED;
      } else if (CreatedOKLodop7766==null){
        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==null)||(typeof(LODOP.VERSION)=="undefined")) {
        if (navigator.userAgent.indexOf('Chrome')>=0)
          document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML;
        if (navigator.userAgent.indexOf('Firefox')>=0)
          document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;
        if (is64IE) document.write(strHtm64_Install); else
        if (isIE)   document.write(strHtmInstall);    else
          document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;
        return LODOP;
      };
    };
    if (LODOP.VERSION<"6.0") {
      if (!needCLodop()){
        if (is64IE) document.write(strHtm64_Update); else
        if (isIE) document.write(strHtmUpdate); else
          document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML;
      };
      return LODOP;
    };
    
    LODOP.SET_LICENSES("","加密的秘钥","","");     // 加密密钥 防止不兼容 （删除水印）
    //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
    //LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","");

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

3、 页面中引入LodopFuncs.js

import { getLodop } from '@/assets/js/LodopFuncs'
export default {
data () {
  return {
      tableList: [],  // 打印的标签集合
      nubId: [],	 // 标签顶部的条形码数据
      printOptions: [],	 // 打印机数据
      printType: '', // label1 -> 4*6; A4 -> A4
      LODOP: null,
      form: this.$form.createForm(this),
  }
}
}

4、 在页面中获取到打印的列表数据（api 有提供）

    getLodopData(type) {      // 获取打印机列表 （api 提供）
      this.printType = type
      this.$nextTick(() => {
        this.visible = true
        this.form.resetFields()
        this.LODOP = getLodop()
        let arr = []
        let iPrinterCount = this.LODOP.GET_PRINTER_COUNT()
        for (let i = 0; i < iPrinterCount; i++) {
          arr.push({
            label: this.LODOP.GET_PRINTER_NAME(i),
            value: i,
          })
        }
        this.printOptions = arr
        /**
         * 默认选中打印机  RP4xx Series 200DPI ZPL 
         */
        if (this.printOptions.length > 0) {
          let list = []
          this.printOptions.forEach(item => {
            if (item.label.indexOf(' RP4xx Series 200DPI ZPL)') != -1) {
              list.push(item)
            }
          })
          if(list.length > 0) {
            this.$nextTick(() => {
              this.form.setFieldsValue({selectId: list[0].value})
            })
          }
        }
      })
    },

5、进行标签打印

    printing() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.tableList.forEach((v, k) => {
            let ele = document.getElementById('table_' + k)	// 批量打印
            LODOP.SET_LICENSES("","你的秘钥","","");     // 防止旧版本的不兼容问题
            LODOP.PRINT_INIT('')
            LODOP.SET_PRINTER_INDEX(values.selectId)
            // 由于公司也有A4 打印 所以这里主要是区别了A4 打印还是标签打印
            if (this.printType == 'A4') {
              LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')
            } else if (this.printType == 'label') {
              if (this.nubId[k] != undefined && this.nubId[k] != '') {
                LODOP.ADD_PRINT_BARCODE(32, 113, 235, 45, "128B", this.nubId[k]);   // 新增条形码
                // LODOP.SET_PRINT_STYLEA(0, "ShowBarText", 0)     // 取消条形码数字
              }
              LODOP.SET_PRINT_PAGESIZE(1, '100mm', '150mm', '')    // 设置打印纸张大小
            }
            var printHtml = ele.innerHTML
            LODOP.ADD_PRINT_HTM(10, 10, '100%', '100%', printHtml)
            LODOP.PRINT()
          })
        }
      })
    },

6、 涉及到的html 如下

      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('wms.printComponents')" v-if="isDownload">
            <a download="CLodop_Setup_for_Win32NT.exe" href="你的路径地址">{{$t('wms.downloadClick')}} <a-icon class="css-icon" type="download" /></a>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('wms.printer')">
            <a-select
              v-decorator.trim="['selectId', { rules: [{ required: true, message: $t('wms.selectprinter') }] }]"
            >
              <a-select-option v-for="item in printOptions" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
    <div class="css-box">
      <div v-for="(item, k) in tableList" :key="k" :id="'table_' + k" v-html="item"></div>
    </div>
  </div>

注意点：
1、 具体打印的标签使用的html 中的样式需要包裹在body 里面 不然打印的样式不生效

 <style>
        .css-table_pint {
            width: 350px;
            height: 550px;
            border: none;
            box-sizing: border-box;
            font-size: 14px;
            font-family: 'Arial';
        }

        .css-table_td {
            padding-left: 5px;
            box-sizing: border-box;
            border-top: 2px solid #000;
            border-left: 2px solid #000;
        }

        .css-table_pint tr td:nth-last-child(1) {
            border-right: 2px solid #000;
            text-align: center;
        }

        .css-table_pint tr:nth-last-of-type(1) td {
            border-bottom: 2px solid #000;
        }

        .css-table_pint tr td.css-textLeft {
            text-align: left;
            font-size: 12px;
        }

        .css-table_pint .css-table_pint-topTd {
            height: 70px;
            border: none !important;
            position: relative;
        }

        .css-table_pint .top_p {
            margin: 0;
            text-align: center;
            position: absolute;
            width: 350px;
            top: -5px;
            font-size: 16px;
            font-weight: 700;
        }

        .td1 {
            width: 33%;
        }

        .input_printer {
            margin-right: 5px;
        }

        .css-table_p {
            margin: 0;
            position: relative;
            top: 10px;
            border-bottom: 1px solid;
            height: 5px;
            margin-bottom: 5px;
            margin-right: 5px;
        }

        .css-table_p_title {
            margin: 0;
            position: relative;
        }

        .css-bottom-fx {
            vertical-align: bottom;
            padding-bottom: 5px;
        }
    </style>
    <table cellspacing='0' class='css-table_pint'>
        <tr>
            <td colspan="2" class="css-table_pint-topTd">
                <p class="top_p">Receiving Tag</p>
            </td>
        </tr>
        <tr>
            <td class='td1 css-table_td' >打印日期</td>
            <td colspan="3" style="border-left:none" class='css-table_td'>2021-09-09 12:00:00</td>
        </tr>
        <tr>
            <td class='td1 css-table_td'>经办客服</td>
            <td class='css-table_td'>zhangsan</td>
            <td class='td1 css-table_td'>登记日期</td>
            <td class='css-table_td'>2021-09-09 12:00:00</td>
        </tr>
        <tr>
            <td class='td1 css-table_td'>店铺名称</td>
            <td class='css-table_td'>Shopify-JP</td>
            <td class='td1 css-table_td'>客户姓名</td>
            <td class='css-table_td'>光恵 西藤</td>
        </tr>
        <tr >
            <td class='td1 css-table_td'>产品名称</td>
            <td colspan="3" class=' css-table_td'>E240</td>
        </tr>
        <tr>
            <td class='td1 css-table_td'>网上订单号</td>
            <td colspan="3" class='css-table_td'>Jackery Japan-202233687</td>
        </tr>
    </table>

2、如果涉及到条形码的， 自由拼接在打印的html 标签后进行截取就好了，api 中也提供了新增条形码的方法设置 LODOP.ADD_PRINT_BARCODE（）
3、 安装的系统具有不稳定性， 可校验下是否安装， 未安装的可让用户自由安装就好， 代码如下

    verify() {
      // 校验是否安装控件
      let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject('microsoft.XMLHttp')
      xhr.open('get', 'http://localhost:18000/CLodopfuncs.js')
      xhr.send()
      setTimeout(() => {
        if (xhr.status == 200 && xhr.readyState == 4) {
          this.isDownload = false
        }
      }, 500)
    },

4、 涉及到的方法， 自行在官网中查看
5、 由于都是贴了代码，哪里看不懂的小伙伴可以联系我