首页
所有分类
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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 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
RTMP(1) http_stub_status_module(1) text-shadow(1) BufferPool(1) zabbix(9) 区块链(2) keeplive_timeout(1) TypeScript(2) location(2) 缓存机制(1)
You might like
php实现文件下载功能的几个代码分享
2014/05/10 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php使用正则验证中文
2016/04/06 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
JSON与XML优缺点对比分析
2015/07/17 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
Python 模板引擎的注入问题分析
2017/01/01 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
使用K.function()调试keras操作
2020/06/17 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Sunglasses Shop荷兰站：英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
印度购买眼镜和太阳镜网站：Coolwinks
2018/09/26 全球购物
智能电子应届生求职信
2013/11/10 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
合作协议书范本
2014/10/25 职场文书
党员身份证明材料
2015/06/19 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang
MySQL系列之十二 备份与恢复
2021/07/02 MySQL