第⼗⼋篇难点突破之-VUE中使⽤C-LODOP实现模板的套打前⾔: ⽬前模板套打的⼯具不多，个⼈参与的项⽬恰好需要使⽤到模板套打功能，于是查了⼀下最后选择了 C-LODOP 。其常见的功能都覆盖到了，尤其⽤户本地直接接打印机打印是免费的。
套打：简单的理解就是，纸上的⽹格线、表头等信息都有了，现在要做的就是将内容动态填充上去。如：快递单、银⾏⼩票等。
先看下⼤致效果：
1.未检测到 c-lodop 服务，进⾏提⽰
2. 打印预览页⾯(蓝⾊字体是动态打上去的，表格绿⾊字体等是图⽚背景)
下⾯来说下⼤致的实现步骤，以及遇到的⼀些难点：
1.先下载安装 C-LODOP
⽂件不⼤，解压之后，点击如下 exe ⽂件启⽤服务。
2. 将上述的 LodopFuncs.js ⽂件放到⼯程某个⽂件下
并对该⽂件做⼀点点⼩的处理，以下是⾃⼰的处理。
该插件可直接放在前端⼯程⽂件下，当提⽰的时候，⽤户可以直接下载。
.....
// 下载loadLodop
function loadLodop() {
const lodopurl = '../lodop/CLodop_Setup_'
window.location.href= lodopurl
}
......
/* eslint-disable */
import { MessageBox } from 'element-ui'
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 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.documentElement
var oscript = ateElement('script')
oscript.src = 'localhost:8000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)
/
/引⽤双端⼝(8000和18000）避免其中某个被占⽤：
oscript = ateElement('script')
oscript.src = 'localhost:18000/CLodopfuncs.js?priority=0'
head.insertBefore(oscript, head.firstChild)
}
// 下载loadLodop
function loadLodop() {
const lodopurl = '../lodop/CLodop_Setup_'
window.location.href= lodopurl
}
//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT, oEMBED) {
var strHtmInstall =
"<br><font color='#FF00FF'>打印控件未安装!点击这⾥<a href='' target='_self'>执⾏安装</a>，安装后请刷新页⾯或重新进⼊。</font>"
var strHtmUpdate =
"<br><font color='#FF00FF'>打印控件需要升级!点击这⾥<a href='' target='_self'>执⾏升级</a>，升级后请重新进⼊。</font>"
var strHtm64_Install =
"<br><font color='#FF00FF'>打印控件未安装!点击这⾥<a href='' target='_self'>执⾏安装</a>，安装后请刷新页⾯或重新进⼊。</font>"
var strHtm64_Update =
"<br><font color='#FF00FF'>打印控件需要升级!点击这⾥<a href='' 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='www.c-lodop/download/CLodop_Setup_for_Win32NT_h  var strCLodopUpdate =
"<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这⾥<a href='CLodop_Setup_' target='_self'>执⾏升级</a>，升级后请刷新页⾯。</f  var LODOP
var LODOP
try {
var isIE =
navigator.userAgent.indexOf('MSIE') >= 0 ||
navigator.userAgent.indexOf('Trident') >= 0
if (needCLodop()) {
try {
LODOP = getCLodop()
} catch (err) {
MessageBox({
title: '温馨提⽰',
type: 'warning',
showCancelButton: true,
confirmButtonText: '下载',
cancelButtonText: '取消',
message: '检测到您还未安装C-LODOP套打控件，请确认启⽤后再打印。或您可点击下载该套打控件，安装成功后刷新页⾯再进⾏打印',            callback: res => {
if (res === 'confirm') {
loadLodop()
}
}
})
}
if (!LODOP && adyState !== '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) veChild(oEMBED)
if (oOBJECT && oOBJECT.parentNode)
veChild(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 = ateElement('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插件未安装时提⽰下载地址:==========
//=====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)
<('getLodop出错:' + err)
}
}
3. 调⽤的⽅法
import { getLodop } from '@/util/lodop/LodopFuncs'
4. ⼀些细节点
4.1 背景图引⼊以及 lodop 设置⼤⼩
import imgsrc from '@/assets/images/lodop/taoda.jpg'
data() {
return {
imgsrc,
......
}
},
LODOP.ADD_PRINT_SETUP_BKIMG(`"<img border='0' src=${this.imgsrc}>"`) //背景图
LODOP.SET_SHOW_MODE('BKIMG_LEFT', '0mm') // 左边距离
LODOP.SET_SHOW_MODE('BKIMG_TOP', '0mm') // 顶部距离
LODOP.SET_SHOW_MODE('BKIMG_WIDTH', '197mm') // 宽度
LODOP.SET_SHOW_MODE('BKIMG_HEIGHT', '210mm') // ⾼度这句可不加，因宽⾼⽐例固定按原图的      LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW', 1) // 预览的时候带背景

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。