先前梳理了后台打印导出参考：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. MSIL实用指南-生成for语句

    for语句格式是这样的for(<初始化语句>;<条件语句>;<自增减语句>) <循环体> 它可以转换为while语句 if(<条件语句>){ ...

  2. 如何理解JS中this指向的问题

    首先,用一句话解释this,就是:指向执行当前函数的对象. 当前执行,理解一下,也就是说this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定.this到底指向谁?this的最终指向的 ...

  3. Markdown实用技巧整理

    标题 段落 列表 引用 代码块 链接 图片 一.标题 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 二.段落 1.换行: 2.加粗: 3.分割线: 4.删除线: deprecated 5 ...

  4. HTML（七）CSS

    一个实例 <!DOCTYPE html> 菜鸟教程(runoob.com) body { background-color:#d0e4fe; } h1 { color:orange; te ...

  5. P1640 [SCOI2010]连续攻击游戏 二分图构造

    https://www.luogu.org/problemnew/show/P1640 题意 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10 ...

  6. 牛客第五场 G max 思维

    链接:https://www.nowcoder.com/acm/contest/143/G来源:牛客网 Give two positive integer c, n. You need to find ...

  7. CF940A Points on the line 思维

    A. Points on the line time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. 【Redis】SpringBoot+Redis+Ehcache实现二级缓存

    一.概述 1.1 一些疑惑? 1.2 场景 1.3 一级缓存.两级缓存的产生 1.4 流程分析 二.项目搭建 一.概述 1.1 一些疑惑? Ehcache本地内存 Redis 分布式缓存可以共享 一级 ...

  9. java中多线程执行时，为何调用的是start()方法而不是run()方法

    Thead类中start()方法和run()方法的区别 1,start()用来启动一个线程,当调用start()方法时,系统才会开启一个线程,通过Thead类中start()方法来启动的线程处于就绪状 ...

  10. SSM框架使用分页插件显示信息

    1.在该SSM工程的pom.xml中加入PageHelper的分页插件依赖(若是版本号不对,可以尝试修改一下) <!-- 分页插件 --> <dependency> <g ...