vue使用lodop打印控件实现浏览器兼容打印的方法

时间2024-01-31 20:03:02发布访客分类JavaScript浏览533

导读：收集整理的这篇文章主要介绍了vue使用lodop打印控件实现浏览器兼容打印的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。前言此控件直接进行打印底部会有水印，通过官网购买可以解...

收集整理的这篇文章主要介绍了vue使用lodop打印控件实现浏览器兼容打印的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

此控件直接进行打印底部会有水印，通过官网购买可以解决；
如不想购买，可先执行预览，弹出预览框进行打印；
需要用到的js文件和api文档附后，请注意查看。
首先需要在局部或全局引入LodopFuncs.js文件
import { getLodop} From '../../../components/js/LodopFuncs'

方法中调用

PRint(){
       let LODOP = getLodop();
       LODOP.PRINT_INITA(0,0,800,1600,"打印库位名称");
       LODOP.SET_PRINT_PAGESIZE(1,700,500,"") //设定纸张大小    LODOP.NewPage();
    //初始化    LODOP.SET_PRINT_MODE("RESELECT_printer",true);
        LODOP.ADD_PRINT_TEXT('10mm','50mm','30mm','20mm','iphone20Plus');
    //打印文字    LODOP.SET_PRINT_STYLEA(0,"FontSize",30);
    //字体样式    LODOP.ADD_PRINT_LINE('10mm','35mm','40mm','35mm',0,1);
    //打印直线    LODOP.ADD_PRINT_BARCODE('10mm','2.5mm','35mm','35mm',"QRCode",'123456');
    //打印二维码    LODOP.SET_PRINT_STYLEA(0,"AlignJustify",2);
    //二维码样式和规则    LODOP.SET_PRINTER_INDEXA("TSC TTP-244 Pro");
    //选择打印机   // LODOP.PRINT_DESIGN()//打开设置   // LODOP.PrevIEW();
 //预览    LODOP.PRINT() //直接打印  }
    ,

LodopFuncs.js文件

//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==VAR CreatedOKLodopObject, CLodopIsLocal, CLodopJsstate;
//==判断是否需要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 head = document.head || document.getelementsbytagname("head")[0] || document.documentElement;
        var JS1 = document.createElement("script");
      JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
      head.insertBefore(JS1, head.FirstChild);
      var JS2 = document.createElement("script");
      JS2.src = "http://localhost:18000/CLodopfuncs.js?priority=0";
      head.insertBefore(JS2, head.firstChild);
      CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
  if (JS1.attachEvent) {
      	CLodopJsState = "loading";
    var onChange = function(){
     	   if (window.event.srcElement.readyState == 'loaded')        	   CLodopJsState = "complete";
	}
    ;
    	JS1.attachEvent('onreadystatechange',onChange);
    	JS2.attachEvent('onreadystatechange',onChange);
  }
}
//==获取LODOP对象主过程,判断是否安装、需否升级:==export function getLodop(oOBJECT, oEMBED) {
      var strHtmInstall = "br>
    font color='#FF00FF'>
    打印控件未安装!点击这里a href='https://wms.warehousing.COM/download/install_lodoP32.exe' target='_self'>
    执行安装/a>
    ,安装后请刷新页面或重新进入。/font>
    ";
      var strHtmUpdate = "br>
    font color='#FF00FF'>
    打印控件需要升级!点击这里a href='https://wms.warehousing.com/download/install_lodop32.exe' target='_self'>
    执行升级/a>
    ,升级后请重新进入。/font>
    ";
      var strHtm64_Install = "br>
    font color='#FF00FF'>
    打印控件未安装!点击这里a href='https://wms.warehousing.com/download/install_lodop64.exe' target='_self'>
    执行安装/a>
    ,安装后请刷新页面或重新进入。/font>
    ";
      var strHtm64_Update = "br>
    font color='#FF00FF'>
    打印控件需要升级!点击这里a href='https://wms.warehousing.com/download/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='https://wms.warehousing.com/download/CLodop_SETUP_for_Win32NT.exe' target='_self'>
    下载执行安装/a>
    ";
      var strCLodopInstall_2 = "br>
    （若此前已安装过，可a href='https://wms.warehousing.com/download/CLodop.protocol:setup' target='_self'>
    点这里直接再次启动/a>
    ）";
      var strCLodopInstall_3 = "，成功后请刷新本页面。/font>
    ";
      var strCLodopUpdate = "br>
    font color='#FF00FF'>
    Web打印服务CLodop需升级!点击这里a href='https://wms.warehousing.com/download/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" || (isIE &
    &
 CLodopJsState == "loading")) ) {
            alert("网页还没下载完毕，请稍等一下再操作.");
            return;
      }
      if (!LODOP) {
            document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
                    return;
      }
 else {
        if (CLODOP.CVERSION  "3.0.9.3") {
              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 (!CreatedOKLodopObject) {
            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);
            CreatedOKLodopObject = LODOP;
      }
     else        LODOP = CreatedOKLodopObject;
      //==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;
  }
 catch (err) {
        alert("getLodop出错:" + err);
  }
}

到此这篇关于vue使用lodop打印控件实现浏览器兼容打印的文章就介绍到这了,更多相关vue浏览器兼容打印内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

详解Vue iview IE浏览器不兼容报错（Iview Bable polyfill）
解决Vue2.0自带浏览器里无法打开的原因（兼容处理）
vue实现lodop打印功能的示例
Vue中使用Lodop插件实现打印功能的简单方法
Vue使用lodop实现打印小结
详解如何在vue项目中使用lodop打印插件

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

vue

若转载请注明出处： vue使用lodop打印控件实现浏览器兼容打印的方法
本文地址： https://pptw.com/jishu/594415.html

声明动态数组的语句怎么写 Javascript实现关闭广告效果