lodop打印控件(集成Lodop打印控件实现打印教程)

一、前言

关于打印这一块我前后做了很多的尝试:Java条形码标签生成并打印示例、再记js前端打印指定内容、JsBarcode打印demo。其中涉及到后端、前端的两种实现,目前我这边项目中实现的是前端打印Html的方式实现的。

但是慢慢地就会发现,在前端及打印机的适配上配置比较复杂,每增加一台设备就要进行一次配置、修改后牵动过大,每一个参数

每次调整都会影响到全局元素,一个1毫米的误差在连续打印100张或更多时就会被无限放大...

二、Lodop2.1、寻求更优解决方案

痛则思变,寻求一种能实现我们需求且兼容性更好地解决方式势在必行!在同事的介绍下,接触到了Lodop这个打印插件。Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用。

2.2、简单介绍

这是一款打印插件,目前支持IE系列、IE内核系列(QQ、搜狗、UC、360等外壳)浏览器,以及Chrome(谷歌)系列、Firefox(火狐)系列、Opera系列、 Safari系列等各种浏览器的几乎所有版本。在安装了打印程序后,可以通过包含但不限于HTML、JS代码、文档等方式实现打印功能。各位可以根据自己的需求采用更为适合的方案。下面贴一下Lodop简单的支持说明:



三、接入及使用教程3.1、安装打印控件及web服务

进入到页面:http://www.lodop.net/demolist/PrintSample1.html ,点击查看本机是否安装,第一次会有一个exe执行文件,下载后点击安装即可。


LOD


3.2、代码部分

这里直接贴出来相关代码吧,

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="LodopFuncs.js"></script> <script src="CLodopfuncs.js"></script> <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0> <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0></embed> </object> </head> <body> <a href="javascript:prn_Preview()"><b>打印预览</b></a> </body> <script type="text/javascript"> var LODOP; //声明为全局变量 function prn_Preview() { LODOP=getLodop(); for(let i=1;i<5;i++){ LODOP.PRINT_INITA(0,0,800,1600,"BH"); LODOP.SET_PRINT_PAGESIZE(1,100.50,"A4"); LODOP.ADD_PRINT_TEXT(20,10,500,25,"唛头:TA123455"); LODOP.SET_PRINT_STYLEA(1,"FontName","Swis721 BlkCn BT"); LODOP.SET_PRINT_STYLEA(1,"FontSize",18); LODOP.SET_PRINT_STYLE("FontSize",18) LODOP.ADD_PRINT_TEXT(20,330,500,25,"1件"); LODOP.SET_PRINT_STYLE("FontSize",13) LODOP.ADD_PRINT_TEXT(53,10,500,20,"品名:中国东莞广东 2021-08-20 14:27:52"); LODOP.SET_PRINT_STYLE("FontSize",13) LODOP.ADD_PRINT_TEXT(80,10,500,20,"参数:TA1,31KG,999CBM 业务员:黄X玲"); LODOP.ADD_PRINT_BARCODE(120,20,350,64,"128C","1234567890"); LODOP.SET_PRINT_STYLEA(0,"GroundColor","#0080FF"); LODOP.PRINT(); } }; </script> </html>


四、后记

部分js,可以在Lodop官网,通过F12中的Network中获取,另外,文字样式的调整可以根据文字大小和字体样式进行配置。

PS:关于前端的部分,可能后面更多以使用为主,暂不会做过多深入的剖析,虽如此,仍欢迎一起探讨交流!

更多精彩,请持续关注:guangmuhua.com

LOD

您可以还会对下面的文章感兴趣

使用微信扫描二维码后

点击右上角发送给好友