先前梳理了后台打印导出参考：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. 命令行通过入参调用jar包

    命令行通过入参调用jar包 最近因为项目需要,需要实现一个功能,即定时执行服务器上的一个脚本去对数据库的数据进行业务处理,要操作的数据库有很多种,mysql.db2.oracle.sqlserver等 ...

  2. Python--高阶函数、函数嵌套、名称空间及变量作用域、闭包、装饰器

    1.高阶函数(map/reduce/filter) 高阶函数是指函数的参数可以是函数 这篇总结几个常用的高阶函数:map/reduce/filter map函数.reduce函数.filter函数都是 ...

  3. crontab使用方法

    一.crontab基本用法 1.1 cron服务 cron是一个linux下 的定时执行工具,可以在无需人工干预的情况下运行作业. service crond start //启动服务 service ...

  4. 【selenium】- webdriver常见元素定位（上）

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. 元素的定位 2.By.id 打开Firefox,打开百度首页,右键点击选择“使用Firebug”查看元素. 点击红框内的按钮,将鼠标指针 ...

  5. 2019牛客暑期多校训练营（第二场）J-Subarray（思维）

    >传送门< 前言 这题我前前后后看了三遍,每次都是把网上相关的博客和通过代码认真看了再思考,然并卵,最后终于第三遍也就是现在终于看懂了,其实懂了之后发现其实没有那么难,但是的的确确需要思维 ...

  6. P4570 [BJWC2011]元素 线性基 + 贪心

    题意 给定n个物品,每个物品有一个编号和价值,问如何取使得拿到的物品价值总和最大,并且取得物品的编号的子集异或和不能为0. 思路 这是个贪心,我们先按照价值从大到小排序,然后贪心地取,如果当前要取的物 ...

  7. P3084 [USACO13OPEN]照片Photo dp

    题意: 有n个区间,每个区间只能有一个斑点奶牛,问最多有几个斑点奶牛. 思路: 首先要处理出每个点的L[i],R[i]. L[i]表示L[i]-i-1之间一定有一个点.i也是选中的. R[i]表示R[ ...

  8. ACM-ICPC 2017 Asia Urumqi：A. Coins（DP） 组合数学

    Alice and Bob are playing a simple game. They line up a row of nn identical coins, all with the head ...

  9. 《Hive编程指南》读书笔记 | 一文看懂Hive的数据类型和文件格式

    Hive支持关系型数据库中的大多数基本数据类型,同时也支持关系型数据库中很少出现的3种集合数据类型. 和大多数数据库相比,Hive具有一个独特的功能,那就是其对于数据在文件中的编码方式具有非常大的灵活 ...

  10. .gitignore文件失效的解决方案

    通常在idea中,我们使用git进行项目管理的时候,一些不需要的文件如.idea,.target文件不需要上传至gitlab仓库,这时,就需要在项目中定义一个.gitignore文件,用来标识这些文件 ...