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

最新推荐文章于 2024-09-19 15:25:36 发布

weixin_30249203

最新推荐文章于 2024-09-19 15:25:36 发布

阅读量2.6k

点赞数

文章标签：前端 javascript json ViewUI

原文链接：http://www.cnblogs.com/yangyuke1994/p/9890538.html

版权

先前梳理了后台打印导出参考：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" οnclick="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