lodop实现打印的功能(下)

最新推荐文章于 2024-02-26 11:52:45 发布
最新推荐文章于 2024-02-26 11:52:45 发布
阅读量1w 收藏 7
点赞数
分类专栏： javaweb 开发工具 文章标签： lodop clodop 打印
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YoungLee16/article/details/79091970
版权

下文都是重点,先码代码,再讲原因:

jsp页面引入lodopfuncs.js文件

    <%--添加打印lodop.js--%>
    <script src="${ctxPath }/resources/js/clodop/LodopFuncs.js"></script>
注意:这个目录就是我们项目中的地址,引用要能找到.


给出一个事件触发打印事件,这个只是相当于处理数据逻辑,真正的打印执行在print方法中,createPage是拼接页面打印效果.

此时,因为我们项目中使用的是一个事件同时执行两个打印任务.所以我们把不同的打印任务所需的打印机型号(或者返回序号index放入了localstorage中),此时获取到localstorage中的打印机序号

    var LODOP;
    var storage=window.localStorage;

    function rePrintOrder(orderId) {
    
        var row = $(".easyui-datagrid").datagrid("getSelected");
        if(row==null){
            alert("请选中您要打印的订单信息");
            return;
        }
        var username=row.userName;
        var paymentType=row.paymentType.value;
        var money=row.paymentPrice;
        var details=[];
        /*ajax根据orderId获取到所有的商品结果集*/
        var url='${ctxPath}/order/orderDetailList.html';
        $.ajax({
            url: url,
            data: {id: orderId},
            success: function (rsData) {
                if (rsData.message.code != "0") {
                    syscore.alert('提示', rsData.message.mess, 'error');
                    return;
                }
               var goodsList=rsData.result.data;
                console.log(goodsList);
                for(var i=0;i<goodsList.length;i++){
                    details.push(goodsList[i]);
                }
                CreatePrintPage3(username,paymentType,money,details);
                LODOP.PRINT();
            }
        });
    }

创建拼接打印页面: 

 function CreatePrintPage3(username,paymentType,money,details) {
        console.log(details);

        var opTimeFmt = syscore.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss');
        LODOP=getLodop();

        LODOP.PRINT_INIT("订单信息打印");

        //设置pos纸打印机 5830  选择打印机5830

        LODOP.SET_PRINTER_INDEX(storage.getItem("orderPrint"));

        // 设置基本样式
        LODOP.SET_PRINT_STYLE("FontSize",10);
        // 离纸张顶端5px、距左边5px、宽190px、高10px
        LODOP.ADD_PRINT_TEXT(10, 10, 360, 20, "******* 牛牛的店 *******");
        //添加打印内容
        LODOP.ADD_PRINT_TEXT(30,10,360,20,"收款员: "+username);
        LODOP.ADD_PRINT_TEXT(50,10,360,20,"时间:"+opTimeFmt);
        LODOP.ADD_PRINT_TEXT(70,10,360,20,"商品名称       "+" 数量  "+"价格");
        var height=70;
        //页面美观,商品名称大于9位的取9位
        for(var i=0;i<details.length;i++){
            height+=20;
            var goodsName=details[i].goodsName;
            if(goodsName.length<9){
                LODOP.ADD_PRINT_TEXT(height,10,360,20,goodsName+"  "+details[i].amount+"    "+details[i].salePrice);
            }else{
                goodsName=goodsName.substring(0,8);
                LODOP.ADD_PRINT_TEXT(height,10,360,20,goodsName+"  "+details[i].amount+"    "+details[i].salePrice);
            }
        }
        height+=20;
        LODOP.ADD_PRINT_TEXT(height,10,360,20,"支付方式:  ");
        height+=20;
        if(paymentType=="银行卡"){
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"银行卡:"+money);
        }else{
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"银行卡:  0.00");
        }
        height+=20;
        if(paymentType=="现金"){
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"现金:"+money);
        }else{
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"现金:  0.00");
        }
        height+=20;
        if(paymentType=="一卡通"){
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"一卡通:"+money);
        }else{
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"一卡通:  0.00");
        }
        height+=20;
        if(paymentType=="银行卡"){
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"第三方支付:"+money);
        }else{
            LODOP.ADD_PRINT_TEXT(height,10,360,20,"第三方支付:  0.00");
        }

        LODOP.ADD_PRINT_TEXT(height+20,10,360,20,"===========结束==========");

        // 如果要把水印往下一点，则取消下面这一行的注释
        //LODOP.ADD_PRINT_TEXT(125, 5, 360, 20, "");
        LODOP.ADD_PRINT_BARCODE(5, 280, 100, 100);
        LODOP.SET_PRINT_PAGESIZE(1, 1000, 150, 20);
    };



注意:print_init一定要在set属性的最上面,相当于初始化一个打印任务.set_print_index(index);方法是获取到本机中指定打印序号index的打印机.


下面就是我们看一下,获取到指定打印机的序号:

    /*=======================设置标签打印机 开始==========================*/
    function SelectAsDefaultPrinter4tag() {
        LODOP = getLodop();
        if (LODOP.CVERSION) {
            LODOP.On_Return = function (TaskID, Value) {
                if (Value >= 0) {
                    //将选择的tag打印机序号存入cookie中
                    if (Value >= 0) {
                        //将选择的tag打印机序号存入cookie中
                        if (!window.localStorage) {
                            syscore.alert('提示','该浏览器不支持localstorage','info');
                            return false;
                        } else {
                            storage.setItem("tagPrint", Value);
                            console.log(storage.getItem("tagPrint"));
                        }
                        syscore.alert('提示','选择成功','info');
                    } else {
                        syscore.alert('提示','选择失败','info');
                    }
                }
                ;
                LODOP.SELECT_PRINTER();
                return;
            };
            if (LODOP.SELECT_PRINTER() >= 0)
                syscore.alert('提示','选择成功','info'); else syscore.alert('提示','选择失败','info');
        }
        ;
    }
    /*=======================设置标签打印机 结束==========================*/

设置默认打印机,会在页面有一个弹窗,我们选择打印机后,会返回该打印机在本地的打印序号.



这样我们的localstorage就记录住了,以后就不需要再选择打印机了.


画重点:

看lodopfuncs.js中的内容:

var CreatedOKLodop7766=null;

//====判断是否需要安装CLodop云打印服务器:====
function needCLodop(){
    try{
        var ua=navigator.userAgent;
        if (ua.match(/Windows\sPhone/i) !=null) return true;
        if (ua.match(/iPhone|iPod/i) != null) return true;
        if (ua.match(/Android/i) != null) return true;
        if (ua.match(/Edge\D?\d+/i) != null) return true;

        var verTrident=ua.match(/Trident\D?\d+/i);
        var verIE=ua.match(/MSIE\D?\d+/i);
        var verOPR=ua.match(/OPR\D?\d+/i);
        var verFF=ua.match(/Firefox\D?\d+/i);
        var x64=ua.match(/x64/i);
        if ((verTrident==null)&&(verIE==null)&&(x64!==null))
            return true; else
        if ( verFF !== null) {
            verFF = verFF[0].match(/\d+/);
            if ((verFF[0]>= 41)||(x64!==null)) return true;
        } else
        if ( verOPR !== null) {
            verOPR = verOPR[0].match(/\d+/);
            if ( verOPR[0] >= 32 ) return true;
        } else
        if ((verTrident==null)&&(verIE==null)) {
            var verChrome=ua.match(/Chrome\D?\d+/i);
            if ( verChrome !== null ) {
                verChrome = verChrome[0].match(/\d+/);
                if (verChrome[0]>=41) return true;
            };
        };
        return false;
    } catch(err) {return true;};
};

//====页面引用CLodop云打印必须的JS文件：====
if (needCLodop()) {
    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    var oscript = document.createElement("script");
    oscript.src ="http://localhost:8000/CLodopfuncs.js?priority=1";
    head.insertBefore( oscript,head.firstChild );

    //引用双端口(8000和18000）避免其中某个被占用：
    oscript = document.createElement("script");
    oscript.src ="http://localhost:18000/CLodopfuncs.js?priority=0";
    head.insertBefore( oscript,head.firstChild );
};

//====获取LODOP对象的主过程：====
function getLodop(oOBJECT,oEMBED){
    // 取系统上下文
    var curWwwPath=window.document.location.href;
    var pathName=window.document.location.pathname;
    var pos=curWwwPath.indexOf(pathName);
    var localhostPath=curWwwPath.substring(0,pos);

    var strHtmInstall="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtmUpdate="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtm64_Install="<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtm64_Update="<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/install_lodop64.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtmFireFox="<br><br><font color='#FF00FF'>（注意：如曾安装过Lodop旧版附件npActiveXPLugin,请在【工具】->【附加组件】->【扩展】中先卸它）</font>";
    var strHtmChrome="<br><br><font color='#FF00FF'>(如果此前正常，仅因浏览器升级或重安装而出问题，需重新执行以上安装）</font>";
    var strCLodopInstall="<br><font color='#FF00FF'>CLodop云打印服务(localhost本地)未安装启动!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/CLodop_Setup_for_Win32NT.exe' target='_self'>执行安装</a>,安装后请刷新页面。</font>";
    var strCLodopUpdate="<br><font color='#FF00FF'>CLodop云打印服务需升级!点击这里<a href='"+localhostPath+"/pos-web/resources/js/clodop/CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
    var LODOP;
    try{
        var isIE = (navigator.userAgent.indexOf('MSIE')>=0) || (navigator.userAgent.indexOf('Trident')>=0);
        if (needCLodop()) {
            try{ LODOP=getCLodop();} catch(err) {};
            if (!LODOP && document.readyState!=="complete") {alert("C-Lodop没准备好，请稍后再试！"); return;};
            if (!LODOP) {
                if (isIE) document.write(strCLodopInstall); else
                    document.body.innerHTML=strCLodopInstall+document.body.innerHTML;
                return;
            } else {
                /*修改clodop的版本号判断,不使用最新版的clodop一样可以实现打印功能*/
                if (CLODOP.CVERSION<"2.0.5.3") {
                    if (isIE) document.write(strCLodopUpdate); else
                        document.body.innerHTML=strCLodopUpdate+document.body.innerHTML;
                };
                if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
                if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
            };
        } else {
            var is64IE  = isIE && (navigator.userAgent.indexOf('x64')>=0);
            //=====如果页面有Lodop就直接使用，没有则新建:==========
            if (oOBJECT!=undefined || oEMBED!=undefined) {
                if (isIE) LODOP=oOBJECT; else  LODOP=oEMBED;
            } else if (CreatedOKLodop7766==null){
                LODOP=document.createElement("object");
                LODOP.setAttribute("width",0);
                LODOP.setAttribute("height",0);
                LODOP.setAttribute("style","position:absolute;left:0px;top:-100px;width:0px;height:0px;");
                if (isIE) LODOP.setAttribute("classid","clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
                else LODOP.setAttribute("type","application/x-print-lodop");
                document.documentElement.appendChild(LODOP);
                CreatedOKLodop7766=LODOP;
            } else LODOP=CreatedOKLodop7766;
            //=====Lodop插件未安装时提示下载地址:==========
            if ((LODOP==null)||(typeof(LODOP.VERSION)=="undefined")) {
                if (navigator.userAgent.indexOf('Chrome')>=0)
                    document.body.innerHTML=strHtmChrome+document.body.innerHTML;
                if (navigator.userAgent.indexOf('Firefox')>=0)
                    document.body.innerHTML=strHtmFireFox+document.body.innerHTML;
                if (is64IE) document.write(strHtm64_Install); else
                if (isIE)   document.write(strHtmInstall);    else
                    document.body.innerHTML=strHtmInstall+document.body.innerHTML;
                return LODOP;
            };
        };
        /*修改lodop的版本号判断,在6.2以下的版本中都可以使用*/
        if (LODOP.VERSION<"6.2.0.4") {
            if (!needCLodop()){
                if (is64IE) document.write(strHtm64_Update); else
                if (isIE) document.write(strHtmUpdate); else
                    document.body.innerHTML=strHtmUpdate+document.body.innerHTML;
            };
            return LODOP;
        };
        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):===

        //===========================================================
        return LODOP;
    } catch(err) {alert("getLodop出错:"+err);};
};

东西比较多,就一点点来拆分读取代码:

获取lodop对象的主过程的函数,我们要修改自己放置安装包的绝对路径.这个绝对路径需要我们自己去修改的,就像我贴的第一张图片的路径一样.引用能够找到该文件.


菜鸟一个,之后有新发现,会持续更新.









YoungLee16
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 项目中使用LodopFuncs （浏览器控制打印机）
web_hj的博客
01-11 3267
1.电脑安装c-Lodop 下载地址http://www.lodop.net/download.html 2. 在要控制打印页面引入 LodopFuncs.js 3. template: <el-button @click="onStart">打印</el-button> script: onStart: function () { let LODOP=getLodop(); LODOP.PRINT_INIT(""); ...
php lodop完整案例,lodop判断是否打印成功
weixin_42116596的博客
03-26 1099
需要引用js演示如何获得打印状态及控制打印：1、先点执行打印获得该打印的JOB代码：2、onclick="document.getElementById('T2').value = getStatusValue('PRINT_STATUS_OK', document.getElementById('T1').value, document.getElementById('T2'))">(1-...
LODOP获取打印成功，是否加入队列
weixin_30535043的博客
04-29 642
之前博文介绍过获取打印机状态码 LODOP获取打印机状态码和状态码含义测试，但是打印机种类千差万别，状态码不一定准确，特别是打印成功的状态码，获取任务不在队列，可以判断打印成功，删除任务也是任务不在队列了。本人使用过的软件不多，税务局的开票软件等均没有提示打印成功的方式，有次自己没连打印机，处于脱机状态，点了打印没有反应，一看还会没把usb接口插上，插上之后又开始打印了。 个人认为可以不加判断打...
Lodop 代码设置打印机等信息后 预览可重选
Baby_加油_的博客
03-25 913
在使用Lodop打印中，会遇到一个问题，你可能想默认用A4纸，纵向打印。但还想打印预览的时候，调纸张或方向，而设置了LODOP.SET_PRINT_PAGESIZE(intOrient, PageWidth,PageHeight,strPageName);后，再去修改，会提示不能更改。 解决方法 Lodop打印控件默认在代码里指定了打印、纸张、纸张方向、份数等信息，在预览的界面的设置里是无法重新...
Lodop LODOP.SET_PRINT_STYLEA
最新发布
Bruce__taotao的博客
02-26 1284
Lodop中 LODOP.SET_PRINT_STYLEA 的可以设置的属性比较多这一篇讨论下。以上就是今天要讲的内容，本文介绍了 LODOP.SET_PRINT_STYLEA的简单使用。
lodop 6.057打印（2012最新版） 兼容chrome、IE、firefox 终身免费
05-11
个人在几个项目上使用，入手简单、功能强悍，强烈推荐。lodop6.057打印控件（2012最新版），免费的，chrome、IE、firefox等浏览器均可以使用（附有案例和说用说明）
lodop判断是否打印成功
weixin_34160277的博客
07-17 1456
需要引用js <script src="js/jquery-3.3.1.js"></script> <script src="js/LodopFuncs.js"></script> <h2><font color="#009999">演示如何获得打印状态及控制打印：</font> &...
LODOP打印使用及其使用问题
钱多多的博客
11-20 546
ADD_PRINT_TABLE：不切行，打印表格。只能打印一个表格，嵌套复杂的行跨页了会隐藏后面的内容，不会分到下一页，会出现文字被截成一半的情况。ADD_PRINT_HTM：切行不切字，按照打印页的高度进行分页，嵌套复杂的行会将最后一行字展示完了然后剩余部分展示在下一页。ADD_PRINT_HTML：切行切字，完全按照打印设计的高度分页，会出现文字被截成一半的情况，类似于截图.linux和windows可能会出现效果不同，linux使用ADD_PRINT_TABLE自动换行分页会出现无法补全表头和结尾表格
vue实现lodop打印功能的示例
01-18
3.vue部分实现 　3.1将lodopDuncs.js文件放入工程中，具体操作可见：http://www.lodop.net/faq/pp35.html 3.2 编写代码 <button class=print-btn v-on:click=btnClickPrint> <span>{{ msg }} </...
在UniApp中集成Lodop实现APP打印标签功能-库文件源代码
08-11
本资源提供了Lodop实现在UniApp应用程序中打印标签的功能的库文件源代码。在本资源中，我们将介绍如何使用Lodop在UniApp中打印标签，包括如何定义标签样式、打印内容和打印方式等。此外，我们还将提供一些示例代码和...
Vue中使用Lodop插件实现打印功能的简单方法
10-15
主要给大家介绍了关于Vue中使用Lodop插件实现打印功能的简单方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
lodop页面打印控件白皮书
09-04
web打印控件lodop 多浏览器支持,用它既可裁剪输出页面内容，又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同JavaScript扩展语句
LODOP JS 获取电脑打印机，并指定打印机打印（转备用）
chengmin123456789的博客
04-30 3292
//获取本地电脑可选的打印机(驱动)，并默认选择cookie中存储的打印机 function printerList() { //读cookie中存储已经选择的打印机： var arrStr = document.cookie.split("; "); var strPName; for (var i = 0; i < arrStr.length; i++)...
LODOP获取打印状态码和时间列表
weixin_30609331的博客
09-05 536
之前有博文介绍获取打印状态码和打印状态码的含义，相关博文：LODOP获取打印机状态码和状态码含义测试、此外 ，也有获取状态码及其变化的方法，可以获取打印状态码的列表，列表包含每个状态和每个状态的时间。方法和获取打印状态码含义的其中一种方法一样，都是LODOP.GET_VALUE方法，就是参数不同，获取打印状态码含义是PRINT_STATUS_TEXT，获取打印状态的列表是PRINT_ST...
在UniApp中使用Lodop实现APP打印标签功能
Mr.Hua的博客
07-28 6369
在当今移动互联网时代，移动应用程序已经成为人们日常生活中不可或缺的一部分。随着移动设备性能的不断提升和移动网络的普及，越来越多的企业和个人开始将业务扩展到移动端。UniApp 作为一种新兴的跨平台移动应用开发框架，为开发人员提供了快速构建高质量移动应用的能力。它支持一次开发，多端运行，可以大大提高开发效率。然而，在实际应用中，我们经常会遇到需要在移动应用中实现打印功能的需求。例如，在物流行业，快递员需要在移动设备上打印快递单；在餐饮行业，服务员需要在移动设备上打印点菜单等。
C-LODOP打印设计获取返回值
chufeng1992的专栏
04-25 7448
先声明前提，已经本地安装了打印服务。页面引用http://127.0.0.1:8000/CLodopfuncs.js?priority=1">>。 问题：是调用C-LODOP打印设计的时候，直接调用 LODOP.PRINT_DESIGN();  函数返回的是一个C70mt开头的字符串（后面知道是远程任务id），但我们肯定想要的不是这个，想要的肯定是设计返回的js代码，这个纠结了一阵子。 解决：
不同版本CLODOP 预览关闭窗口时返回值不同
qq_38030465的博客
08-30 847
但是在以前的版本中有的回调函数是 一个布尔值，点击关闭的时候返回的是true，所以使用的C-LODOP跟开发版本最好一致。clodop 预览打印放弃打印时关闭调用的函数返回值正常是这样的。
vue lodop实现多页打印
07-11
要在Vue中实现多页打印，你可以使用Lodop插件。Lodop是一个用于浏览器打印的第三方插件，可以提供丰富的打印功能。 以下是在Vue中使用Lodop实现多页打印的基本步骤： 1. 首先，你需要从Lodop官网下载Lodop插件并进行安装。 2. 在Vue项目中引入Lodop插件。你可以在`public/index.html`文件中添加以下代码： ```html <script src="http://localhost:8000/CLodopfuncs.js"></script> ``` 这里的`http://localhost:8000/CLodopfuncs.js`是Lodop插件的访问路径，请根据你的实际情况进行修改。 3. 在Vue组件中，你可以使用`this.$nextTick()`来确保Lodop插件已经加载完毕，然后在回调函数中进行打印操作。 例如，假设你有一个名为`printMultiPage`的方法来处理多页打印： ```javascript methods: { printMultiPage() { this.$nextTick(() => { // 使用Lodop插件进行打印操作 LODOP.PRINT_INIT("多页打印"); LODOP.SET_PRINT_PAGESIZE(1, 'A4', 0, 0); // 循环添加需要打印的内容，可以根据需要进行调整 for (let i = 0; i < 3; i++) { LODOP.NewPage(); LODOP.ADD_PRINT_TEXT(50, 50, 200, 30, `第 ${i+1} 页内容`); } LODOP.PREVIEW(); // 预览打印 // 可以使用其他方法进行打印，如LODOP.PRINT()直接打印等 }); } } ``` 4. 在Vue模板中添加一个触发多页打印的元素，例如一个按钮： ```html <button @click="printMultiPage">多页打印</button> ``` 现在，当用户点击"多页打印"按钮时，Lodop插件会根据你的设置进行多页打印操作。 请注意，以上代码仅为示例，你需要根据自己的需求进行适当的调整和修改。确保Lodop插件已正确安装和引入，并且在使用时可以根据实际情况设置打印内容和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值