1. 首页
  2. 全部文档
  3. 开发框架模块手册
  4. 用Lodop打印标签和报表

用Lodop打印标签和报表

用Lodop打印标签和报表

  • 模块项目可下载学习或复用至新项目中
  • 请参考“无代码开发视频手册”中“打印”演示说明
  • 一般精确打印用标签打印机时,会有配套打印软件、其他打印如Word、Exce打印是这办公软件中的功能,而WEB打印中,如果直接使用我们默认的打印元件,则是调用浏览器打印功能,这个功能因为浏览器不同而处理结果有很大差异,并且在实际项目中,需要对打印内容、位置、字符进行精确设计,浏览器打印不能全面兼顾到,所以有必要使用专业的打印工具
  • Lodop是在页面中将需要打印的内容以HTML或字符等变量传给一个在项目后台设计的打印函数中,页面中运行此函数时,会触发用户端安装的一个客户端打印软件,由此软件打开进行预览、内容调整、甚至是内容自定义,可以打印标签、单据、卡、报表、图表…请参考官网:http://c-lodop.com/index.html

分步逻辑设计

  • 添加打印函数JS文件,我们模块项目中是将下载的打印函数文件“LodopFuncs.js”放入了项目的Web子文件夹下
    • 下载地址:http://c-lodop.com/download.html
    • 下载文件中,“LodopFuncs.js”放入了项目的Web子文件夹下,程序安装文件是供用户端安装在用户电脑中进行打印处理的
  • 设计打印内容,一般标签报表等打印内容,都是设计在一个表格中的,各种显示信息放入表格中,作为一个打印函数的变量传给函数处理
    • 比如下面是我们设计的表格,其中要显示的标题,格式,大小都是表格设计的内容
    <div style="width:1000mm;height:750mm" id="html${id}"><style type="text/css">#a td{border: 1px solid black;text-align:center;}#a th{border: 1px solid black;font-weight:bold;}#a {border-collapse:collapse;width:100%;font-size:12px;}#b {border-collapse:collapse;width:100%;font-size:12px;text-align:center;height:100px;}</style> <table style="width:100%;">     <tbody>  <tr class="firstRow"> <td width="25%" valign="middle"></td> <td width="75%" valign="middle" align="center"><span style="font-size: 14px;">xx机械有限公司</span> </td> </tr>  <tr> <td width="25%" valign="middle"></td> <td width="75%" valign="middle" align="center">     <span style="font-size: 17px;">生产和移转看板卡</span> </td> </tr>  <tr class="firstRow"> <td width="40%"></td> <td width="60%" align="right">     工作中心:${a} &nbsp; &nbsp; 下道工作中心:${b} </td> </tr>     </tbody> </table> <table>     <tbody>  <tr class="firstRow"> <td width="25%">     工单编号: </td> <td width="75%" colspan="3">     ${c} </td> </tr>  <tr> <td width="25%">     产品编号: </td> <td width="25%">     ${d} </td> <td width="25%">     产品名称: </td> <td width="25%">     ${e} </td> </tr>  <tr> <td>     下单日期: </td> <td>     ${f} </td> <td>     需求数量: </td> <td>     ${g} </td> </tr>  <tr> <td width="25%">     计划完工日期: </td> <td width="25%">     ${h} </td> <td width="25%">     实际完工日期: </td> <td width="25%">     ${i} </td> </tr>  <tr> <td>     未完工量: </td> <td>     ${j} </td> <td>     生产数量: </td> <td></td> </tr>  <tr> <td width="80%" colspan="4">     ${l} &nbsp; 件/整框* &nbsp; &nbsp; &nbsp; &nbsp;整框+ &nbsp; &nbsp; &nbsp;件/零框 </td> </tr>  <tr> <td width="20%">     发料员: </td> <td width="30%"></td> <td width="20%">     收料员: </td> <td width="30%"></td> </tr>  <tr> <td>     检验员: </td> <td></td> <td>     检验日期: </td> <td></td> </tr>     </tbody> </table> </div>
    
    • 以上表格HTML代码中,对应的数据是用${xxx}变量符号替换的,这样在使用时,可任意传入数据,用“Create from Template模板生成字符串”元件来生成要打印的内容

  • 打印函数设计、运行函数元件中传入打印内容,此模块案例中,我们是将生成的标签信息先显示在一个显示块中,在一个“打印”名称的按钮中,我们是将显示块中的表格代码又传给运行函数元件来处理的,此案例中,我们将二维码内容先传入页面一个变量中,再传入运行函数元件的一个自定义添加的输入元件作为二维码值
    • 打印一个标签的函数中代码内容说明如下:
     //生产加工标签打印功能:
     function prn_liuzhuanbiaoqian_preview(bqhtml,qrhtml){          //函数名称和变量定义
     	LODOP=getLodop();                                           //调用lodop的功能---指用户电脑启动的Lodop安装程序
     	LODOP.PRINT_INIT("lzbq");                                   //本次打印任务的独立名称,每个打印任务有自己的名称,是Lodop的定义,参考官网说明
         LODOP.SET_PRINT_PAGESIZE(1, 1000, 750, "LodopCustomPage");  //打印页面布局设计,布局名称
         LODOP.SET_PRINT_MODE("POS_BASEON_PAPER",true);				//打印纸张设定的参考,是Lodop的定义,参考官网下载的技术手册说明
     	LODOP.ADD_PRINT_HTM(8,15, "100%","100%",bqhtml);            //打印内容变量引入,同时前两个参数配合打印的HTML内容的DIV宽度设定值进行不同打印机的实际效果设定
     	LODOP.ADD_PRINT_BARCODE(10,10,90,90,"QRCode",qrhtml);       //打印二维码变量引入
     	LODOP.SET_PRINT_STYLE("FontSize",11);                       //内容样式定义---字体大小为11
     	LODOP.SET_PRINT_STYLE("Bold",1);	                        //内容样式定义---字体是否为粗体
     	LODOP.PREVIEW();                                            //执行打印预览处理
     };	
    • 我们在“LodopFuncs.js”文件中还设计了可以一次连续打印多个标签的函数,其中HTML表格是标签内容,“@”是每个标签内容及二维码内容分隔符,可以在逻辑中自定义分隔符号及生成多个标签的全部HTML内容传入进行打印

  • 执行打印时的窗口

快速复用指导

  • 1、下载成熟模块项目,开发工具中导入项目
  • 2、打开导入的项目,可以复制WEB文件中的“LodopFuncs.js”文件到新项目WEB文件夹中,必要时参考Lodop官方手册调整打印函数
  • 3、在新项目中设计想要打印的HTML表格模板,设计用变量传入“Create from Template模板生成字符串”元件来生成要打印的内容,将打印内容传入运行JS脚本元件的内容变量同名的输入元件中,如果在打印函数中设计了多个变量,则在运行JS脚本元件中添加更多输入项

注意

  • 可以只复用用模板生成图表的代码部分,其他较简单直接点选元件开发更方便