LODOP打印vue和 js

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.userAgentif (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 eqeqeqif (CLodopJsState == 'loading' || CLodopJsState == 'complete') returnCLodopJsState = 'loading'var head = document.head || document.getElementsByTagName('head')[0] || document.documentElementvar 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 LODOPtry {var ua = navigator.userAgentvar isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i))if (needCLodop()) {try {// eslint-disable-next-line no-undefLODOP = getCLodop()// eslint-disable-next-line no-empty} catch (err) {}if (!LODOP && CLodopJsState !== 'complete') {// eslint-disable-next-line eqeqeqif (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-undefif (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.innerHTMLreturn 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')
}