首页
所有分类
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 相关文章推荐
javascript确认框的三种使用方法
Dec 17 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
javascript解三阶幻方（九宫格）
Apr 22 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
Vue异步加载about组件
Oct 31 Javascript
Vue.js用法详解
Nov 13 Javascript
Vue 组件（component）教程之实现精美的日历方法示例
Jan 08 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
浅谈在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
destoon(1) Rewrite(4)  AD域(1) 组策略(1) lamp(1) lnmp(1) Windows server 2012(17) 伪静态(1) 日志格式分析(1) Centos(8)
You might like
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
百度地图api如何使用
2015/08/03 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
js格式化时间的简单实例
2016/11/27 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
Python3随机漫步生成数据并绘制
2018/08/27 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
Python如何读写二进制数组数据
2020/08/01 Python
python的setattr函数实例用法
2020/12/16 Python
全球性的在线商店：Vogca
2019/05/10 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
通信工程专业求职信
2014/06/04 职场文书
工厂车间标语
2014/06/19 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
2014年化验室工作总结
2014/11/21 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS