首页
所有分类
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——前端生成二维码的示例
Dec 19 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
德生2P3(1) 数据库卡死(1) update(2) 全局锁(1) tcp/ip(1) 限速(1) 备份(2) IP(1) 索引(8) 索尼ICF-36(1)
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
11个PHP 分页脚本推荐
2011/08/15 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
微信小程序搜索功能(附：小程序前端+PHP后端)
2019/02/28 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
python打开网页和暂停实例
2014/09/30 Python
python3 读写文件换行符的方法
2018/04/09 Python
python如何爬取个性签名
2018/06/19 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
python中map的基本用法示例
2018/09/10 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python如何在bool函数中取值
2020/09/21 Python
Mamas & Papas沙特阿拉伯：英国最受欢迎的婴儿品牌
2017/11/20 全球购物
Bose英国官方网站：美国知名音响品牌
2020/01/26 全球购物
经理秘书岗位职责
2013/11/14 职场文书
继电保护工岗位职责
2014/01/05 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
物业管理交接协议书
2016/03/24 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python