前端使用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));
        }
    }

打印設置完成！接下來打印試試！