Vue 项目中使用Lodop进行打印

配置文件与地址

Lodop

插件下载、打印设计都在这个网址上面进行，过程不做过多赘述，相信大家在看文章前应该对Lodop有了一定的了解

Vue中引入Lodop所需的配置文件

建议在项目中建一个自己的工具方法文件夹，使用方便

相信大家在截图中已经看到了，有个lodop.js的文件，没错！核心的一大坨都在里面，这里直接上代码

var CreatedOKLodop7766 = nullexport function needCLodop() {try {var ua = navigator.userAgentif (ua.match(/Windows\sPhone/i) != null) return trueif (ua.match(/iPhone|iPod/i) != null) return trueif (ua.match(/Android/i) != null) return trueif (ua.match(/Edge\D?\d+/i) != null) return truevar 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 trueelse if (verFF !== null) {verFF = verFF[0].match(/\d+/)if (verFF[0] >= 41 || 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] >= 41) return true}}return false} catch (err) {return true}
}//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {var head =document.head ||document.getElementsByTagName('head')[0] ||document.documentElementvar 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.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行安装</a>,安装后请刷新页面。</font>"var strCLodopUpdate ="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='http://www.lodop.net/download/CLodop_Setup_for_Win32NT_https_3.046Extend.zip' download target='_self'>执行升级</a>,升级后请刷新页面。</font>"var LODOPtry {var isIE =navigator.userAgent.indexOf('MSIE') >= 0 ||navigator.userAgent.indexOf('Trident') >= 0if (needCLodop()) {try {LODOP = getCLodop()} catch (err) {}if (!LODOP && document.readyState !== 'complete') {alert('C-Lodop没准备好，请稍后再试！')return}if (!LODOP) {if (isIE) document.write(strCLodopInstall)elsedocument.body.innerHTML =strCLodopInstall + document.body.innerHTMLreturn} else {if (CLODOP.CVERSION < '3.0.4.3') {if (isIE) document.write(strCLodopUpdate)elsedocument.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 && navigator.userAgent.indexOf('x64') >= 0//=====如果页面有Lodop就直接使用，没有则新建:==========if (oOBJECT != undefined || oEMBED != undefined) {if (isIE) LODOP = oOBJECTelse 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.body.innerHTML =strHtmChrome + document.body.innerHTMLif (navigator.userAgent.indexOf('Firefox') >= 0)document.body.innerHTML =strHtmFireFox + document.body.innerHTMLif (is64IE) document.write(strHtm64_Install)else if (isIE) document.write(strHtmInstall)elsedocument.body.innerHTML =strHtmInstall + document.body.innerHTMLreturn LODOP}}if (LODOP.VERSION < '6.2.2.3') {if (!needCLodop()) {if (is64IE) document.write(strHtm64_Update)else if (isIE) document.write(strHtmUpdate)elsedocument.body.innerHTML =strHtmUpdate + document.body.innerHTML}return LODOP}//===如下空白位置适合调用统一功能(如注册语句、语言选择等):===//===========================================================return LODOP} catch (err) {alert('getLodop出错:' + err)}
}

紧接着在上面的截图有个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 }

打印设计

首先进入打印设计页面

进入下面这个设计页面当然是你在打开官网插件之后操作的

这里面可以把你设计的图形界面生成代码，也就是上面第二段代码

页面开始打印

准备好上面的操作，整个过程你已经完成了90%
接下来就是调用了，封装好的公共样式的doPrint.js文件就是你要调用的

import { PrintAccount } from '@t/doPrint'
import { getLodop } from '@t/lodop'

批量打印、或者单个打印

<div class="selectBtn"><el-button class="form_button" type="primary" @click="multipPrint" icon="el-icon-printer">批量打印</el-button><el-button class="form_button" type="primary" @click="singlePrint" icon="el-icon-printer">单个打印</el-button>
</div>

// 多选打印multipPrint() {if (this.multipkeSelect.length <= 1) {this.$notify({title: '警告',message: '请至少选择两项进行打印',type: 'warning',})return}for (let i = 0; i < this.multipkeSelect.length; i++) {PrintAccount('商品包装码','3',Connect.codeUrl,this.multipkeSelect[i].packingCode,)LODOP.PRINT()// LODOP.PREVIEW()}},singlePrint() {if (this.multipkeSelect.length != 1) {this.$notify({title: '警告',message: '请选择且仅选择一项进行打印',type: 'warning',})return}PrintAccount('商品包装码','3',Connect.codeUrl,this.multipkeSelect[0].packingCode,)LODOP.PRINT()// LODOP.PREVIEW()},

仔细看里面分别有个LODOP.PRINT()和LODOP.PREVIEW()
LODOP.PRINT()代表直接打印不进行预览，点完打印就看你打印机的了
LODOP.PREVIEW()代表先预览再打印

希望对Lodop有深入了解或者对AI打印感兴趣的朋友多多沟通，让项目做的更快更顺利

Vue 项目中使用Lodop进行打印相关推荐

vue项目中使用lodop实现打印
先说一下Lodop 是什么东西吧官网有详细介绍我就不多说啦官网:http://www.lodop.net/ Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可 ...
如何在vue项目中使用lodop打印插件
如何在vue项目中使用lodop打印插件 - 简书先写了个webdemo <%--Created by IntelliJ IDEA.User: AdministratorDate: 2018/ ...
详解如何在vue项目中使用lodop打印插件,以及样式打印预览缺失的问题（底部）
C-Lodop是一个免费云服务程序,可接受来自其它平台浏览器的JavaScrip语句实现远程打印. 目前是各家软件公司进行手机或微信远程打印的流行解决方案. 和其它"云打印"概念相 ...
vue项目中如何利用lodop控件实现多页打印
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境下载安装首先去lodop官网下载中心下载相关的包,完成安装重点关注前四个文件,安装第一个文件,在第二个 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，
vue项目中,使用微信js-sdk打开微信内置导航,唤醒第三方导航一.准备工作二.开发须知三.开始安装sdk 四.通过微信的config接口注入权限验证配置附上代码最近在搞vue项目需要在手 ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...

Vue 项目中使用Lodop进行打印

配置文件与地址

Vue中引入Lodop所需的配置文件

打印设计

页面开始打印

希望对Lodop有深入了解或者对AI打印感兴趣的朋友多多沟通，让项目做的更快更顺利

Vue 项目中使用Lodop进行打印相关推荐

最新文章

热门文章