【vue学习】整合Lodop 【vue学习】整合Lodop

前端实现自动打印批量打印
vue中使用lodop调用标签打印机
利用lodop打印控件轻松实现批量打印
本文主要摘自vue项目中使用Lodop实现批量打印html页面和pdf文件
1.Lodop是什么？
Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句,主要接口函数如下：

●PRINT_INIT(strPrintTaskName)打印初始化 ●SET_PRINT_PAGESIZE(intOrient,intPageWidth,intPageHeight,strPageName)设定纸张大小参数说明： intOrient：打印方向及纸张类型 1---纵向打印，固定纸张； 2---横向打印，固定纸张； 3---纵向打印，宽度固定，高度按打印内容的高度自适应(见样例18)； 0---方向不定，由操作者自行选择或按打印机缺省设置。 intPageWidth：纸张宽，单位为0.1mm 譬如该参数值为45，则表示4.5mm,计量精度是0.1mm。 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打印设计

最基本的打印过程至少有初始化语句、添内容语句和打印语句三部分组成，例如：

LODOP.PRINT_INIT("打印任务名"); //首先一个初始化语句 LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一"); //然后多个ADD语句及SET语句 LODOP.PRINT(); //最后一个打印(或预览、维护、设计)语句

【【vue学习】整合Lodop】官网地址；C-Lodop的PDF文档打印；在线案例
2.在vue项目中如何实现批量打印功能？
1.在index页面中引入js文件
2.在批量打印时我们得先区分是html标签打印还是pdf打印

// 批量打印lazada国内面单(html标签) printingClick() { const tableInfo = this.multipleSelection.map(item => window.decodeURIComponent(escape(window.atob(item.shippingPdfUrl)))) console.log(tableInfo) LODOP = getLodop() LODOP.PRINT_INIT('打印') LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '')// 3代表纵向打印，宽度固定，高度按打印内容的高度自适应,纸张10*15 for (let i = 0; i < tableInfo.length; i++) { this.creatOneRage(tableInfo[i]) } LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '') if (LODOP.SET_PRINTER_INDEXA(0)) { LODOP.PRINT() } // 这里实现的是选择打印机，数字代表打印机的型号，如果不需要预览，将LODOP.PREVIEW()改为LODOP.PRINT() }, creatOneRage(table) { LODOP.NewPage() LODOP.ADD_PRINT_IMAGE(12, 12, '95%', '95%', table) LODOP.SET_PRINT_STYLEA(0, 'Stretch', 2) },

SET_PRINTER_INDEX(oIndexOrName); 按序号或名称指定打印机，选定后禁止手工重选；
SET_PRINTER_INDEXA(IndexorName); 按序号或名称指定打印机，选定后允许手工重选；

// 批量打印pdf文件 // 批量打印pdf文件 printingShopee() { const strURL = ['QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MDkxOTA1MzU0S0QzRy5wZGY=', 'QzpcVXNlcnNcYWRtaW5cRG93bmxvYWRzXDE5MTAyMzIwMjUxQVdUSCAoMSkucGRm']// 线上地址有跨越问题，本地路径模拟打印,路径不能直接识别，所以先加密了 const strURLorContent = strURL.map(item => window.atob(item)) LODOP = getLodop() LODOP.PRINT_INIT('打印') LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, '') for (let j = 0; j < strURLorContent.length; j++) { this.creatPdfRage(strURLorContent[j]) } LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, '') if (LODOP.SET_PRINTER_INDEXA(1)) { LODOP.PREVIEW() } //上面的例子选择的打印机序号为0，这里为1，上面的直接打印，这里的是预览，可以根据需求选择 LODOP.PREVIEW() }, creatPdfRage(pdf) { LODOP.NewPage() LODOP.ADD_PRINT_PDF(0, 0, '100%', '100%', pdf) },

3.部分面单信息返回的html标签我们需要进行过滤

demo: 一个很长的html标签字符串，我们需要过滤掉``标签后面的所有内容：

注：打印机的安装，先去打印机官网下对应的驱动，然后在控制面板中添加打印机
能打印PDF的C-Lodop4.0测试版已能下载,下载地址是： http://demo.c-lodop.com:8000/CLodop_Setup4.0(Beta).zip 安装后在欢迎页面末尾找“PDF打印”链接，或输入地址:
http://localhost:8000/c_pdfprint