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

前言

此控件直接进行打印底部会有水印，通过官网购买可以解决；
如不想购买，可先执行预览，弹出预览框进行打印；
需要用到的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;elseLODOP = 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");elseLODOP.setAttribute("type", "application/x-print-lodop");document.documentElement.appendChild(LODOP);CreatedOKLodopObject = LODOP;} elseLODOP = 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打印控件实现浏览器兼容打印相关推荐

使用Lodop进行web 打印(jatoolsPrinter,墙外打印控件楚琳Web打印控件)
WEB控件Lodop自2007年开始发布,目前是国内注册用户和免费用户最多的打印控件,是WEB开发中比较彻底的打印方案.控件支持windows下所有的浏览器,功能强大,使用方便,被支持者称为打印控件的 ...
利用lodop打印控件轻松实现批量打印
最近在做一个打印程序,要实现批量打印功能,在网上找了很多天,也在tp官网咨询大牛们,对大家的的提议我一一进行了研究,总结如下: 要实现批量打印可以有两个办法: 一是利用专业的报表程序,能实现十分复杂的 ...
WEB打印控件/免费的WEB打印控件(锐洋)
(1):产品介绍 ReYoPrint (锐洋WEB打印控件)是一款实现网页套打的专用工具.作为web应用开发者,我们经常会遇到在浏览器中打印报表.票据的需求,这些需求浏览器本身的打印功能一般不能满足, ...
java web 打印控件_web打印，web打印控件，dotnet web打印控件，java web打印控件，webprint...
webprint打印参数设置小插件,主要实现打印纸张,边距,打印机等的设置. 主要功能: 设置页眉页脚属性设置打印页面左右上下边距设置打印方向,打印份数,打印指定页打印模版和指定纸型绑定设置自 ...
4Fang打印控件直接指定打印机打印网页
现在所做的项目,要求不选择打印机,直接打印网页,在网上查找了各种方法后,使用4Fang软件的PAZU完美的满足了我的需求.下面是例子代码,贴出来做备忘吧! <!DOCTYPE html PUBL ...
lodop打印html内容,Lodop打印控件在页面如何使用
Lodop打印控件部署到web服务器简单,在页面的使用方法也简单,是非常容易和方便使用的打印控件. 客户端本地打印角色(即用户访问网站后用自己链接的打印机进行客户端本地打印),步骤很少,部署简单: ...
兼容所有浏览器的Web打印控件的设计方案
兼容所有浏览器的Web打印控件的设计方案设计方案的简单实现网址:http://www.lc-simple.com/PrintTest/ 第一章:Web打印控件的原理 Web打印控件的工作的原理如下: ...
做了个web应用打印控件,用了4Fang WEB 打印控件,免费
做了个网页程序,选择了一个web打印控件,在浏览器升级到ie7后,不能打印了. 然后用了4Fang WEB 打印控件,免费的,支持ie6,ie7,ie8,可以自定义纸张大小, 自定义页眉页脚,分页.. ...
免费Web打印控件测试
在WEB系统中,打印的确是个烦人的问题----特别是你的应用环境又有很多种类的打印机.如果自己开发打印控件,可能因为项目时间紧而来不及.前段时间有机会接触了一下WEB打印.在博客园.CSDN以及各个论 ...
Lodop和C-Lodop打印控件用vue在win7电脑不兼容样式板式错乱问题
项目背景本文是使用C-Lodop云打印控件,在使用的过程中,出现在win7电脑不兼容,模板样式错乱情况. 这里先简单介绍下C-Lodop: 有人说她是Web打印控件,因为她能打印.在浏览器中以插件的 ...

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

前言

LodopFuncs.js文件

vue使用lodop打印控件实现浏览器兼容打印相关推荐

最新文章

热门文章