HTML中使用Lodop打印

清疚 2023-06-28 08:59 38阅读 0赞

**我们在项目中，会需要用到连接打印机进行打印订单数据信息等，本次我使用的是 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 改为你项目中正确的路径，供用户打印时下载安装

*  二、提供打印按钮

*  三、执行打印
 *  3-1、引入 LodopFuncs.js

<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);
    }

*  四、打印预览  
    ![打印预览][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]

如您在阅读中发现不足，欢迎留言！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020010815561867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2,size_16,color_FFFFFF,t_70