| 前端使用lodop插件进行打印设置 | 您所在的位置：网站首页 › 前端调打印机怎么调出来 › 前端使用lodop插件进行打印设置 |
前端使用lodop插件进行打印设置
|
先前梳理了后台打印导出参考：https://www.cnblogs.com/yyk1226/p/9856032.html，但是没有显示出来打印预览页面。 本章使用Lodop插件进行打印设置，实现打印机设置功能。 效果展示： 点击打印之后，弹出【打印预览】效果，一旦连接到打印机，即可打印。
具体实现： 1.下载相关插件 百度网盘下载地址：链接：https://pan.baidu.com/s/1WZsi6TPGjFj7PbAGW4ertg 密码：s375 解压之后：
2.安装lodop 方式一：双击对应.exe可执行应用程序进行安装； 方式二：接下来讲到的，在jsp页面上提醒选择安装，因为有时候开发的东西是让客户使用的，不可能每次都得跟客户通知要安装哪些插件或者应用程序。 3.将解压后的文件放置在项目中，如图。
4.修改LodopFuncs.js中相关路径。
5.修改LodopFuncs.js中注册信息的账号与密码。
6.设计将打印的表格模板。（设计模板学习可以参考网上教程也可以自己摸索，上手很快） lodop设计url地址：http://test.kerunsoft.cn/lodop_print/ 7.设计完选择【生成程序代码】，进行复制。
8.将代码块粘贴到LodopPrint.js文件中，如下所示。 function PrintEntryOrder(data) { CreateEntryPrintPage(data); } function CreateEntryPrintPage(data) { var LODOP = getLodop(); var rowMoveDown = 186; var lineMoveDown = 176; var rowHeight = 30; var lineHeight = 30; var x = 0; var y = 0; var list = 0; //纸张大小 LODOP.PRINT_INITA(2,0,1000,600,""); //单名称 LODOP.ADD_PRINT_TEXT(20,45,820,35,"测试一张入库单"); LODOP.SET_PRINT_STYLEA(0,"FontSize",16); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); //商户标签 LODOP.ADD_PRINT_TEXT(58,45,120,20,"入库客户："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); //--动态值 LODOP.ADD_PRINT_TEXT(59,164,250,20,data.merchantName); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(58,413,150,20,"入库日期："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(58,562,303,20,data.entryDate); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(91,45,120,20,"车牌号："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(91,164,250,20,data.carNumber); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(91,413,150,20,"卸车温度："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(91,562,303,20,data.carTemperature); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(126,45,120,20,"始发地："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(126,164,250,20,data.bgnLocation); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(126,413,150,20,"目的地："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(126,562,303,20,data.endLocation); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); //产品表头 LODOP.ADD_PRINT_TEXT(156,45,120,20,"序号"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,164,130,20,"产品名称"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,293,121,20,"产品规格"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,413,70,20,"件数"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,482,81,20,"总重量"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,562,120,20,"入库货位号"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); LODOP.ADD_PRINT_TEXT(156,681,184,20,"备注"); LODOP.SET_PRINT_STYLEA(0,"FontSize",11); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.SET_PRINT_STYLEA(0,"Bold",1); //产品值 --> 横向 if (data.esiList.length > 0) { list = data.esiList.length; for (var i = 0; i < list; i++) { var item = data.esiList[i]; LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),45,120,20,(i + 1)); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),164,130,20,item.name); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),293,120,20,item.specs); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),413,70,20,item.goodsCount); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),482,81,20,item.goodsWeight); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),562,120,20,item.stockCode); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),681,184,20,item.remark); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),45,120,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),164,130,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),293,121,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),413,70,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),482,81,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),562,120,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),681,184,30,0,1); } //合计行，判断是否显示 LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),45,369,20,"合计："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),413,70,20,"1000"); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),482,81,20,"10000"); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),45,369,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),413,70,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),482,81,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),562,120,30,0,1); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),681,184,30,0,1); list = list + 1; } LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),563,120,20,"入库确认签字："); LODOP.SET_PRINT_STYLEA(0,"FontSize",10); LODOP.SET_PRINT_STYLEA(0,"Alignment",2); //外框 LODOP.ADD_PRINT_RECT(0,0,911,352,0,1); LODOP.ADD_PRINT_RECT(0,45,820,322,0,1); LODOP.ADD_PRINT_RECT(10,45,820,1,0,2); LODOP.ADD_PRINT_RECT(45,45,820,1,0,1); LODOP.ADD_PRINT_RECT(45,45,120,35,0,1); LODOP.ADD_PRINT_RECT(45,164,250,35,0,1); LODOP.ADD_PRINT_RECT(45,413,150,35,0,1); LODOP.ADD_PRINT_RECT(45,562,303,35,0,1); LODOP.ADD_PRINT_RECT(79,45,120,35,0,1); LODOP.ADD_PRINT_RECT(79,164,250,35,0,1); LODOP.ADD_PRINT_RECT(79,413,150,35,0,1); LODOP.ADD_PRINT_RECT(79,562,303,35,0,1); LODOP.ADD_PRINT_RECT(113,45,120,35,0,1); LODOP.ADD_PRINT_RECT(113,164,250,35,0,1); LODOP.ADD_PRINT_RECT(113,413,150,35,0,1); LODOP.ADD_PRINT_RECT(113,562,303,35,0,1); LODOP.ADD_PRINT_RECT(147,45,120,30,0,1); LODOP.ADD_PRINT_RECT(147,164,130,30,0,1); LODOP.ADD_PRINT_RECT(147,293,121,30,0,1); LODOP.ADD_PRINT_RECT(147,413,70,30,0,1); LODOP.ADD_PRINT_RECT(147,482,81,30,0,1); LODOP.ADD_PRINT_RECT(147,562,120,30,0,1); LODOP.ADD_PRINT_RECT(147,681,184,30,0,1); LODOP.PRINT_DESIGN(); //LODOP.PREVIEW(); //LODOP.PRINT(); };9.在jsp页面调用该打印方法，并传输动态值。 点击按钮： 引入js： 执行方法： function print() { var data = $("#data").val();//获取后台传输过来的data值（此处不罗列后台代码） if (data) { PrintEntryOrder(JSON.parse(data)); } }打印设置完成！接下来打印试试！ |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |