vue实现自动打印功能

最近有个项目需求，需要识别车牌后，自动打印派车单。最终选择使用Lodop实现该自动打印功能。
官网地址：Lodop和C-Lodop官网主站

1. 下载控件

我这里下载的是Windows64版本，根据自己的操作系统自行选择。

2. 安装控件

运行 CLodop_Setup_for_Win64NT_6.571EN.exe 文件，进行安装。

3. 引用LodopFuncs.js

以下是 LodopFuncs.js 代码。

//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
var MainJS ="CLodopfuncs.js",
    URL_WS1   = "ws://localhost:8000/"+MainJS,                //ws用8000/18000
    URL_WS2   = "ws://localhost:18000/"+MainJS,
    URL_HTTP1 = "http://localhost:8000/"+MainJS,              //http用8000/18000
    URL_HTTP2 = "http://localhost:18000/"+MainJS,
    URL_HTTP3 = "https://localhost.lodop.net:8443/"+MainJS;   //https用8000/8443

//==检查加载成功与否，如没成功则用http(s)再试==
//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
function checkOrTryHttp() {
  if (window.getCLodop)  return true;
  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
  var JS1 = document.createElement("script")
     ,JS2 = document.createElement("script")
     ,JS3 = document.createElement("script");
  JS1.src = URL_HTTP1;
  JS2.src = URL_HTTP2;
  JS3.src = URL_HTTP3;
  JS1.onerror = function(e) {
      if (window.location.protocol !== 'https:')
          head.insertBefore(JS2, head.firstChild); else
          head.insertBefore(JS3, head.firstChild);
  }
  JS2.onerror = JS3.onerror=function(){
    var JSelf = document.createElement("script");
    JSelf.src = "/"+MainJS; //JSelf让其它电脑通过本机打印（仅适用CLodop自带例子）
    document.head.insertBefore(JSelf, document.head.firstChild);
  }
  head.insertBefore(JS1,head.firstChild);
}

//==加载Lodop对象的主过程:==
(function loadCLodop(){
  if (!window.WebSocket && window.MozWebSocket) window.WebSocket=window.MozWebSocket;
  //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
  try {
      var WSK1=new WebSocket(URL_WS1);
      WSK1.onopen = function(e) {setTimeout(checkOrTryHttp,200); }
      WSK1.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
      WSK1.onerror = function(e) {
           var WSK2=new WebSocket(URL_WS2);
           WSK2.onopen = function(e) {setTimeout(checkOrTryHttp,200);}
           WSK2.onmessage = function(e) {if (!window.getCLodop) eval(e.data);}
           WSK2.onerror= function(e) {checkOrTryHttp();}
      }
  } catch(e){
    checkOrTryHttp();
  }
})();

//==获取LODOP对象的主过程:==
function getLodop(oOBJECT, oEMBED) {
    var LODOP;
    try {
        LODOP = window.getCLodop();
        if (!LODOP && document.readyState !== "complete") {
            alert("C-Lodop没准备好，请稍后再试！");
            return;
        }
        //清理原例子内的object或embed元素，避免乱提示：
        if (oEMBED && oEMBED.parentNode)  oEMBED.parentNode.removeChild(oEMBED);
        if (oOBJECT && oOBJECT.parentNode)oOBJECT.parentNode.removeChild(oOBJECT);
        return LODOP;
    } catch (err) {
        console.error("getLodop出错:" + err);
    }
}

export { getLodop }; //导出getLodop

将 LodopFuncs.js引入至项目中

import { getLodop } from "@/utils/LodopFuncs";

4. 初始化Lodop

export default {
    data() {
        return {
            lodop: null,
            PRINT_STATUS_OK: null,
        }
    },
    created() {
        this.lodop = getLodop();
    },
    methods: {
        print() {
            console.log("初始化打印参数...")
            //SET_PRINT_MODE("PRINT_DUPLEX",2);0-不控制 1-不双面 2-双面(长边装订) 3-小册子双面(短边装订_长边水平)
            //SET_PRINT_MODE("PRINT_DEFAULTSOURCE",1);1-纸盒 4-手动 7-自动 0-不控制
            //SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName);
            // intOrient：打印方向及纸张类型
            // 1---纵向打印，固定纸张； 
            // 2---横向打印，固定纸张；  
            // 3---纵向打印，宽度固定，高度按打印内容的高度自适应(见样例18)；
            // 0---方向不定，由操作者自行选择或按打印机缺省设置。
            this.lodop.SET_LICENSES("", "13F0BE65846276CB60111433C6280000", "", "");
            this.lodop.PRINT_INIT("车辆派遣单_" + this.applicationNo);
            //this.lodop.SET_PRINT_PAGESIZE(0, 0, 0,"A5 (148 x 210mm)");
            this.lodop.SET_PRINT_MODE("PRINT_DUPLEX", 1);
            this.lodop.SET_PRINT_MODE("PRINT_DEFAULTSOURCE", 1);

            //console.log(this.$refs['printDomA'].$el.innerHTML)
            //this.lodop.SET_PRINT_MODE("POS_BASEON_PAPER",true);
            // var csstyle = "<style>.table {border: 1px solid #000;width: 100 %;}.table table {width: 100 %;margin - right: auto;margin - left: auto;border - collapse: collapse;border: 1px solid #000;font - size: 14px;}.table table th {font - weight: normal;font - size: 16px;}.table table td {padding: 5px;} <style>";
            this.lodop.ADD_PRINT_HTM("1mm", "1mm", "RightMargin:1mm", "BottomMargin:1mm", this.$refs['printDomA'].$el.innerHTML);
            //this.lodop.NewPage();
            // this.lodop.ADD_PRINT_HTM(10, 10, "100%", 25, this.$refs['printDomB'].$el.innerHTML);
            this.lodop.SET_PRINT_STYLE("Horient", 2);
            this.lodop.SET_PRINT_STYLE("Vorient", 2);
            //打印份数
            this.lodop.SET_PRINT_COPIES(1);
            // console.log("PrinterName", this.lodop.GET_PRINTER_NAME(0))
            // console.log("Duplex", this.lodop.GET_PRINTER_NAME("0:Duplex"))
            // console.log("PaperSize", this.lodop.GET_PRINTER_NAME("0:PaperSize"))
            // console.log("Orientation", this.lodop.GET_PRINTER_NAME("0:Orientation"))
            // console.log("FormName", this.lodop.GET_PRINTER_NAME("0:FormName"))
            // console.log("DefaultSource", this.lodop.GET_PRINTER_NAME("0:DefaultSource"))
            // 打印预览
            console.log("开始打印：", this.applicationNo)
            // 预   览  this.lodop.PREVIEW();
            // 自动打印  this.lodop.PRINT();
            this.PRINT_STATUS_OK = this.lodop.PRINT();
        },
         addTravelPrint() {
            addTravelPrint({ matterFormId: this.matterFormId,remark:this.applicationNo }).then((res) => {
                console.log(res);
            })
        }
    },
    watch: {
        PRINT_STATUS_OK(value) {
            if (value) {
                console.log("打印成功",value);
                this.addTravelPrint();
            }
        }

    }
};

备注：该控件若需跳过预览，会出现“试用版”水印，如需去除，请购买正式软件。