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

详解如何在vue项目中使用lodop打印插件

Posted in Javascript onSeptember 27, 2018

项目中使用到打印的功能。领导推荐使用Lodop

Lodop是什么东东，反正就是可以定制打印的插件。。。

既然是插件，vue的渐进式开发。完全可以拿来化为己用。

如何使用那？先大概看了下开发文档，就是一堆demo，一个js文件，三个安装程序，我擦，这么简单。come on 电脑安装C-Lodop,就可以打印预览来了。

开工，翻来覆去就一个LodopFuncs.js是干货，扔到项目中。就差怎么调里面的方法了。

如何引用，当然得改造喽

LodopFuncs.js 方法改造如下

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){  ......  }

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){  ......  }

完事，然后就是怎么使用了

在具体的调用页面

import {getLodop} from '../common/LodopFuncs'

......
  methods: {
 
   printPdf() {
    this.CreateOneFormPage();
//    LODOP.PRINT();
    LODOP.PREVIEW();
   },
   CreateOneFormPage() {
    LODOP = getLodop();
    LODOP.PRINT_INIT("订货单");
    LODOP.SET_PRINT_STYLE("FontSize", 18);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
    LODOP.ADD_PRINT_HTM(88, 200, 350, 600, 
                    document.getElementById("form1").innerHTML);  

   },
  }
......

你以为就这么多。对的就这

现在碰见个指令打印问题，在项目中直接把部分指令都打印出来了，不能打印出正常样式，™
现在都是驱动打印机，暂时不考虑指令的....

常见问题：浏览器alert警告lodop打印出错之类的，首先得把lodop本地服务打开。

鉴于好多人提问，完整的代码还是贴出来吧。（没修改什么东西啊....）

LodopFuncs.js

var CreatedOKLodop7766=null;

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){
 try{
  var ua=navigator.userAgent;
  if (ua.match(/Windows\sPhone/i) !=null) return true;
  if (ua.match(/iPhone|iPod/i) != null) return true;
  if (ua.match(/Android/i) != null) return true;
  if (ua.match(/Edge\D?\d+/i) != null) 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==null)&&(verIE==null)&&(x64!==null))
   return true; else
  if ( verFF !== null) {
   verFF = verFF[0].match(/\d+/);
   if ((verFF[0]>= 42)||(x64!==null)) return true;
  } else
  if ( verOPR !== null) {
   verOPR = verOPR[0].match(/\d+/);
   if ( verOPR[0] >= 32 ) return true;
  } else
  if ((verTrident==null)&&(verIE==null)) {
   var verChrome=ua.match(/Chrome\D?\d+/i);
   if ( verChrome !== null ) {
    verChrome = verChrome[0].match(/\d+/);
    if (verChrome[0]>=42) return true;
   };
  };
  return false;
 } catch(err) {return true;};
};

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
 var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
 var oscript = document.createElement("script");
 oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
 head.insertBefore( oscript,head.firstChild );

 //引用双端口(8000和18000）避免其中某个被占用：
 oscript = document.createElement("script");
 oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
 head.insertBefore( oscript,head.firstChild );
};

//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){
 var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
 var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
 var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
 var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='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="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='http://www.c-lodop.com/download/CLodop_Setup_for_Win32NT_https_3.008Extend.zip' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
 var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
 var LODOP;
 try{
  var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
  if (needCLodop()) {
   try{ LODOP=getCLodop();} catch(err) {};
   if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好，请稍后再试！"); return;};
   if (!LODOP) {
    // if (isIE) document.write(strCLodopInstall); else
     // document.documentElement.innerHTML=strCLodopInstall+document.documentElement.innerHTML;
    // return;
   } else {

    if (CLODOP.CVERSION<"3.0.0.2") {
     if (isIE) document.write(strCLodopUpdate); else
      document.documentElement.innerHTML=strCLodopUpdate+document.documentElement.innerHTML;
    };
    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
   };
  } else {
   var is64IE = isIE && (navigator.userAgent.indexOf('x64')>=0);
   //=====如果页面有Lodop就直接使用，没有则新建:==========
   if (oOBJECT!=undefined || oEMBED!=undefined) {
    if (isIE) LODOP=oOBJECT; else LODOP=oEMBED;
   } else if (CreatedOKLodop7766==null){
    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);
    CreatedOKLodop7766=LODOP;
   } else LODOP=CreatedOKLodop7766;
   //=====Lodop插件未安装时提示下载地址:==========
   if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
    if (navigator.userAgent.indexOf('Chrome')>=0)
     document.documentElement.innerHTML=strHtmChrome+document.documentElement.innerHTML;
    if (navigator.userAgent.indexOf('Firefox')>=0)
     document.documentElement.innerHTML=strHtmFireFox+document.documentElement.innerHTML;
    if (is64IE) document.write(strHtm64_Install); else
    if (isIE)  document.write(strHtmInstall);  else
     document.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;
    return LODOP;
   };
  };
  if (LODOP.VERSION<"6.0") {
   if (!needCLodop()){
    if (is64IE) document.write(strHtm64_Update); else
    if (isIE) document.write(strHtmUpdate); else
     document.documentElement.innerHTML=strHtmUpdate+document.documentElement.innerHTML;
   };
   return LODOP;
  };
  //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===
  //LODOP.SET_LICENSES("北京XXXXX公司","8xxxxxxxxxxxxx5","","");

  //===========================================================
  return LODOP;
 } catch(err) {alert("getLodop出错:"+err);};
};

页面调用如下

<template>
 <div class="demo">
  <el-button @click="printPdf" >打印</el-button>

  <form id="form1">
   <table border="1" width="300" id="tb01" bgcolor="#CCFFCC" style="border:solid 1px black;border-collapse:collapse"><tr><td width="133" id="mtb001">
    <font face="黑体" color="#FF0000" size="3"><u> 《表单一》 </u></font></td></tr></table>
   <table border="1" width="300" height="106" cellspacing="0" bgcolor="#CCFFFF"style="border-collapse:collapse;table-layout:fixed;border:solid 1px black;"><tr>
    <td width="66" height="16" style="border:solid 1px black"><font color="#0000FF">A</font><font color="#0000FF">等</font></td>
    <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">B</font><font color="#0000FF">等</font></td>
    <td width="51" height="16" style="border:solid 1px black"><font color="#0000FF">C</font><font color="#0000FF">等</font></td></tr>
    <tr>
     <td width="66" height="16" style="border:solid 1px black">A<sub>01</sub></td>
     <td width="80" height="12" style="border:solid 1px black">中-001</td>
     <td width="51" height="12" style="border:solid 1px black">C1<sup>x</sup></td>
    </tr>
    <tr>
     <td width="66" height="16" style="border:solid 1px black">A<sub>02</sub>Φ</td>
     <td width="80" height="16" style="border:solid 1px black">日-スの</td>
     <td width="51" height="16" style="border:solid 1px black"><font face='Vernada'>7㎥</font></td>
    </tr>
    <tr><td width="66" height="16" style="border:solid 1px black;overflow:hidden">A<sub>03</sub><nobr>over隐藏后面的：1234567890</nobr>
    </td><td width="80" height="16" style="border:solid 1px black;overflow:hidden">韩-안녕</td><td width="51" height="16">C3<sup>x</sup>
    </td></tr> </table>
  </form>
 </div>
</template>

<script>

 import {getLodop} from '../common/LodopFuncs'

 export default {
  name: "demo",
  data() {
   return {}
  },
  methods: {
   // 查询数据
   printPdf() {
    let LODOP = getLodop();
    LODOP.PRINT_INIT("订货单");
    LODOP.SET_PRINT_STYLE("FontSize", 18);
    LODOP.SET_PRINT_STYLE("Bold", 1);
    LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
    LODOP.ADD_PRINT_HTM(88, 200, 350, 600,
     document.getElementById("form1").innerHTML);
//    LODOP.PRINT();
    LODOP.PREVIEW();
   },
  }
 }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

详解如何在vue项目中使用lodop打印插件

- Author -

小学生的博客

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

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
全面了解js中的script标签
Jul 04 Javascript
微信小程序实战之自定义toast（6）
Apr 18 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 #Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 #Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 #Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 #Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
数据库卡死(1) 备份(2) update(2) 索引(8) tcp/ip(1) IP(1) 全局锁(1) 德生2P3(1) 限速(1) 索尼ICF-36(1)
You might like
PHP关联数组的10个操作技巧
2013/01/21 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
php计算函数执行时间的方法
2015/03/20 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
Javascript实现的分页函数
2007/02/07 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python+pygame简单画板实现代码实例
2017/12/13 Python
python中reader的next用法
2018/07/24 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
来自全球大都市的高级街头服饰：Pegador
2018/01/03 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
办理退休介绍信
2014/01/09 职场文书
店面销售职位的职责
2014/03/09 职场文书
陈欧广告词
2014/03/14 职场文书
实习指导老师评语
2014/04/26 职场文书
大学英语专业求职信
2014/06/21 职场文书
网络技术专业求职信
2014/07/13 职场文书
项目投资意向书范本
2015/05/09 职场文书
人事行政部各岗位职责说明书！
2019/07/15 职场文书
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android