集成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

TML是标签语言，浏览器识别网络传递的最基本的信息就是HTML标签和标签包含的内容，所有网页信息都是这种类型的，开发者用标签来标记信息内容传给浏览器，浏览器识别并解释标签要求的种颜色、样式来展示内容，这种内容一般叫超文本或富文本

无代码元件的TAG属性就是为了定义是什么样的HTML标签

默认的标签可以在需要时修改，上图中就是开发区选中一个Pane元件，下部属性中显示其为div标签对象，所以我们一般其称为显示块元件

以上示例是一个表格元件，默认的表格中行元件标签是tr
WWW规范中，表格行元件tr中必须是td元件，不能是div或其他，所以如果我们需要放一个显示块元件时，需改显示块元件的TAG为td
同理，可以查看表格中默认放的日期、数字TAG都是td

用第三方工具合成自定义的HTML内容

上例是用百度UEditor在线进行一个表格富文本生成的演示
注意生成的HTML富文本正常是有换行处理，但在输入到HTML Display富文本（也叫超文本）显示元件中时，需删除换行符号
 · 删除方式为，将富文本放入一个文本编辑查看工具中，如Notepad++
 · 用查找替换方式，查到\r\n，替换为空格，将超文本转为一行字符串
HTML富文本可以用Create From Template模板生成字符串元件来动态生成可变内容
 · 如果动态生成富文本，需将固定写入的a b ... 改为变量${a} ${b} ... 然后作为模板进行处理
自定义的HTML富文本在开发中，会常用到，作为高级技能的一部分，建议按以上方式掌握
 · 可以用以生成打印内容，Lodop打印的HTML内容可以用HTML富文本传入，参考“第三方插件接入”中“Lodop专业打印”一节内容
 · 第三方图表中的代码，也是由富文本生成并处理的，参考“第三方插件接入”中“Echarts数据可视化”一节内容

建议在线使用Ueditor等专业工具处理富文本
· 请参考：https://ueditor.baidu.com/website/onlinedemo.html

用无代码HTML富文本显示元件展示要显示的内容

拖放一个HTML富文本显示元件
拖入一个字符串常量元件，F2打开后，字符串常量值输入我们用第三方或自写的的富文本

*****

本文为TERSUS无代码开发手册文章，供参考学习使用，在有需要详细了解对应内容时细看学习，敬请关注并转发文章

参考我们手册第一个文章中的2分钟的计算器功能的拖放连线开发演示，可学会无代码开发是如何开发软件的

想学无代码软件开发的学员请先学习3小时免费教学视频，3小时内可学会开发并开发出一套管理软件系统，然后看手册及其他视频来进阶提高快速成为高级开发人员

前有web项目要用到打印机功能，来打印小票；
我在网上搜了下就是简单的js代码来实现打印机；
但我的业务不能在页面再来设计打印的功能的配置；

所以我找了个第三方的浏览器控件——Lodop

我就是使用的Lodop

首先来配置环境

先来下载Lodop的环境

Lodop综合版(Lodop6.226+CLodop3.083)

在下载的压缩文件解压缩后的CLodop_Setup_for_Win32NT.exe安装，就可以使用了。

使用

在html导入,在head或body中加入

<script language="javascript" src="LodopFuncs.js"></script>

使用的话

var LODOP=getLodop();//直接这样就得到了打印控件对象

常用的方法

PRINT_INIT(strPrintTaskName)//打印初始化
SET_PRINT_PAGESIZE(intOrient,intPageWidth,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()//打印设计

这里使用它的官方的样例

<script language="javascript" type="text/javascript"> 
 var LODOP; //声明为全局变量 
	function myPrint() {		 
		CreatePrintPage(); 
		LODOP.PRINT();		 
	}; 
	function CreatePrintPage() { 
		LODOP=getLodop(); 
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_名片"); 
		LODOP.ADD_PRINT_RECT(10,55,360,220,0,1); 
		LODOP.SET_PRINT_STYLE("FontSize",11); 
		LODOP.ADD_PRINT_TEXT(20,180,100,25,"郭德强"); 
		LODOP.SET_PRINT_STYLEA(2,"FontName","隶书"); 
		LODOP.SET_PRINT_STYLEA(2,"FontSize",15);		 
		LODOP.ADD_PRINT_TEXT(53,187,75,20,"科学家"); 
		LODOP.ADD_PRINT_TEXT(100,131,272,20,"地址：中国北京社会科学院附近东大街西胡同"); 
		LODOP.ADD_PRINT_TEXT(138,132,166,20,"电话：010-88811888");	 
	}; 
</script>

预览效果：

打印预览

上面的方法其实还是有点抽象的

Lodop也提供了直接打印html的方法

//直接将idName的内容打印出来
var strHtml = document.getElementById("idName").innerHTML
LODOP.ADD_PRINT_HTM(10,55,"100%","100%",strHtml);

我是用的这个来打印小票；

我写的小票的样式

更多详细内容，请看官方文档

http://www.lodop.net/LodopDemo.html

在线咨询

上一篇：镂空广告，一行CSS实现滚动时藏在信息流后面的广告效果
下一篇：陈英、钱伯彦：职业教育，德国的经验是及早分流

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商