前端使用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页面调用该打印方法,并传输动态值。

点击按钮:

<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://www.cnblogs.com/yangyuke1994/p/9890538.html