vue+lodop实现web端打印标签功能

背景:项目要求在web端连接标签打印机,打印收件人信息

 lodop打印插件地址:Lodop和C-Lodop官网主站

在项目中使用
1、去官网下载lodop包下载中心 - Lodop和C-Lodop官网主站

windows系统直接下载windows32版的就可以

 2、解压安装

点击CLodop_Setup_for_Win32NT.exe进行安装

3、 把官方提供的LodopFuncs.js文件复制到项目utils文件下(可根据习惯放入自己项目)

4、修改 LodopFuncs.js文件

在文件最后一行增加代码,把该文件中的getLodop函数 export 出来。

export { getLodop }; //导出getLodop
5、在打印页面引入并使用

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

 

<el-buttonclass="print-btn"type="primary"size="mini"@click="btnClickPrint"
>打印
</el-button>
// 打印快递单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();  // 预览并打印},

最终打印出来的小票 

 

 补充:

官方文档vue代码实现如下:

常见问答 - Lodop打印控件官方网站Lodop免费WEB打印控件官网,提1 把官方提供的LodopFuncs.js文件保存到某个目录下, 如myProject\src\assets\LodopFuncs.js。2 修改LodopFuncs.js文件, 在文件最底部添加一行代码export { getLodop }; //导出getLodop 把该文件中的getLodop函数 export 出来。3 在打印事件处理函数所在文件里 import 该 module在打印事件函数中调用getLodop获取LODOP对象变量,按照官方教程书写自己的打印函数,通过 print、preview、print_design进行输出。 入下代码所示 myProject\src\components\Print.vue;Lodop打印控件、WEB打印、C-Lodop、CLodop、lodop控件、云打印、手机打印、免费、AO打印icon-default.png?t=N7T8https://www.lodop.net/faq/pp35.html最基本的打印过程至少有初始化语句添内容语句打印语句三部分组成,例如:

LODOP.PRINT_INIT("打印任务名");               //首先一个初始化语句
LODOP.ADD_PRINT_TEXT(0,0,100,20,"文本内容一");//然后多个ADD语句及SET语句
LODOP.PRINT();                               //最后一个打印(或预览、维护、设计)语句

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

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

相关文章

SpringCloud Config 分布式配置中心

SpringCloud Config 分布式配置中心 概述分布式系统面临的——配置问题ConfigServer的作用 Config服务端配置Config客户端配置 可以有一个非常轻量级的集中式管理来协调这些服务 概述 分布式系统面临的——配置问题 微服务意味着要将单体应用中的业务拆分成一个个字服务&…

linux不同引号的含义(随手记)

单引号&#xff1a; 所见即所得,单引号里面的内容会原封不动输出. echo test--hostname--$(hostname)--{1..5} test--hostname--$(hostname)--{1..5}双引号&#xff1a; 和单引号类似,对双引号里面的特殊符号会进行解析,对于{}花括号(通配符)没有解析. echo "test--host…

python如何整体缩进

python自带编辑器的缩进和取消缩进快捷键&#xff1a; 整体缩进 Ctrl【 整体取消缩进 Ctrl】 pycharm编辑器的缩进和取消缩进快捷键&#xff1a; 整体缩进&#xff1a; tab 整体取消缩进&#xff1a; tabshift

HDMI ARC功能详解及应用介绍

一、HDMI HDMI(High-Definition Multimedia Interface&#xff0c;高清多媒体接口)&#xff0c;是一种专用的音频/视频接口&#xff0c;用于发送未压缩的视频数据和压缩/未压缩的音频数据。HDMI是模拟视频标准的数字替代品。HDMI视频和音频信号传输通道采用了TMDS&#xff08;T…

【经验总结】Vue2中的全局变量(store

需求场景 需要在vue中存储一个可变的&#xff0c;可读写的全局变量在不同的js、页面中均可调用和读写 技术&#xff1a;使用vue的store 用法总结 一、定义变量 1、找到vue的/src/store路径&#xff0c;在modules文件夹下创建文件&#xff08;这里便于测试创建demo.js&…

51单片机入门:DS1302时钟

51单片机内部含有晶振&#xff0c;可以实现定时/计数功能。但是其缺点有&#xff1a;精度往往不高、不能掉电使用等。 我们可以通过DS1302时钟芯片来解决以上的缺点。 DS1302时钟芯片 功能&#xff1a;DS1302是一种低功耗实时时钟芯片&#xff0c;内部有自动的计时功能&#x…

十二届蓝桥杯Python组3月中/高级试题 第二题

** 十二届蓝桥杯Python组3月中/高级试题 第二题 ** 第二题&#xff08;难度系数 3&#xff0c;20 个计分点&#xff09; 编程实现&#xff1a; 给定一个正整数&#xff0c;判断这个正整数是否能被5整除。 输入描述&#xff1a;输入一个正整数n 输出描述&#xff1a;如果n可以…

SpringBoot启动流程源码解析

目录 一、SpringApplication构造方法解析 1. web应用类型 2. BootstrapRegistryInitializer 3. ApplicationContextInitializer 4. ApplicationListener 5. 推断Main方法所在类 二、SpringApplication.run(String... args)方法解析 1.创建DefaultBootstrapContext 2.获…

订单超时自动取消的实践方案

1、定时任务方案 方案流程&#xff1a; 每隔 30 秒查询数据库&#xff0c;取出最近的 N 条未支付的订单。 遍历查询出来的订单列表&#xff0c;判断当前时间减去订单的创建时间是否超过了支付超时时间&#xff0c;如果超时则对该订单执行取消操作。 定时任务方案工程实现相…

基于AC-YOLO的路面落叶检测方法

基于AC-YOLO的路面落叶检测方法 A Road Leaf Detection Method based on AC-YOLO 完整下载链接:基于AC-YOLO的路面落叶检测方法 文章目录 基于AC-YOLO的路面落叶检测方法摘要第一章 引言1.1 研究背景1.2 研究意义1.3 相关工作 第二章 AC-YOLO算法介绍2.1 目标检测技术综述2.2…

【Vue】vue中将 html 或者 md 导出为 word 文档

原博主 xh-htmlword文档 感谢这位大佬的封装优化和分享&#xff0c;亲测有用&#xff01;可以去看大佬&#x1f447;的说明&#xff01; 前端HTML转word文档&#xff0c;绝对有效&#xff01;&#xff01;&#xff01; 安装 npm install xh-htmlword导入 import handleEx…

远动通讯屏的作用

远动通讯屏的作用 远动通讯屏有时有称为调度数据网柜&#xff0c;远动通讯屏具体干啥作用&#xff1f;远动通讯屏是以计算机为基础的生产过程与调度自动化系统&#xff0c;可以对现场的运行设备进行监视和控制、以实现数据采集、设备测量、参数调节以及各类信号报警等各项功能。…

Spring MVC、Boot、Cloud:一站式对比与解析

Spring MVC、Boot、Cloud&#xff1a;一站式对比与解析 文章目录 Spring MVC、Boot、Cloud&#xff1a;一站式对比与解析一、SpringMVC二、SpringBoot三、SpringCloud四、从多个方面看1、定位和功能&#xff1a;2、依赖管理&#xff1a;3、开发效率&#xff1a;4、项目结构和维…

git--.gitignore--使用/详解/实例

简介 本文介绍git的.gitignore忽略文件的用法。 项目中并不是所有文件都需要保存到版本库中的&#xff0c;例如“target”目录及目录下的文件就可以忽略。 忽略某个文件&#xff08;不提交到版本库的方法&#xff09;&#xff1a;在Git工作区的根目录下创建一个.gitignore文件…

上海市计算机学会竞赛平台2022年4月月赛丙组闰年的判定

题目描述 给定一个正整数 &#x1d466;y 表示一个年份&#xff0c;请判定 &#x1d466;y 年是否为闰年&#xff0c;闰年分普通闰年与世纪闰年&#xff1a; 普通闰年的年份是 44 的倍数&#xff0c;但不能是 100100 的倍数&#xff1b;世纪闰年的年份是 400400 的倍数。 输…

用webui.sh安装报错No module named ‘importlib.metadata‘

安装sdweb报错&#xff0c;出现No module named importlib.metadata&#xff1a; glibc version is 2.35 Cannot locate TCMalloc. Do you have tcmalloc or google-perftool installed on your system? (improves CPU memory usage) Traceback (most recent call last):File…

Pytorch实现扩散模型【DDPM代码解读篇2】

扩散的代码实现 本文承接 Pytorch实现扩散模型【DDPM代码解读篇1】http://t.csdnimg.cn/aDK0A 主要介绍“扩散是如何实现的”。代码逻辑清晰&#xff0c;可快速上手学习。 # 扩散的代码实现 # 扩散过程是训练部分的模型。它打开了一个采样接口&#xff0c;允许我们使用已经…

【线性回归】

1. 简单线性回归 y ax b double[] x {540, 360, 240}; double[] y {205, 325, 445};问题 根据double[] x 和 double[] y &#xff0c;计算y ax b中a和b的值 解决方法 最小二乘法&#xff1a;让距离&#xff08;实验值和理论值的差值&#xff09;的平方和最小 即&…

堆的基本操作(c语言实现)

1.堆的基本操作 1.1定义堆 typedef int HPDataType;//堆中存储数据的类型typedef struct Heap {HPDataType* a;//用于存储数据的数组int size;//记录堆中已有元素个数int capacity;//记录堆的容量 }HP;1.2初始化堆 然后我们需要一个初始化函数&#xff0c;对刚创建的堆进行初…

【C语言】路漫漫其修远兮,深入[指针]正当下

一. 指针初步 1.概念定义 地址&#xff1a;我们在内存中开辟空间时&#xff0c;为了方便后续访问&#xff0c;每个数据有确切的地址。 指针&#xff1a;指向数据的地址&#xff0c;并将其地址储存在指针变量中。 2.基本运算符 • 取地址操作符&#xff08;&&#xff09; …