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

    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));

        }

    }

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

前端使用lodop插件进行打印设置的更多相关文章

  1. 前端使用lodop如何获取打印状态

    前面已经说过,如何简单使用lodop了,今天说一下如何获得lodop的打印状态? 在教程里面找了半天,摸索出来了一套. template: <!-- 实验代码 --> <div> ...

  2. LODOP插件的IE浏览器的安全设置

    LodopFuncs.js里的判断默认是混合部署,IE等支持np插件的浏览器会走lodop插件方式,但是IE的安全设置可能会阻挡lodop插件,可点击允许或修改IE浏览器的安全设置让Lodop每次都能 ...

  3. LODOP不同电脑打印效果不同排查

    1.位置不同,偏移问题.详细的相关偏移问题的博文:LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文:Lodop打印控件传入css样式.看是否传入正确样式 ...

  4. openerp模块收藏 基于Lodop的报表打印模块（转载）

    基于Lodop的报表打印模块 原文:http://shine-it.net/index.php/topic,7397.0.html 前段时间写了个小模块,来解决OE中报表打印不方便的问题.借鉴了 @b ...

  5. WordPress 前端投稿/编辑插件 DJD Site Post（支持游客和已注册用户）

    转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...

  6. CDN公共库、前端开发常用插件一览表(VendorPluginLib)

    =======================================================================================前端CDN公共库===== ...

  7. JS前端图形化插件之利器Gojs组件（php中文网）

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  8. ArcGIS地图打印设置

    1.需求:客户自己开发的Engine程序,调用的是LayoutControl,需要连接大型绘图仪进行出图. 业务流程是先框选要打印的地图范围,该范围是自定义大小,框选完成之后进行预览,然后选择打印输出 ...

  9. [BS-06] 设置release发布时NSLog不打印设置

    设置release发布时NSLog不打印设置 前提:在XCode做开发调试时往往需要打印一些调试信息做debug用,大家知道当打印信息的地方多了之后在模拟器上跑可能不会有什么问题,因为模拟器用的是电脑 ...

随机推荐

  1. 带你入门SpringCloud服务发现 | Eurka搭建和使用

    前言 服务注册与发现是微服务中最为基础的环节,而 Eureka 就是一个可以帮助你实现服务注册与发现的选择之一.如果你对 Eureka 和服务发现了解甚少,那么该篇博客将会帮助到你.文中通过具体操作带 ...

  2. 漫话：如何给女朋友解释什么是"锟斤拷"？

    漫话:如何给女朋友解释什么是"锟斤拷"? ​ 周末女朋友出去逛街了,我自己一个人在家看综艺节目,突然,女朋友给我打来电话. 过了一会,女朋友回来了,她拿出手机,给我看了她在超市拍的 ...

  3. 新手学习FFmpeg - 调用API完成录屏并进行H.264编码

    Screen Record H.264 目前在网络传输视频/音频流都一般会采用H.264进行编码,所以尝试调用FFMPEG API完成Mac录屏功能,同时编码为H.264格式. 在上一篇文章中,通过调 ...

  4. Java8 日期 API 业务使用

    最近在做账单结算业务,需要根据客户选择的结算方式来推算下一次结算日期以及该次结算日期段. 推算日期这样的业务直男君以前就写过,只不过使用的是熟悉的 java.util.date 和 java.util ...

  5. HDU - 2121 Ice_cream’s world II 无根最小树形图

    HDU - 2121 :http://acm.hdu.edu.cn/showproblem.php?pid=2121 比较好的朱刘算法blog:https://blog.csdn.net/txl199 ...

  6. POJ 3268 Silver Cow Party 单向最短路

    Silver Cow Party Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 22864   Accepted: 1044 ...

  7. odoo12从零开始：三、1）创建你的第一个应用模型(module)

    前言 以前,我一直都不知道为什么好多框架的入门都是“hello world”开始,当我思前想后我要如何介绍odoo的model.record.template等继承等高级特性时,发现在那之前便需要清楚 ...

  8. 下一个排列（Leetcode31）解读

    本题代码来自Leetcode官方,个人对其理解后,生成自己的注解,以便更好的让读者理解.如有侵权,立即删除! public class Main31 { public static void main ...

  9. [0]尝试用Unity3d制作一个王者荣耀(持续更新)->游戏规划

    太得闲了于是想写个农药,虽然可能会失败但是还是要试一试. 因为是自学的不是Unity专业的可能表达语言会有些不标准!望见谅! 结构: 以组件式(比如说摇杆控制和玩家部分的编写是分离的,可以自由拼装)作 ...

  10. 高级部分_委托、Lambda表达式、事件

    委托 (1)把方法当作参数来传递的话,就要用到委托: (2)委托是一个类型,这个类型可以赋值一个方法的引用. C#使用一个类分为两个阶段,首先定义这个类,告诉编译器这个类由什么字段和方法组成:然后使用 ...