首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript Vue.js

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

Posted in Vue.js onFebruary 07, 2021

前言

此控件直接进行打印底部会有水印，通过官网购买可以解决；
如不想购买，可先执行预览，弹出预览框进行打印；
需要用到的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使用lodop打印控件实现浏览器兼容打印的方法

- Author -

Allen-沐风

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Vue.js 相关文章推荐
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue如何使用rem适配
Feb 06 #Vue.js
如何管理Vue中的缓存页面
Feb 06 #Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 #Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 #Vue.js
vue使用echarts画组织结构图
Feb 06 #Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 #Vue.js
解决vue项目本地启动时无法携带cookie的问题
Feb 06 #Vue.js
Xception(1) jenkins(1) 逆序(1) Seaborn(1) ResNet50(1) tensorflow(2) yolo3(1) PostMapping(1) 字符串(2) Inception(2)
You might like
如何删除多级目录
2006/10/09 PHP
php学习之变量的使用
2011/05/29 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
AngularJS入门教程二：在路由中传递参数的方法分析
2017/05/27 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[03:37]2016完美“圣”典 风云人物：Mikasa专访
2016/12/07 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
StubHub智利：购买和出售您的门票
2016/11/23 全球购物
Amara美国站：英国高端家居礼品网站，世界各地的奢侈家具品牌
2017/07/26 全球购物
巴西补充剂和维生素购物网站：Natue
2019/06/17 全球购物
专项法律服务方案
2014/06/11 职场文书
银行转正自我鉴定
2014/09/29 职场文书
检讨书怎么写
2015/01/23 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
天那边观后感
2015/06/09 职场文书
实习证明模板
2015/06/16 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
授权协议书范本（3篇）
2019/10/15 职场文书