vue如何使用lodop

2023-11-11 16:58| 来源: 网络整理| 查看: 265

如何在Vue中使用lodop

最近在项目中需要打印，lodop是web端常用的打印工具，安装打印机驱动之后，连接打印机，看是否能实现正常打印。打开lodop官网，http://www.lodop.net/index.html 下载lodop客户端。 lodopFuncs.js 就是我们所需要的文件把lodopFuncs拷贝到utils文件夹下，新建doprint.js和lodop.js

//doprint.js import { getLodop } from '@t/lodop' //这块就是引用的上面一大坨暴露出来的方法喽 const PrintAccount = (qrTitle, codetype, url, code) => { let qrAccount = `${url}/#/?type=${codetype}&code=${code}` // 调用打印对象 LODOP = getLodop() // 打印页面配置 LODOP.SET_PRINT_MODE('PRINT_NOCOLLATE', 1) LODOP.SET_PRINT_PAGESIZE(3, '5.7cm', '2cm', 2) // 条码内容 LODOP.ADD_PRINT_TEXT(3, 32, 127, 20, qrTitle) LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15) LODOP.ADD_PRINT_BARCODE(26, 15, 170, 147, 'QRCode', qrAccount) // LODOP.ADD_PRINT_TEXT(159, 11, 163, 42, qrAccount) // LODOP.SET_PRINT_STYLEA(0, 'FontSize', 11) } export { PrintAccount } //lodop.js //==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序== var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState; //==判断是否需要CLodop(那些不支持插件的浏览器):== 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(以防其中一个被占):== function loadCLodop() { if (CLodopJsState == "loading" || CLodopJsState == "complete") return; CLodopJsState = "loading"; var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement; var JS1 = document.createElement("script"); var JS2 = document.createElement("script"); JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1"; JS2.src = "http://localhost:18000/CLodopfuncs.js"; JS1.onload = JS2.onload = function() {CLodopJsState = "complete";} JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";} head.insertBefore(JS1, head.firstChild); head.insertBefore(JS2, head.firstChild); CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i)); } if (needCLodop()){loadCLodop();}//加载 //==获取LODOP对象主过程,判断是否安装、需否升级:== export default function getLodop(oOBJECT, oEMBED) { var strHtmInstall = "打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"; var strHtmUpdate = "打印控件需要升级!点击这里执行升级,升级后请重新进入。"; var strHtm64_Install = "打印控件未安装!点击这里执行安装,安装后请刷新页面或重新进入。"; var strHtm64_Update = "打印控件需要升级!点击这里执行升级,升级后请重新进入。"; var strHtmFireFox = "（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）"; var strHtmChrome = "(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）"; var strCLodopInstall_1 = "Web打印服务CLodop未安装启动，点击这里下载执行安装"; var strCLodopInstall_2 = "（若此前已安装过，可点这里直接再次启动）"; var strCLodopInstall_3 = "，成功后请刷新本页面。"; var strCLodopUpdate = "Web打印服务CLodop需升级!点击这里执行升级,升级后请刷新页面。"; 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 && CLodopJsState !== "complete") { if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程."); return; } if (!LODOP) { document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML; return; } else { if (CLODOP.CVERSION < "4.1.2.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); } }

修改文件，只保留我们需要的主函数在需要打印的文件中引入我所用到的是包含背景图的打印，如果你跟我的需求不同，请参照在在线样例样例清单查找你需要的样例：在这里插入图片描述或者直接进入设计模式设计你所需要的文件样式 http://demo.sinoverse.cn/lodop_print 下面是我打印的代码：

演示用程序方式加载背景图：

下面是互联网上的一个图片，进入以它为背景图的打印维护看看。

;

默认情况下背景图是不打印的，可以用BKIMG_PRINT让打印或预览包含背景图。

import getLodop from "../utils/lodop"; export default { data() { return { LODOP:null }; }, methods: { myPrintSetup2() { this.CreatePage(); this.LODOP.PRINT_SETUP(); }, myPreview1() { this.CreatePage(); this.LODOP.SET_SHOW_MODE("BKIMG_PRINT", 1); this.LODOP.PREVIEW(); }, CreatePage() { //设计网址 http://demo.sinoverse.cn/lodop_print this.LODOP = getLodop(); this.LODOP.PRINT_INIT(""); this.LODOP.SET_SHOW_MODE("BKIMG_IN_PREVIEW", true); this.LODOP.PRINT_INITA(-42, 0, 800, 600, ""); this.LODOP.ADD_PRINT_TEXT(139, 403, 189, 20, "收款人"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(171, 107, 193, 20, "账号"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(168, 403, 192, 20, "新加文本4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(198, 105, 191, 42, "开户行1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(195, 403, 191, 41, "开户行2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(64, 505, 231, 20, "机打票号：11111111"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(116, 279, 50, 20, "nian"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(115, 335, 26, 20, "yu"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(116, 370, 27, 20, "ri"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(59, 59, 101, 20, "电子缴款码："); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(59, 138, 176, 20, "1414141414"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(80, 59, 101, 20, "集中汇缴："); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(100, 60, 177, 20, "校验码：454545"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(119, 108, 130, 20, "执收单位"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(248, 59, 48, 20, "1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(246, 108, 225, 20, "项目名成1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(245, 391, 43, 20, "数量1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(244, 457, 65, 20, "标准1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(244, 548, 96, 20, "金额1"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(277, 59, 47, 20, "2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(304, 59, 47, 20, "3"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(331, 59, 48, 20, "4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(360, 60, 47, 20, "5"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(275, 106, 231, 20, "项目名称2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(304, 107, 230, 20, "项目名称3"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(332, 108, 225, 20, "项目名称4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(359, 106, 230, 20, "项目名称5"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(274, 391, 48, 20, "数量2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(306, 391, 54, 20, "数量3"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(331, 392, 46, 20, "数量4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(356, 391, 49, 20, "数量5"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(273, 457, 65, 20, "标准2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(304, 457, 65, 20, "标准3"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(327, 458, 65, 20, "标准4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(356, 456, 65, 20, "标准5"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(270, 547, 100, 20, "金额2"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(300, 548, 100, 20, "金额3"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(329, 546, 100, 20, "金额4"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(356, 547, 100, 20, "金额5"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 8); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(386, 186, 268, 20, "壹佰万元整"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(383, 546, 100, 20, "1000000"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(453, 224, 90, 20, "经办人"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(453, 85, 100, 20, "复核人"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(480, 77, 604, 20, "备注"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); this.LODOP.ADD_PRINT_TEXT(144, 108, 185, 20, "猪狗蛋蛋"); this.LODOP.SET_PRINT_STYLEA(0, "FontSize", 10); this.LODOP.SET_PRINT_STYLEA(0, "Bold", 1); }, }, };

在这里插入图片描述

【本文地址】

vue如何使用lodop

vue如何使用lodop

今日新闻

推荐新闻