前端使用lodop插件进行打印设置

前端使用lodop插件进行打印设置,第1张

前端使用lodop插件进行打印设置

先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面。


本章使用Lodop插件进行打印设置,实现打印机设置功能。


效果展示:

点击打印之后,d出【打印预览】效果,一旦连接到打印机,即可打印。


具体实现:

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 = ;
var lineMoveDown = ;
var rowHeight = ;
var lineHeight = ;
var x = ;
var y = ;
var list = ; //纸张大小
LODOP.PRINT_INITA(,,,,""); //单名称
LODOP.ADD_PRINT_TEXT(,,,,"测试一张入库单");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",); //商户标签
LODOP.ADD_PRINT_TEXT(,,,,"入库客户:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
//--动态值
LODOP.ADD_PRINT_TEXT(,,,,data.merchantName);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_TEXT(,,,,"入库日期:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(,,,,data.entryDate);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_TEXT(,,,,"车牌号:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(,,,,data.carNumber);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_TEXT(,,,,"卸车温度:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(,,,,data.carTemperature);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_TEXT(,,,,"始发地:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(,,,,data.bgnLocation);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_TEXT(,,,,"目的地:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(,,,,data.endLocation);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); //产品表头
LODOP.ADD_PRINT_TEXT(,,,,"序号");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"产品名称");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"产品规格");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"件数");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"总重量");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"入库货位号");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",);
LODOP.ADD_PRINT_TEXT(,,,,"备注");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.SET_PRINT_STYLEA(,"Bold",); //产品值 --> 横向
if (data.esiList.length > ) {
list = data.esiList.length;
for (var i = ; i < list; i++) {
var item = data.esiList[i];
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,(i + ));
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.name);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.specs);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.goodsCount);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.goodsWeight);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.stockCode);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * i),,,,item.remark);
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * i),,,,,);
} //合计行,判断是否显示
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),,,,"合计:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),,,,"");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",);
LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),,,,"");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),,,,,);
LODOP.ADD_PRINT_RECT(x+lineMoveDown+(lineHeight * list),,,,,); list = list + ;
} LODOP.ADD_PRINT_TEXT(x+rowMoveDown+(rowHeight * list),,,,"入库确认签字:");
LODOP.SET_PRINT_STYLEA(,"FontSize",);
LODOP.SET_PRINT_STYLEA(,"Alignment",); //外框
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,); LODOP.ADD_PRINT_RECT(,,,,,); LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,); LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,); LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,); LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,);
LODOP.ADD_PRINT_RECT(,,,,,); LODOP.PRINT_DESIGN();
//LODOP.PREVIEW();
//LODOP.PRINT();
};

9.在jsp页面调用该打印方法,并传输动态值。


点击按钮:

<input type="button" class="layui-btn" onclick="javascript:print();" value="打印" />

引入js:

<script type="text/javascript" src="js/lodop/LodopFuncs.js"></script>
<script type="text/javascript" src="js/lodop/LodopPrint.js"></script>

执行方法:

function print() {
var data = $("#data").val();//获取后台传输过来的data值(此处不罗列后台代码)
if (data) {
PrintEntryOrder(JSON.parse(data));
}
}

打印设置完成!接下来打印试试!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/586519.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存