LODOP 打印 控件 Vue 的使用方法

最新推荐文章于 2024-05-09 13:33:02 发布
最新推荐文章于 2024-05-09 13:33:02 发布
阅读量498 收藏 1
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38785028/article/details/136454484
版权

1.将LodopFuncs.js 引入vue 中 将 LodopFuncs.js 的最后一行  将getLodop 方法暴露出去 

//==本JS是加载Lodop插件及CLodop服务的综合示例，可直接使用，建议看懂后融进自己页面程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
    try {
        var ua = navigator.userAgent;
        if (ua.match(/Windows\sPhone/i))
            return true;
        if (ua.match(/iPhone|iPod|iPad/i))
            return true;
        if (ua.match(/Android/i))
            return true;
        if (ua.match(/Edge\D?\d+/i))
            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) && (!verIE) && (x64))
            return true;
        else if (verFF) {
            verFF = verFF[0].match(/\d+/);
            if ((verFF[0] >= 41) || (x64))
                return true;
        } else if (verOPR) {
            verOPR = verOPR[0].match(/\d+/);
            if (verOPR[0] >= 32)
                return true;
        } else if ((!verTrident) && (!verIE)) {
            var verChrome = ua.match(/Chrome\D?\d+/i);
            if (verChrome) {
                verChrome = verChrome[0].match(/\d+/);
                if (verChrome[0] >= 41)
                    return true;
            }
        }
        return false;
    } catch (err) {
        return true;
    }
}

//==加载引用CLodop的主JS,用双端口8000和18000(以防其中一个被占):==
function loadCLodop() {
    if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
    CLodopJsState = "loading";
    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    var JS1 = document.createElement("script");
    var JS2 = document.createElement("script");
    JS1.src = "http://localhost:8000/CLodopfuncs.js?priority=1";
    JS2.src = "http://localhost:18000/CLodopfuncs.js";
    JS1.onload  = JS2.onload  = function()    {CLodopJsState = "complete";}
    JS1.onerror = JS2.onerror = function(evt) {CLodopJsState = "complete";}
    head.insertBefore(JS1, head.firstChild);
    head.insertBefore(JS2, head.firstChild);
    CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}

if (needCLodop()){loadCLodop();}//加载

//==获取LODOP对象主过程,判断是否安装、需否升级:==
function getLodop(oOBJECT, oEMBED) {
    var strHtmInstall = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtmUpdate = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>,升级后请重新进入。</font>";
    var strHtm64_Install = "<br><font color='#FF00FF'>打印控件未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>,安装后请刷新页面或重新进入。</font>";
    var strHtm64_Update = "<br><font color='#FF00FF'>打印控件需要升级!点击这里<a href='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_1 = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
    var strCLodopInstall_2 = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
    var strCLodopInstall_3 = "，成功后请刷新本页面。</font>";
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>,升级后请刷新页面。</font>";
    var LODOP;
    try {
        var ua = navigator.userAgent;
        var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
        if (needCLodop()) {
            try {
                LODOP = getCLodop();
            } catch (err) {}
            if (!LODOP && CLodopJsState !== "complete") {
                if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("没有加载CLodop的主js，请先调用loadCLodop过程.");
                return;
            }
            if (!LODOP) {
                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
                return;
            } else {
                if (CLODOP.CVERSION < "4.1.2.7") {
                    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 && !!(ua.match(/x64/i));
            //==如果页面有Lodop就直接使用,否则新建:==
            if (oOBJECT || oEMBED) {
                if (isIE)
                    LODOP = oOBJECT;
                else
                    LODOP = oEMBED;
            } else if (!CreatedOKLodopObject) {
                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);
                CreatedOKLodopObject = LODOP;
            } else
                LODOP = CreatedOKLodopObject;
            //==Lodop插件未安装时提示下载地址:==
            if ((!LODOP) || (!LODOP.VERSION)) {
                if (ua.indexOf('Chrome') >= 0)
                    document.body.innerHTML = strHtmChrome + document.body.innerHTML;
                if (ua.indexOf('Firefox') >= 0)
                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
                document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
                return LODOP;
            }
        }
        if (LODOP.VERSION < "6.2.2.6") {
            if (!needCLodop())
                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
        }
        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):==


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


export default getLodop

2.在组件中直接使用

import getLodop from '../../assets/js/LodopFuncs.js'
var LODOP;
export default {
    data(){
        return {
            value:'' // 打印机名称
        }
    },
    
    methods:{
        // 获取到当前机器的 打印机列表
        print_name(){
              LODOP = getLodop();
              let count = LODOP.GET_PRINTER_COUNT();  
              let arr = [];
              for (var i = 0; i < count; i++) {
                let obj = {};
                obj.value = LODOP.GET_PRINTER_NAME(i);
                obj.label = LODOP.GET_PRINTER_NAME(i);
                arr.push(obj);
              }
          this.options = arr;
        },
        printSubmit(){
                // 获取dom 元素内容 
             var printHtml = document.getElementById('lodop').innerHTML;
            var html = `<body>${printHtml}</body>`
            console.log(html);
            LODOP.PRINT_INIT("LODOP打印任务"); //初始化在循环中
            // Brother MFC-J3930DW
            LODOP.SET_PRINTER_INDEX(this.value);
            LODOP.SET_PRINT_PAGESIZE(2, 0, 0, "A4")
            LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", '80%');
            LODOP.ADD_PRINT_HTM('5mm', '0mm', '1380', "100%", html)
            LODOP.ADD_PRINT_HTM('98%', '88%', 300, 100,
              "<font style='' format='0'><span tdata='pageNO'>第##页</span>/<span                         tdata='pageCount'>共##页</span></font>");
        LODOP.SET_PRINT_STYLEA(0, "Horient", 2)
        // LODOP.PRINT();
        // LODOP.PRINT_DESIGN();
        LODOP.PREVIEW();
       
        }
    }
}

qq_38785028
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue使用lodop实现打印小结
10-16
主要介绍了Vue使用lodop打印小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Lodop打印控件
05-07
Lodop打印控件 实现跨平台的各种浏览器 实现LODOP的各种表单套打
vue+lodop实现web端打印标签功能
最新发布
chensi_07的博客
05-09 951
Lodop免费WEB打印控件官网,提1 把官方提供的LodopFuncs.js文件保存到某个目录下， 如myProject\src\assets\LodopFuncs.js。3 在打印事件处理函数所在文件里 import 该 module在打印事件函数中调用getLodop获取LODOP对象变量，按照官方教程书写自己的打印函数，通过 print、preview、print_design进行输出。Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印。
LODOP打印控件及案例
08-22
LODOP打印控件及案例，整理的免费版
详解如何在vue项目中使用lodop打印插件
10-17
主要介绍了详解如何在vue项目中使用lodop打印插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3集成条形码插件-jsbarcode配合Lodop使用
Bruce__taotao的博客
02-28 1020
jsbarcode npm 直达。本文在Vue3的项目中集成条形码插件，目的是为了结合Lodop 打印插件实现table内嵌条形码的打印功能。本文主要讨论为了配合Lodop 在table中内嵌条形码，而引入jsbarcode插件的集成过程，希望对你有帮助。
vue如何使用lodop
qq_43575827的博客
04-21 6021
如何在Vue中使用lodop 最近在项目中需要打印，lodop是web端常用的打印工具，安装打印机驱动之后，连接打印机，看是否能实现正常打印。 打开lodop官网，http://www.lodop.net/index.html 下载lodop客户端。 把lodopFuncs拷贝到utils文件夹下， import { getLodop } from '@t/lodop' //这块就是引用的上面一大坨暴露出来的方法喽 const PrintAccount = (qrTitle, codetype, url
使用vue进行Lodop打印的一些方法
字节叔叔
06-11 7034
一个基于 Vue、ElementUi、C-Lodop 的打印模板设计器。实现打印模板的设计、预览和打印功能。示例。
lodop web打印 vue项目 无预览直接打印
Sensation_cyq的博客
07-11 3295
封装 LodopFuncs.js var CreatedOKLodop7766=null; //====判断是否需要安装CLodop云打印服务器:==== export function needCLodop(){ try{ var ua=navigator.userAgent; if (ua.match(/Windows\sPhone/i) !=nu...
vue中使用打印lodop？
qq_62861688的博客
06-09 576
执行安装
vue使用Lodop详细步骤
weixin_43631677的博客
11-21 536
vue 使用打印机打印二维码标签贴纸
vue打印插件使用
11-26
vue打印插件使用 第一步: npm install vue-easy-print --save 第二步，在你的vue页面里 import vueEasyPrint from "vue-easy-print"; import demo from './your path/demo'; // in your vue [removed] export default { components: { vueEasyPrint, demo } } 第三步，加载模板: slot-scope func.getChineseNumber接收到的方法是一个将金额转换成中文的 配置props参数 // 针对分页表格模式：末尾空白行插入 spaceRow: { type:Boolean, default:false, }, // 针对分页表格模式：传入的打印数据。 tableData:{ type:Object, default() { return undefined } }, // 是否显示表格 tableShow:{ type:Boolean, default:false }, // 每页多少行 onePageRow: { type:Number, default:5, }, // 复制打印页面前调用的钩子 beforeCopy:Function, // 打印页面前调用的钩子 beforePrint:Function,
LODOP打印控件
09-30
最新版本Lodop打印控件，可用于单页打印，多页连续打印。可设置符合产品需求的打印样式和设计
lodop+vue实现无感打印 （标签机打印标签）
he3236220的博客
12-29 1461
vue实现静默打印标签功能
Vue使用LODOP实现出库单打印功能及遇到的相关问题
Xia_Shang7的博客
11-06 597
饲逸云项目中出库单管理新增 点击按钮实现的功能打印预览效果。
Vue3+hooks快速接入Lodop打印插件
Bruce__taotao的博客
12-15 1773
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。
Vue中使用LODOP（打印）
qq_58671311的博客
08-11 1136
三.下载完成后解压得到LodopFuncs.js ，将这个文件复制到Vue项目中的utils文件夹中即可。二.在下载中心点击画红圈的部分（根据自己需求）一.打开LODOP官网。
c-lodop打印控件调用案例
06-01
c-lodop打印控件是一款能够在网页中实现打印功能的控件，以下是一个简单的调用案例： 1. 首先下载并安装c-lodop打印控件。 2. 在需要使用打印功能的网页中引入控件代码： ```html <script src="http://localhost:8000/CLodopfuncs.js"></script> <script src="http://localhost:8000/CLODOP.js"></script> ``` 3. 在页面加载完成后初始化控件： ```javascript function initPrintControl() { var LODOP = getCLodop(); if (!LODOP) { return; } // 设置打印页面大小和边距 LODOP.SET_PRINT_PAGESIZE(0, 0, 0, "A4"); LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT","Full-Width"); LODOP.SET_SHOW_MODE("HIDE_PAPER_BOARD",1); LODOP.PRINT_INIT("打印标题"); } ``` 4. 调用打印功能： ```javascript function print() { var LODOP = getCLodop(); if (!LODOP) { return; } LODOP.PRINT(); } ``` 通过以上步骤，就可以在网页中使用c-lodop打印控件实现打印功能了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值