JavaScript中使用Lodop打印

简介: 我们在项目中,会需要用到连接打印机进行打印订单数据信息等,本次我使用的是 Lodop 进行打印
  • 我们会用到 Lodop 的依赖文件

1、安装软件

CLodop_Setup_for_Win32NT.exe

2、32版本的运行文件

install_lodop32.exe

3、64版本的运行文件

install_lodop64.exe

4、JS文件

LodopFuncs.js

以上文件已经放在百度网盘:

链接:https://pan.baidu.com/s/1JZkTy5iomrPw-iYcr27XWg 
提取码:vpod
  • 一、根据项目实际情况,将 LodopFuncs.js 文件中的路径修改正确

文件第62行,function getLodop(oOBJECT, oEMBED) {},方法里面的每个 href 改为你项目中正确的路径,供用户打印时下载安装

  • 二、提供打印按钮
<button class="btn_own btn_toolbar btn-purple no-border" href="#" id="btn_print" onclick="printOwn()" style="border-width: 0;">
    <i class="glyphicon glyphicon glyphicon-print blue" class="btn_icon"></i>打印
</button>
  • 三、执行打印
  • 3-1、引入 LodopFuncs.js
<!-- lodop打印 -->
<script src="<%=path%>/js/lodop/LodopFuncs.js"></script>
  • 3-2、定义打印对象
var lodopObj;
  • 3-3、加载打印设备
// 加载打印插件
function initPrint() {
    var flag = true;
    if(null == lodopObj ) {
        flag = false;
        var loading = layer.msg('正在初始化打印机...', {
            icon: 16,
            shade: [0.1,'#000'],
            time:200000
        });
        // 防止LODOP 对象加载未完成
        setTimeout(function (args) {
            // 获取LODOP
            lodopObj = getLodop();
            layer.close(loading);
            if((!lodopObj) || (!lodopObj.VERSION)){
                // Lodop插件未安装时
                // layer.closeAll();
            }else {
                layer.msg('打印机加载完成,请等待打印', {icon: 1, time: 2000});
                printOwn();
            }
        }, 1000);
    }
    return flag;
}
  • 3-4、打印按钮的点击事件
function printOwn() {
    // 优先加载打印机
    if(initPrint()) {
        // 根据查询需要打印的数据
        $.ajax({
            url : '<%=path%>/distribute/listOutDistributeDtailForPrint.action',
            type : 'post',
            dataTpe : 'json',
            data : {
                "orderId" : row.outNumber
            },
            success : function (data) {
                // 执行打印
                toPrint(data, row.outNumber, row.outDate, row.busiUserName, row.storeName, row.storeInName);
            },
            error: function (data) {
                layer.msg('打印异常!');
            }
        })
    }
}
  • 3-5、执行打印
// 执行打印
function toPrint(details, orderId, busiDate, busiUserName, outStoreName, inStoreName) {
    var resHtml = '<style> table,td,th {border: 1px solid black;border-style: solid;border-collapse: collapse;}table{width:100%;font-size:14px}</style><table border="1">';
    resHtml += '<tr>';
    resHtml += '<td width="5%">序号</td>';
    resHtml += '<td width="40%">商品名称</td>';
    resHtml += '<td width="45%">序列号</td>';
    resHtml += '<td width="10%">分拨数量</td>';
    resHtml += '</tr>';
    // 数量合计
    var quantityAll = 0;
    var detail = JSON.parse(details);
    for(var i =0, len = detail.length; i < len; i++) {
        resHtml += '<tr>';
        resHtml += '<td style="text-align: center">'+(i+1)+'</td>';
        if(1 == detail[i].isDemonstrator){
            resHtml += '<td>'+detail[i].skuName+'(演示机)</td>';
        }else{
            resHtml += '<td>'+detail[i].skuName+'</td>';
        }
        resHtml += '<td>'+detail[i].serialNumber+'</td>';
        resHtml += '<td style="text-align: center">'+detail[i].quantity+'</td>';
        resHtml += '</tr>';
        quantityAll += parseInt(detail[i].quantity);
    }
    resHtml += '<tr>';
    resHtml += '<td colspan="2" style="text-align: center">合计</td>';
    resHtml += '<td></td>';
    resHtml += '<td style="text-align: center">'+quantityAll+'</td>';
    resHtml += '<td></td>';
    resHtml += '</tr>';
    resHtml += '</table>';
    // 表格上头的数据
    var rHead = '<style> .htable,td,th {border: none;border-style: solid;border-collapse: collapse;}.htable{width:100%;font-size:15px}</style>';
    rHead += '<table border="0">';
    rHead += '<tr>';
    rHead += '<td width="15%">单据编号:</td>';
    rHead += '<td width="15%">'+orderId+'</td>';
    rHead += '<td width="15%">单据日期:</td>';
    rHead += '<td width="25%">'+busiDate+'</td>';
    rHead += '<td width="15%">经手人:</td>';
    rHead += '<td width="15%">'+busiUserName+'</td>';
    rHead += '</tr>';
    rHead += '<tr>';
    rHead += '<td>调出仓库:</td>';
    rHead += '<td>'+outStoreName+'</td>';
    rHead += '<td>调入仓库:</td>';
    rHead += '<td>'+inStoreName+'</td>';
    rHead += '<td></td>';
    rHead += '<td></td>';
    rHead += '</tr>';
    rHead += '</table>';
    lodopObj.PRINT_INITA(0,0,1200,600,"");
    lodopObj.SET_PRINT_MODE("PRINT_NOCOLLATE",1);
    lodopObj.ADD_PRINT_TABLE(10,15,"197.88mm",446, rHead);
    lodopObj.ADD_PRINT_TABLE(90,15,"197.88mm",446, resHtml);
    // 执行打印预览
    lodopObj.PREVIEW();
}
  • 3-6、后端查询数据
@RequestMapping(value = "listAllocationOrderDetails")
@ResponseBody
public String listAllocationOrderDetails(String orderId) {
    List<AllocationOrderDetail> list = allocationOrderService.listAllocationOrderDetailByOrderId(orderId);
    return JSONArray.toJSONString(list);
}

四、打印预览


目录
相关文章
|
JavaScript 安全 Windows
js或jquery实现页面打印可局部打印
js或jquery实现页面打印可局部打印
230 0
|
JavaScript 前端开发
js实现浏览器的打印功能——路径打印
js实现浏览器的打印功能——路径打印
440 0
js实现浏览器的打印功能——路径打印
|
JavaScript 前端开发
JavaScript流程控制,带你打印九九乘法表
JavaScript流程控制,带你打印九九乘法表
171 0
JavaScript流程控制,带你打印九九乘法表
|
JavaScript
JS输出打印倒三角五角星
JS输出打印倒三角五角星
JS输出打印倒三角五角星
|
JavaScript 前端开发
使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
281 0
使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
|
JavaScript 前端开发
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
91 0
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
|
JavaScript 前端开发
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
177 0
如何利用JavaScript的arguments对象实现用代码打印调用栈的需求
|
JavaScript
使用JS打印九九乘法表
使用JS打印九九乘法表
205 0
使用JS打印九九乘法表
|
JavaScript
剑指Offer——打印从1到最大的n位数(JS实现)
剑指Offer——打印从1到最大的n位数(JS实现)
129 0
剑指Offer——打印从1到最大的n位数(JS实现)
|
JavaScript
剑指Offer——顺时针打印矩阵(JS实现)
剑指Offer——顺时针打印矩阵(JS实现)
280 0
剑指Offer——顺时针打印矩阵(JS实现)