LODOP 和 C-LODOP 打印
官方网址
官网说明如下
Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现
复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下:
● PRINT_INIT(strPrintTaskName)打印初始化
● SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小
● ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
● ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
● ADD_PRINT_TABLE(intTop,intLeft,intWidth,intHeight,strHtml)增加表格项
● ADD_PRINT_SHAPE(intShapeType,intTop,intLeft,intWidth,intHeight,intLineStyle,intLineWidth,intColor)画图形
● SET_PRINT_STYLE(strStyleName, varStyleValue)设置对象风格
● PREVIEW打印预览
● PRINT直接打印
● PRINT_SETUP打印维护
● PRINT_DESIGN打印设计
安装
下载最新版本地址
下载完成后解压安装如下程序:
修改js
官方提供的js文件,只需要进行简单的修改就可以。(我这里只修改这么多。然后写了一个如果客户端未安装或版本低,提供下载的方法(暂时不是很重要))
代码(测试例子)
lodopFuns.js 就是我们修改的js文件,printUtils.js在里面写样式(测试用的js,随便写几个样式)
代码是其中的一个样式。
// 引入 lodopFuns.js 的 getLodop 方法
import { getLodop } from '@/utils/lodop/lodopFuns'
// strPrintTaskName:打印名称 printDate:打印日期 printModel:打印模块 date:数据
const libraryBarcode = (strPrintTaskName, printModel, data) => {
const LODOP = getLodop()
LODOP.PRINT_INIT(strPrintTaskName)
LODOP.ADD_PRINT_LINE(35, 15, 34, 515, 0, 2)
// dates() 这里是我获取日期的方法 可以忽略 也可以用官方提供的
LODOP.ADD_PRINT_TEXT(12, 39, 90, 20, dates())
LODOP.SET_PRINT_STYLEA(0, 'FontName', '楷体')
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
LODOP.ADD_PRINT_TEXT(12, 256, 144, 20, printModel)
LODOP.SET_PRINT_STYLEA(0, 'FontName', '楷体')
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 8)
LODOP.ADD_PRINT_LINE(35, 15, 215, 16, 0, 2)
LODOP.ADD_PRINT_LINE(214, 15, 215, 515, 0, 2)
LODOP.ADD_PRINT_LINE(214, 514, 34, 515, 0, 2)
LODOP.ADD_PRINT_LINE(214, 186, 34, 187, 0, 2)
LODOP.ADD_PRINT_TEXT(58, 184, 88, 24, '物料编码:')
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
LODOP.ADD_PRINT_LINE(96, 186, 95, 514, 0, 2)
LODOP.ADD_PRINT_LINE(157, 188, 156, 514, 0, 2)
LODOP.ADD_PRINT_TEXT(119, 184, 88, 24, '物料名称:')
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
LODOP.ADD_PRINT_TEXT(176, 184, 88, 24, '规格尺寸:')
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
// 这里 A 是用户 写入的数据 物料编码(数据)
LODOP.ADD_PRINT_TEXT(58, 272, 235, 24,A)
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
// 这里 “B” 代表的是用户写入的数据 (物料名称(数据))
LODOP.ADD_PRINT_TEXT(119, 272, 235, 24, B)
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
// 这里 “C” 代表 用户写入的数据 (规格尺寸)
LODOP.ADD_PRINT_TEXT(176, 272, 235, 24,C)
LODOP.SET_PRINT_STYLEA(0, 'FontSize', 10)
LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
// 打印条码 12345646635345 // 自己设置的数据
LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, 'QRCode', ‘12345646635345’)
LODOP.SET_PREVIEW_WINDOW('1', '0', '0', '900px', '600px', '') // 预览窗口
// LODOP.PRINT() // 直接打印
// LODOP.PREVIEW() // 打印预览
LODOP.PRINT_SETUP() // 打印维护
// LODOP.PRINT_DESIGN() // 打印设计
}
export { libraryBarcode }
PRINT_INIT(strPrintTaskName) 打印初始化
// intTop:距离顶部高度; intLeft :距离左边高度 intWidth:宽度 intHeight :高度 strContent:文本
ADD_PRINT_TEXT(intTop,intLeft,intWidth,intHeight,strContent)增加纯文本项
LODOP.PRINT() // 直接打印(无窗口)
LODOP.PREVIEW() // 打印预览窗口
LODOP.PRINT_SETUP() // 打印维护窗口
LODOP.PRINT_DESIGN() // 打印设计窗口
//12345646635345 设置的数据 QRCode 类型 44, 21, 169, 173 上,左,宽,高
LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, ‘QRCode’, ‘12345646635345’) //分页
说明 效果图
LODOP.PRINT_DESIGN() // 打印设计窗口 (这是设计的窗口)
LODOP.PREVIEW() // 打印预览窗口 (这是预览的窗口)
大致是这个样子。。。。。。。。。。。。。。。。。。。。。。。。。
当然还可以自己写 页面,然后通过官方提供的把h5写入到打印中。不过样式会丢需要把
样式写进去,然后就可以啊。。。。。。。。。。。。。。。。。。。。。。。。。。。。
模板设计
这里可以进行模板设计生成以上代码
模板设计
比如:进入模板设计:点击这个小图标可以进入“生成代码”可以生成那堆样式代码(可以根据需求先练习下画画) 生成后放入代码中就行啦
分页
分页的话可以进行强制分页:
// one
LODOP.NEWPAGEA()
// two
LODOP.NEWPAGE()
以上两个分页都可以,
简单区分:[one]分页 不会覆盖数据(即第一页数据没展示完到第二页不会覆盖第二页的内容) 。
[two]分页 会覆盖数据(即第一页数据没展示完到第二页会覆盖第二页的内容) 。
大致这个意思吧。
然后进入分页打印的话,可以进行for循环然后调用【one】【two】分页,最后弹出等等等等等。。。。。。。。。。。。。。。。
或者写 pageSize 啥的等等。。。。。。。。。。。。。
第一种例子:
*//先for*
for (let i = 0; i < 2; i++) {
// 打印条码
LODOP.ADD_PRINT_BARCODE(44, 21, 169, 173, 'QRCode', '231231231')
LODOP.ADD_PRINT_TEXT('96%', '85%', 200, 22, '第' + 1 + '页/共' + 2 + '页')
//分页
LODOP.NEWPAGEA()
}
*//最后*
LODOP.PREVIEW()
嗯,貌似这个d样子。。。。。。。。。。。。。。。。
差不多就那么多吧,根据需求自己改写就可以啦。
最后说一下注册,呐呐呐,看官网:
添加链接描述
有错误的地方欢迎给俺指一下,俺也是第一次用这玩意。
附上简单修改的lodopFun.js
import { MessageBox } from 'element-ui'
// eslint-disable-next-line no-unused-vars
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(以防其中一个被占):==
export function loadCLodop() {
// eslint-disable-next-line eqeqeq
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 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_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动,点击这里<a href='http://192.168.3.21:80/CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>"
// var strCLodopInstall_2 = "<br>(若此前已安装过,可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>)"
// var strCLodopInstall_3 = ',成功后请刷新本页面。</font>'
var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='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 {
// eslint-disable-next-line no-undef
LODOP = getCLodop()
// eslint-disable-next-line no-empty
} catch (err) {}
if (!LODOP && CLodopJsState !== 'complete') {
// eslint-disable-next-line eqeqeq
if (CLodopJsState == 'loading') {
this.$message({
message: '网页还没下载完毕,请稍等一下再操作.',
type: 'warning',
duration: 1000
})
} else {
this.$message({
message: '没有加载CLodop的主js,请先调用loadCLodop过程.',
type: 'warning',
duration: 1000
})
}
return
}
if (!LODOP) {
// document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : '') + strCLodopInstall_3 + document.body.innerHTML
// return
} else {
// eslint-disable-next-line no-undef
if (CLODOP.CVERSION < '4.0.9.6') {
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) {
MessageBox({
title: '提示',
type: 'warning',
showCancelButton: 'true',
message: '您还未安装打印控件,点击确认下载打印控件,安装后成功后刷新页面即可打印',
callback: res => {
if (res === 'confirm') {
loadLodop()
}
}
})
}
}
// 这里可以写 下载地址 ,测试就写了官网
export function loadLodop() {
window.open('http://www.lodop.net/download.html')
}