先前梳理了后台打印导出参考：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. ios5与ios7数字输入样式一致

    <input  name="activeCode" id="activeCode" ontouchstart="this.type='numbe ...

  2. gym/102021/K GCPC18 背包dp算不同数和的可能

    gym/102021/K 题意: 给定n(n<=60)个直线 ,长度<=1000; 可以转化为取 计算 ans = (sum  + 10 - g) / ( n + 1)  在小于5的条件下 ...

  3. Codeforces 889F Letters Removing（二分 + 线段树 || 树状数组）

    Letters Removing 题意:给你一个长度为n的字符串,然后进行m次删除操作,每次删除区间[l,r]内的某个字符,删除后并且将字符串往前补位,求删除完之后的字符串. 题解:先开80个set ...

  4. 江苏 徐州邀请赛 icpc B Array dp 滚动数组模板

    题目 题目描述 JSZKC is the captain of the lala team. There are N girls in the lala team. And their height ...

  5. Container容器crontab错误问题

    问题描述 容器中的cron定时计划任务不执行 问题分析 排查一:检查Container容器是否安装cron # rpm -qa | grep cron # ls /etc/init.d/ 若没有安装, ...

  6. Hadoop学习笔记—20.网站日志分析项目案例

    1.1 项目来源 本次要实践的数据日志来源于国内某技术学习论坛,该论坛由某培训机构主办,汇聚了众多技术学习者,每天都有人发帖.回帖,如图1所示. 图1 项目来源网站-技术学习论坛 本次实践的目的就在于 ...

  7. HIve实战分析Hadoop的日志

    1.日志格式分析首先分析 Hadoop 的日志格式, 日志是一行一条, 日志格式可以依次描述为:日期.时间.级别.相关类和提示信息.如下所示: -03-06 15:23:48,132 INFO org ...

  8. Charles 下载

    本文参考:Charles 下载 Charles 下载 当前最新的版本是v4.2.8:官网下载页面:https://www.charlesproxy.com/latest-release/downloa ...

  9. Spring Boot 面试题总结

    1.什么是spring boot 答案:springboot是用来简化spring应用的初始搭建和开发过程,使用特定的配置文件来配置,例如application.properties,简化来maven ...

  10. Java 教程 (Java 对象和类)

    Java 对象和类 Java作为一种面向对象语言.支持以下基本概念: 多态 继承 封装 抽象 类 对象 实例 方法 重载 本节我们重点研究对象和类的概念. 对象:对象是类的一个实例(对象不是找个女朋友 ...