ca3534(集成Lodop打印控件实现打印教程)
一、前言
关于打印这一块我前后做了很多的尝试：Java条形码标签生成并打印示例、再记js前端打印指定内容、JsBarcode打印demo。其中涉及到后端、前端的两种实现，目前我这边项目中实现的是前端打印Html的方式实现的。
但是慢慢地就会发现，在前端及打印机的适配上配置比较复杂，每增加一台设备就要进行一次配置、修改后牵动过大，每一个参数
每次调整都会影响到全局元素，一个1毫米的误差在连续打印100张或更多时就会被无限放大...
二、Lodop
2.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执行文件，下载后点击安装即可。
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
0 留言