Lodop打印图片（工作记录）

最新推荐文章于 2025-06-15 21:27:35 发布

叩叮ING

最新推荐文章于 2025-06-15 21:27:35 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： html5 前端

本文链接：https://blog.youkuaiyun.com/weixin_43966996/article/details/124351460

该博客展示了如何利用LodopFuncs.js工具包进行图片打印，包括直接打印图片、在图片上添加文字以及多页图片打印。通过JavaScript代码实例，详细解释了每个功能的实现步骤，适用于网页打印需求的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：Lodop打印图片，并在图片上添加文字。

工具包：LodopFuncs.js（度娘下载获取）

直接上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/LodopFuncs.js" ></script>
	</head>
	<body>
		<input type="button" onclick="printimg()" name="打印" value="图片打印"/>
		<input type="button" onclick="printimg2()" name="打印" value="带文字打印"/>
		<input type="button" onclick="printimg3()" name="打印" value="打印多页图片"/>
	</body>
</html>
<script type="text/javascript">

	 var LODOP; //声明为全局变量
	function printimg(){
        LODOP=getLodop(); 
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印图片1");
		//四个数值分别表示Top,Left,Width,Height
		LODOP.ADD_PRINT_IMAGE(0,0,800,1500,"<img border='0' src='111.jpg' width='100%' />"); 
		LODOP.SET_PRINT_STYLEA(0,"Stretch",2);
		LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");
		LODOP.PREVIEW();
	}
	
	function printimg2(){
		 LODOP=getLodop(); 
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印图片1");
		//四个数值分别表示Top,Left,Width,Height
		LODOP.ADD_PRINT_IMAGE(0,0,800,1500,"<img border='0' src='img/aaa.jpg' width='100%' />"); 
		//图片上面的文字 //四个数值分别表示Top,Left,Width,Height
		//LODOP.ADD_PRINT_TEXT(1000,500,200,20,"打印时间：2022-04-22");
		LODOP.ADD_PRINT_TEXT(10,10,400,40,"打印时间：2022-04-22");
		LODOP.SET_PRINT_STYLEA(0,"FontSize",15); //设置字体大小
		LODOP.SET_PRINT_STYLEA(0,"FontName","华文行楷"); //设置字体大小
		LODOP.SET_PRINT_STYLEA(0,"FontColor","#FC1603"); //设置字体颜色
		LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//2表示图片不拉伸 以原图比例缩放
		LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");//A4打印
		//LODOP.SET_PRINT_STYLEA(0,"TransColor","#FFFFFF"); //设置图片浮于上方样式
		LODOP.PREVIEW();
	}
	function printimg3(){
		LODOP=getLodop(); 
		LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_打印图片1");
		//四个数值分别表示Top,Left,Width,Height
		for(var i=0;i<2;i++){
			LODOP.NewPage();
			if(i==1){
				LODOP.ADD_PRINT_IMAGE(0,0,750,1500,"<img border='0' src='img/aaa.jpg' width='100%' />"); 
			}else{
				LODOP.ADD_PRINT_IMAGE(0,0,700,1500,"<img border='0' src='img/222.jpg' width='100%' />"); 
			}
			LODOP.ADD_PRINT_TEXTA("texttime",10,10,400,40,"打印时间：2022-04-22");
			LODOP.SET_PRINT_STYLEA(0,"FontSize",16); //设置字体大小
			LODOP.SET_PRINT_STYLEA(0,"FontName","华文行楷"); //设置字体大小
			LODOP.SET_PRINT_STYLEA(0,"FontColor","#FC1603"); //设置字体颜色
			LODOP.SET_PRINT_STYLEA(0,"Stretch",2);//2表示图片不拉伸 以原图比例缩放
			LODOP.SET_PRINT_PAGESIZE(1, 0, 0, "A4");//A4打印
		}	
		LODOP.SET_PREVIEW_WINDOW(0,0,0,0,0,"");	
		LODOP.PREVIEW();
	}
</script>

页面分别实现直接打印图片、打印图片带文字、多页图片打印；可根据实际情况进行调整