vue+lodop实现web端打印功能

news2025/1/19 23:26:19

lodop官网下载地址:http://www.c-lodop.com/download.html

1、下载插件(如果只是想实现打印功能,下载红框里的即可)

2、解压缩,然后根据自己的操作系统安装控件

32位系统安装:install_lodop32.exe;

64位系统安装:install_lodop64.exe;

然后安装云打印插件:CLodop_Setup_for_Win32NT.exe;

3、 测试打印功能

安装包中的html文件为打印实例,点击其中一个用浏览器打开,点击红框如果出现下图弹窗,说明插件安装成功了。

4、 打开安装包把LodopFuncs.js放到项目中

 5、页面引入并使用
<el-button type="primary" @click="btnClickPrint">打印</el-button>

import { getLodop } from '@/utils/LodopFuncs';

// 打印快递单
    btnClickPrint() {
      const LODOP = getLodop(); // 调用getLodop获取LODOP对象
      LODOP.PRINT_INIT('');
      LODOP.SET_PRINT_PAGESIZE(1, '70mm', '50mm', '');
      LODOP.ADD_PRINT_TEXT(
        20,
        10,
        250,
        20,
        `${this.tempInfo[0].label}:${this.tempInfo[0].value}`
      );
      LODOP.ADD_PRINT_TEXT(
        50,
        10,
        250,
        20,
        `${this.deliveryInfo[0].label}:${this.deliveryInfo[0].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        80,
        10,
        250,
        20,
        `${this.deliveryInfo[1].label}:${this.deliveryInfo[1].value}`
      ); // // 设置打印内容
      LODOP.ADD_PRINT_TEXT(
        110,
        10,
        250,
        20,
        `${this.deliveryInfo[2].label}:${this.deliveryInfo[2].value}`
      ); // // 设置打印内容
      LODOP.PREVIEW();
    },

LODOP.PREVIEW();  打印并预览

LODOP.PRINT(); 直接打印

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1919893.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通俗易懂,幽默诙谐,《IP 核芯志》让逻辑设计思想摆脱枯燥的标签(可下载)

在科技的广袤星空中&#xff0c;数字逻辑设计宛如一颗璀璨的明星&#xff0c;闪耀着智慧与创造的光芒。而在这光芒的深处&#xff0c;IP 核芯则是那关键的能量源泉&#xff0c;驱动着无数创新的浪潮。 《IP 核芯志——数字逻辑设计思想》犹如一座灯塔&#xff0c;照亮了我们在…

Docker Push Docker Hub

首先可以参考 Docker | 将自己的docker镜像推送到docker hub[图文详情]_如何将自己的docker镜像上传到dockerhub上-CSDN博客 将自己的镜像打标签 和 镜像推送到 docker hub上的图文注意一下 1.打标签之前 docker tag paddleocr_fast_api:1.0 hmgx/wlx:3.0 2.打标签之后 3.开…

数据结构 —— FloydWarshall算法

数据结构 —— FloydWarshall算法 FloydWarshall算法三种最短路径算法比较1. Dijkstra算法2. Bellman-Ford算法3. Floyd-Warshall算法总结 我们之前介绍的两种最短路径算法都是单源最短路径&#xff0c;就是我们要指定一个起点来寻找最短路径&#xff0c;而我们今天介绍的Floyd…

STM32第十八课:SPIFlash

目录 需求一、SPI概要二、SPI配置1.开时钟2.配置IO3.配置&使能SPI 三、FLash操作函数1.SPI发送数据2.FLASH写使能3.FLASH等待操作完成4.FLASH页写操作5.FLASH读操作6.FLASH扇区擦除 四、需求实现 需求 通过SPI控制FLash进行数据的保存和删除。 一、SPI概要 在我们使用UA…

egg.js使用消息队列rabbitMQ

1. egg-amqplib&#xff1a; 基于 rabbitmq 消息队列封装的库 安装: npm i egg-amqplib --save 引入 // {app_root}/config/plugin.js exports.amqplib {enable: true,package: egg-amqplib, }; 设置 // {app_root}/config/config.default.js exports.amqplib {client:…

Zero-shot learning for requirements classification: An exploratory study

Zero-shot learning for requirements classification: An exploratory study A B S T R A C T 背景:需求工程(RE)研究人员一直在试验机器学习(ML)和深度学习(DL)方法来完成一系列的需求工程任务&#xff0c;比如需求分类、需求跟踪、歧义检测和建模。然而&#xff0c;今天的…

VSCode上通过C++实现单例模式

单例模式实际上就是为了确保一个类最多只有一个实例&#xff0c;并且在程序的任何地方都可以访问这个实例&#xff0c;也就是提供一个全局访问点&#xff0c;单例对象不需要手动释放&#xff0c;交给系统来释放就可以了&#xff0c;单例模式的设计初衷就是为了在整个应用程序的…

Web3 ETF 软件系统的开发框架

Web3 ETF 软件系统的开发框架主要包括智能合约层、前端层、后端层和基础设施层&#xff0c;下面进行详细的介绍。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 智能合约层 智能合约是运行在区块链上的程序&#xff0c;用于定义和执…

基于ssm的图书管理系统的设计与实现

摘 要 在当今信息技术日新月异的时代背景下&#xff0c;图书管理领域正经历着深刻的变革&#xff0c;传统的管理模式已难以适应现代社会的快节奏和高要求&#xff0c;逐渐向数字化、智能化的方向演进。本论文聚焦于这一转变趋势&#xff0c;致力于设计并成功实现一个基于 SSM&…

[计算机网络] VPN技术

VPN技术 1. 概述 虚拟专用网络&#xff08;VPN&#xff09;技术利用互联网服务提供商&#xff08;ISP&#xff09;和网络服务提供商&#xff08;NSP&#xff09;的网络基础设备&#xff0c;在公用网络中建立专用的数据通信通道。VPN的主要优点包括节约成本和提供安全保障。 优…

博物馆地图导航系统:高精度地图引擎与AR/VR融合,实现博物馆数字化转型

在人民日益追求精神文化的时代下&#xff0c;博物馆作为传承与展示人类文明的璀璨殿堂&#xff0c;其重要性不言而喻。然而&#xff0c;随着博物馆规模的不断扩大和藏品种类的日益丰富&#xff0c;游客在享受知识盛宴的同时&#xff0c;也面临着“迷路”与“错过”的困扰。博物…

综合实验作业

node01&#xff1a;192.168.175.146 node02&#xff1a;192.168.175.147 【node01】 node01 与 node02 防火墙在本实验中都需要放行的服务&#xff1b; [rootlocalhost ~]# firewall-cmd --permanent --add-servicedns success [rootlocalhost ~]# firewall-cmd --permanent -…

【C语言】 —— 预处理详解(下)

【C语言】 —— 预处理详解&#xff08;下&#xff09; 前言七、# 和 \##7.1 # 运算符7.2 ## 运算符 八、命名约定九、# u n d e f undef undef十、命令行定义十一、条件编译11.1、单分支的条件编译11.2、多分支的条件编译11.3、判断是否被定义11.4、嵌套指令 十二、头文件的包…

以太网中的各种帧结构

帧结构&#xff08;Ethernet Frame Structure&#xff09;介绍 以太网信号帧结构&#xff08;Ethernet Signal Frame Structure&#xff09;&#xff0c;有被称为以太网帧结构&#xff0c;一般可以分为两类 —— 数据帧和管理帧。 按照 IEEE 802.3&#xff0c;ISO/IEC8803-3 …

Django 框架下的media和static静态文件

Django有两种静态文件 static&#xff1a; 静态文件夹&#xff0c;存放CSS,JS,网站的一些图片等静态资源&#xff0c;为Templates下的html页面提供的。static是不会变化的 media&#xff1a;媒体文件夹&#xff0c;存放网站中用户所相关的一些文件&#xff0c;比如说用户的图片…

深度解析蚂蚁 SEO 蜘蛛池:提升网站流量的有效利器

在当今数字化时代&#xff0c;网站流量对于企业和个人的在线业务成功至关重要。为了在竞争激烈的网络环境中脱颖而出&#xff0c;众多站长和 SEO 从业者不断探索各种优化策略&#xff0c;其中蚂蚁 SEO 的蜘蛛池成为备受关注的工具之一。 蚂蚁 SEO 蜘蛛池是一种创新的技术手段&a…

24/7/12总结

axios Axios 是一个基于 promise 网络请求库&#xff0c;作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 get请求: <script>function…

Cannot resolve symbol ‘HttpServlet‘

问题&#xff1a;不自动导包。 解决方案&#xff1a; https://blog.csdn.net/chenyu_Yang/article/details/136597181

9.Python学习:Socket

1.网络通信要素&#xff08;IP端口传输协议&#xff09; 2.Socket编程 2.1TCP、UDP协议了解 2.2 Socket流程 服务端有两个socket对象&#xff0c;客户端有一个 3.Socket实战 服务端代码&#xff1a; import socket #创建Socket对象 sksocket.socket() #绑定ip与端口号-使…

一文搞定node.js和Vue脚手架的介绍以及安装

node.js的介绍以及安装 node.js的介绍 node.js提供了前端程序的运行环境&#xff0c;可以把node.js理解成是运行前端程序的服务器。node.js的安装 从官网下载安装即可&#xff1a;http://nodejs.cn/download/不要勾选这个,否则会下载很多东西 node -v 是 查看node的版本 npm…