详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）

C-Lodop是一个免费云服务程序，可接受来自其它平台浏览器的JavaScrip语句实现远程打印。
目前是各家软件公司进行手机或微信远程打印的流行解决方案。
和其它“云打印”概念相比，C-Lodop主要是能编程控制，程序员可据此帮助客户部署自己的云打印主机。

官网：http://www.c-lodop.com/download.html
左边有很多demo，一个LoddpFuncs.js文件（官网有提供），三个安装程序；右边的有文档和比较新的安装程序

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

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

//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){  ......  }//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){  ......  }

vue 组件中如何使用

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);  },}
......

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

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

常见问题：浏览器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; elseif ( verFF !== null) {verFF = verFF[0].match(/\d+/);if ((verFF[0]>= 42)||(x64!==null)) return true;} elseif ( verOPR !== null) {verOPR = verOPR[0].match(/\d+/);if ( verOPR[0] >= 32 ) return true;} elseif ((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); elsedocument.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); elseif (isIE)  document.write(strHtmInstall);  elsedocument.documentElement.innerHTML=strHtmInstall+document.documentElement.innerHTML;return LODOP;};};if (LODOP.VERSION<"6.0") {if (!needCLodop()){if (is64IE) document.write(strHtm64_Update); elseif (isIE) document.write(strHtmUpdate); elsedocument.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中无法打印预览，所有建议都写成内联样式
参考：https://www.jb51.net/article/148064.htm

详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）相关推荐

详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...
jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下使用vue-cli构建的vue项目,webpack的配置文 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
如何在vue项目中引入video.js插件
借鉴了不少文章,照着来净报错,恼了自己给自己留一篇绝不报错的! 参考文章:https://www.jianshu.com/p/8b8023c7ed37 一.安装 $ npm install video ...
详解使用VueJS开发项目中的兼容问题
详解使用VueJS开发项目中的兼容问题本篇文章针对在vue项目中遇到的兼容性问题以及解决方法做了详细的总结. 一,VUE项目一般会使用axios,而axios又是基于promise的,所以,IE任 ...
如何在vue项目中修改less变量，多主题项目解决方案
如何在vue项目中修改less变量,多主题项目解决方案参考文章: (1)如何在vue项目中修改less变量,多主题项目解决方案 (2)https://www.cnblogs.com/niubilit ...
如何在vue项目中使用Highmaps(vue+Highmaps)
如何在vue项目中使用Highmaps 功能需求思路分析实现第一步:引入第二步:介绍一下这个world是个啥. 第三步:调用注意点(十分重要) 写在最后功能需求近日我接到了这么一个需求 ...
android 最新sdk版本,详解如何在Android studio中更新sdk版本和build-tools版本
一.首先看下Android开发用到的sdk目录: build-tools 保存着一些Android平台相关通用工具,比如adb.和aapt.aidl.dx等文件. aapt即Android Asset ...

详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）

详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）相关推荐

最新文章

热门文章