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

000

前言

此控件直接进行打印底部会有水印，通过官网购买可以解决；
如不想购买，可先执行预览，弹出预览框进行打印；
需要用到的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);
  }
}
© 版权声明
版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
JavaScript
# 编程开发# JavaScript
喜欢就支持一下吧
点赞0 分享
网络的头像-偶像资源网
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
29天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
29天前 28
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checke...
32天前 4
jQuery实现滚动效果-偶像资源网
jQuery实现滚动效果
jQuery实现滚动效果
29天前 3
PHP队列原理及基于队列的写文件案例-偶像资源网
PHP队列原理及基于队列的写文件案例
PHP队列原理及基于队列的写文件案例
29天前 2
css文本两端对齐的实现代码-偶像资源网
css文本两端对齐的实现代码
css文本两端对齐的实现代码
32天前 2
相关推荐
python多维列表总是只转为一维数组问题解决-偶像资源网
python多维列表总是只转为一维数组问题解决
python多维列表总是只转为一维数组问题解决
29天前 41
Python pyecharts 数据可视化模块的配置方法-偶像资源网
Python pyecharts 数据可视化模块的配置方法
Python pyecharts 数据可视化模块的配置方法
29天前 28
吊打全网所有精美导航页引导页HTML源码-偶像资源网
吊打全网所有精美导航页引导页HTML源码
吊打全网所有精美导航页引导页HTML源码
32天前 24
css的基本选择器有哪些？-偶像资源网
css的基本选择器有哪些？
css的基本选择器有哪些？
33天前 23
5.9K⭐ 轻松搞定定时任务！Web管理超便捷-偶像资源网
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
5.9K⭐ 轻松搞定定时任务！Web管理超便捷
32天前 23
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked-偶像资源网
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
CSS 点击radio实现两个图片样式切换并且多个radio中只能有一个checked
32天前 4
评论 抢沙发

请登录后发表评论

    暂无评论内容