集成Lodop打印控件实现打印教程

大家好，欢迎来到IT知识分享网。

一、前言

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

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

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

二、Lodop

2.1、寻求更优解决方案

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

2.2、简单介绍

这是一款打印插件，目前支持IE系列、IE内核系列(、搜狗、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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/94361.html