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

    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插件进行打印设置的更多相关文章

前端使用lodop如何获取打印状态
前面已经说过,如何简单使用lodop了,今天说一下如何获得lodop的打印状态? 在教程里面找了半天,摸索出来了一套. template:  <div> ...
LODOP插件的IE浏览器的安全设置
LodopFuncs.js里的判断默认是混合部署,IE等支持np插件的浏览器会走lodop插件方式,但是IE的安全设置可能会阻挡lodop插件,可点击允许或修改IE浏览器的安全设置让Lodop每次都能 ...
LODOP不同电脑打印效果不同排查
1.位置不同,偏移问题.详细的相关偏移问题的博文:LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文:Lodop打印控件传入css样式.看是否传入正确样式 ...
openerp模块收藏基于Lodop的报表打印模块（转载）
基于Lodop的报表打印模块原文:http://shine-it.net/index.php/topic,7397.0.html 前段时间写了个小模块,来解决OE中报表打印不方便的问题.借鉴了 @b ...
WordPress 前端投稿/编辑插件 DJD Site Post（支持游客和已注册用户）
转自:http://www.wpdaxue.com/front-end-publishing.html 说到前端用户投稿,倡萌之前推荐过3个不错的插件: WordPress匿名投稿插件:DX-Cont ...
CDN公共库、前端开发常用插件一览表(VendorPluginLib)
=======================================================================================前端CDN公共库===== ...
JS前端图形化插件之利器Gojs组件（php中文网）
JS前端图形化插件之利器Gojs组件(php中文网) 一.总结一句话总结:php中文网我可以好好走一波二.JS前端图形化插件之利器Gojs组件参考: JS前端图形化插件之利器Gojs组件-js教 ...
ArcGIS地图打印设置
1.需求:客户自己开发的Engine程序,调用的是LayoutControl,需要连接大型绘图仪进行出图. 业务流程是先框选要打印的地图范围,该范围是自定义大小,框选完成之后进行预览,然后选择打印输出 ...
[BS-06] 设置release发布时NSLog不打印设置
设置release发布时NSLog不打印设置前提:在XCode做开发调试时往往需要打印一些调试信息做debug用,大家知道当打印信息的地方多了之后在模拟器上跑可能不会有什么问题,因为模拟器用的是电脑 ...

随机推荐

leetcode8 String to Integer
题目描述 Implement atoi which converts a string to an integer. The function first discards as many white ...
ParquetDecodingException: Can not read value at 0 in block -1 in file hdfs:...
: jdbc:hive2://master01.hadoop.dtmobile.cn:1> select * from cell_random_grid_tmp2 limit 1; INFO : ...
BS/CS 区别
转载自:https://www.cnblogs.com/chenmingjun 一.CS和BS含义: CS即Client/Server(客户机/服务器)结构.C/S结构在技术上很成熟,它的主要特点是交 ...
POJ 1002 487-3279 map
487-3279 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 287874 Accepted: 51669 Descr ...
Codeforces Round #479 (Div. 3) B. Two-gram
原题代码:http://codeforces.com/contest/977/problem/B 题解:有n个字符组成的字符串,输出出现次数两个字符组合.例如第二组样例ZZ出现了两次. 方法:比较无脑 ...
MicroPython TPYBoard v102 无线红外遥控舵机(基于红外解/编码模块)
转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇红外解码/编码模块介绍模块上搭载了红外接收头.红外 ...
爬虫基本知识之C/S交互
概念爬虫就是对网页的获取. 一般获取的网页中又有通向其他网页的通路,我们叫做超链接,那么就可以通过这样的通路获取更多其他的网页,就像一只在网路上爬行的蜘蛛,所以俗称爬虫. 爬虫的工作原理和浏览器浏览 ...
聚焦Python分布式爬虫必学框架Scrapy 打造搜索引擎视频教程
下载链接:https://www.yinxiangit.com/595.html 目录: 第1章课程介绍介绍课程目标.通过课程能学习到的内容.和系统开发前需要具备的知识第2章 windows下搭建 ...
Python Flask打造一个视频网站实战视频教程
下载链接:https://www.yinxiangit.com/607.html 目录: 本套课程从零基础讲解flask开发网站.涉及到的知识点包括:Python和pycharm的安装.urls和视图 ...
jquery ajax到servlet出现中文乱码（utf-8编码下）
个人遇到的该问题有两大类: 第一类很普遍,就是jsp页面编码没有规定,servlet中接收参数没有转码,response没有使用setContentType()和setCharacterEncodin ...

前端使用lodop插件进行打印设置

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

随机推荐

热门专题