vue结合Lodop前端实现打印机的获取及打印

已于 2022-02-23 16:32:06 修改
阅读量4.4k 收藏 18
点赞数 1
文章标签： 前端 vue.js javascript
于 2022-02-14 22:06:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42381196/article/details/122932554
版权

vue结合Lodop前端实现打印机的获取及打印

首先展示一下实现的效果：
在这里插入图片描述

一、Lodop的使用

使用Lodop来实现本地打印机的获取，首先在自己的vue页面引入LodopFuncs.js文件。

//==本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时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
//主JS文件“CLodopfuncs.js”是固定文件名，其内容是动态的，与当前打印环境有关:
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");

    if (window.location.protocol=='https:') {
      JS1.src = "https://localhost.lodop.net:8443/CLodopfuncs.js";
      JS2.src = "https://localhost.lodop.net:8444/CLodopfuncs.js";
    } else {
      JS1.src = "http://localhost:8000/CLodopfuncs.js";
      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.4.5") {
                    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 { getLodop }

在自己的页面引入js

import { getLodop } from "@/api/data/LodopFuncs";

方法实现

    //得到打印机的名字
    getPrint() {
      this.LODOP = getLodop(); // 创建一个LODOP对象
      let counter = this.LODOP.GET_PRINTER_COUNT(); // 获取打印机个数
      console.log(counter);
      //初始化下printNameList打印数组
      this.printNameList = [];
      for (let i = 0; i < counter; i++) {
        //将打印机存入printList数组中
        this.printNameList.push(this.LODOP.GET_PRINTER_NAME(i));
      }
    },

实现打印的方法

        directPrint(this.form).then((response) => {       
              console.log(response.data)
              this.pdfFileName = ["D:\\pdf\\hello_0.jpg","D:\\pdf\\hello_1.jpg","D:\\pdf\\hello_2.jpg"];
              console.log(this.pdfFileName.length)
              if (response.code == 200) {
              const strURL = this.pdfFileName; // 打印图片的地址
              LODOP = getLodop();
              //打印初始化
              LODOP.PRINT_INIT("打印");
              //设置纸张大小
              LODOP.SET_PRINT_PAGESIZE(3, 1000, 1500, "");
              //传入打印的，实现的多张图片的打印
              for( var i=0;i<this.pdfFileName.length;i++){
                LODOP.NewPage();
                LODOP.ADD_PRINT_IMAGE(0, 0, "100%", "100%",this.pdfFileName[i]);
              }
              
              LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 0, 0, "");

              console.log(this.form.attr3);
              //选择打印机this.form.attr3，这是我自己获取到打印机的地址
              
              if (LODOP.SET_PRINTER_INDEXA(this.form.attr3)) {
                //预览打印
                LODOP.PREVIEW();
              }

              this.$modal.msgSuccess("打印成功");
             
            }
          });
@悠然见南山
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue 项目中使用LodopFuncs （浏览器控制打印机）
web_hj的博客
01-11 3347
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(""); ...
vue使用lodop.js实现前端标签打印
weixin_43998944的博客
07-12 3088
vue 使用lodop 实现标签打印
vue后台管理系统+lodop插件实现打印功能(一张A4纸打印两个表格)
m0_72929120的博客
06-06 525
下载lodop打印插件引入lodop.js,js源码(从官网上下载的) export getLodop在需要的页面上引入。
vue + Lodop 实现浏览器自动打印 无需预览打印
麋鹿的鹿
07-11 699
官网地址：https://www.lodop.net/download.html 先去Lodop官网下载相应的安装包 解压安装将LodopFuncs.js放在项目中utils文件夹中加一行代码 export { getLodop }; //导出 <template> <div> <div class="main"> <ul class="btns"> <li @click="start">开始打印</
VUE使用lodop实现前端打印页面指定内容
httpmc2018的博客
10-21 2645
最近做项目，遇到一个需要页面无需下载在线打印Word的功能，最初尝试直接打印页面，会导致将整个页面都打印出来，不符合要求。后期客户要求要使用lodop，这样打印与页面展示Word两个方面都是未知的东西，那就查资料设计实现方式吧，这里重点记录打印的实现，总的来说有三步。 1.去lodop的下载地址下载安装适合自己电脑的插件，传送门：http://www.c-lodop.com/download.html​​​​​​​​​​​​​ 注意！这里我认为该官网下载有个不友好的地方 打印组件，即一些样例，需.
vue+lodop实现web端打印标签功能
chensi_07的博客
05-09 1175
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打印。
vue实现lodop打印功能
qq_37708668的博客
12-06 3400
vue实现lodop打印功能 为什么使用lodop 公司开发一个功能需要直接打印文件，并且可以指定打印机，lodop可以满足需求 lodop是什么（摘自官网） 有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来； 有人说她是打印编程接口，因为她介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到； 有人说她是JavaScript的扩展，因为她所有功能就那么几个语句，和JS语法一样，一看就明白个究竟； 有人说她是报表打印工具，因为那个
java及vue实现获取电脑打印机及打印功能
weixin_42381196的博客
02-14 3871
java及vue实现获取电脑打印机及打印功能
vue + Lodop打印控件的使用
飞猪
09-27 2148
当你的程序采用预览打印语句(如PREVIEW、PREVIEWA等)且预览窗口正常大小时，是完全免费的，输出结果没有水印。仅当采用直接打印语句(如PRINT、PRINTA等)或预览窗口过小时，打印结果的左下角会出现如下两种样式的水印。还有一种方法是不花钱去注册，也就是打印预览的方式去打印，一个物料码一个物料码的打印（同一个物料码可以打印多张）2.安装打印驱动（我的是得力打印机，根据打印机机型，去得力官网下载对应的打印驱动并安装）LodopFuncs.js放在项目中，打印的页面中注册引入进去。
vue调用lodop打印
weixin_46256404的博客
12-12 1442
vue调用lodop打印
Vue使用lodop实现打印小结
10-16
主要介绍了Vue使用lodop打印小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中使用Lodop插件实现打印功能的简单方法
10-15
在Vue项目中实现打印功能，Lodop插件是一个实用的选择。Lodop是一款云打印服务，能够方便地集成到Web应用中，提供便捷的打印API。以下将详细介绍如何在Vue中使用Lodop插件。 首先，我们需要了解Lodop的基本使用方法...
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 }} </...
VUE前端+Node后台模拟打印机Web即时打印.zip
06-26
VUE 框架 + Element UI 开发 Web 前端，使用 Node 的 Express 框架来模拟打印机后端，前端使用 axios 通信框架向 Express 发送请求，Express 接收到请求后，模拟打印机把设定的参数保存到文件中，把收到的打印文件...
WEB渗透Web突破篇-SSRF
最新发布
qq_59468567的博客
08-03 886
转码服务 在线翻译 获取超链接的标题等内容进行显示 请求远程服务器资源的地方，图片加载与下载(通过URL地址加载或下载图片) 图片、文章收藏功能 对外发起网络请求的地方，网站采集、网页抓取的地方。 头像 (远程加载头像) 一切要你输入网址的地方和可以输入ip的地方。 数据库内置功能(mongodb的copyDatabase函数) 邮件系统 文件处理 在线处理工具 从URL关键字中寻找：share、wap、url、link、src、source、target、u、3g、display、sourceURl、im
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1557
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 466
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 393
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
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插件已正确安装和引入，并且在使用时可以根据实际情况设置打印内容和样式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值