Vue3+hooks快速接入Lodop打印插件

2023-12-17 19:45

本文主要是介绍Vue3+hooks快速接入Lodop打印插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、下载并修改LodopFuncs.js
    • 1.1 调整LodopFuncs.js代码, 暴露 getLodop
  • 二、自定义useLodop hooks抽取共用的lodop逻辑
    • CheckLodopIsOk
    • getPrinterArr
    • printLabel
    • printA4Paper
  • 总结


前言

上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件,这篇讲讲vue3如何集成lodop组件。


一、下载并修改LodopFuncs.js

在官网 Lodop 官网 下载入门案例,其中有LodopFuncs.js

在这里插入图片描述
我们需要的文件 LodopFuncs.js ,其他案例也可以稍微运行看看。
在这里插入图片描述

1.1 调整LodopFuncs.js代码, 暴露 getLodop

我们在尾部加上一下代码,暴露Lodop的初始化函数。

export { getLodop }

在这里插入图片描述

二、自定义useLodop hooks抽取共用的lodop逻辑

在项目的hooks 文件夹下创建一个hook。根据自己的项目,按实际情况命名。
这里是 useLodop.ts

// 引入上一步骤创建的lodopfuns
import { getLodop } from '@/utils/lodop/LodopFuncs'
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'export function useLodop() {const variable = reactive({printerArr: []})let LODOP = nullconst CheckLodopIsOk = async () => {try {LODOP = getLodop()if (LODOP.VERSION) {if (LODOP.CVERSION) {return true} else {return true}}} catch (err) {return false}}const printLabel = async (options: {strBASE64Code: stringxxxx: stringrawRow: {paperType: PaperTypeEnum}}) => {LODOP = getLodop()if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')}LODOP.PRINT_INIT('')// 根据打印的类型,获取设置的打印机字符串。根据自己的实际业务修改const printerStr = await getPrinter(options?.xxx, options?.rawRow?.paperType)if (!LODOP.SET_PRINTER_INDEX(printerStr)) {return Promise.resolve(false)}if ((options.rawRow.paperType ) == 'Label_4X6') {LODOP.SET_PRINT_PAGESIZE(1, '100mm', '152.4mm', '') // 纸张方向大小} else {LODOP.SET_PRINT_PAGESIZE(3, '', '', 'A4') // 纸张方向大小}LODOP.ADD_PRINT_IMAGE(0, 0, '100%', '100%', options?.strBASE64Code)// 设置打印的显示比例LODOP.SET_PRINT_STYLEA(0, 'Stretch', 1)// LODOP.PREVIEW();const isPrintSuccess = LODOP.PRINT()return Promise.resolve(!!isPrintSuccess )}const printA4Paper = async (options: {rawObj: Objectxxxx: stringTableId: string}) => {LODOP = getLodop()if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')}LODOP.PRINT_INIT('')const printerStr = await getPrinter(options?.xxxx, 'A4')if (!LODOP.SET_PRINTER_INDEX(printerStr)) {return Promise.resolve(false)}// 条形码LODOP.ADD_PRINT_BARCODE('20mm', 32, '40%', 100, '128B', `${options.rawObj?.barcode}`)LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)// LODOP.ADD_PRINT_BARCODE(5,734,168,146,"QRCode","1234567890版本7的最大值是122个字符123123");LODOP.SET_PRINT_STYLE('FontSize', 12)LODOP.SET_PRINT_PAGESIZE(3, 0, 0, 'A4') // 纸张方向大小LODOP.SET_PRINT_STYLEA(0, 'TableHeightScope', 3) //高度包含页尾//  ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项LODOP.SET_PRINT_COPIES(1) // 份数// LODOP.SET_PRINT_STYLE('Bold', 1)LODOP.SET_PRINT_STYLE('FontSize', '12')LODOP.ADD_PRINT_TEXT('20mm','115mm','100mm','5mm',`Warehouse:${options.rawObj?.baseWarehouseVo?.name}`)// 放在某处后面表示每一页都有这个内容 , 类似页眉页脚用法LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)}// 表格部分LODOP.ADD_PRINT_HTM('59mm','0mm','RightMargin:2mm','100%',document.getElementById(`${options.TableId}`).innerHTML)// LODOP.ADD_PRINT_TABLE(//   '59mm',//   '0mm',//   '198mm',//   '275mm',//   document.getElementById(`${options.TableId}`)?.innerHTML// )// 页码LODOP.ADD_PRINT_HTM('6mm','90%','100mm',20,"<span tdata='pageNO'>##</span> of <span tdata='pageCount'> ##</span>")LODOP.SET_PRINT_STYLEA(0, 'ItemType', 1)const isPrintSuccss = LODOP.PRINT() // 直接打印return Promise.resolve(!!isPrintSuccss)}const getPrinterArr = () => {variable.printerArr = []if (!CheckLodopIsOk()) {ElMessage.warning('请安装/启动Lodop打印插件')return false}let counter = LODOP.GET_PRINTER_COUNT() // 获取打印机个数for (let i = 0; i < counter; i++) {var curPrintName = LODOP.GET_PRINTER_NAME(i)variable.printerArr.push({name: curPrintName,label: curPrintName})}localStorage.setItem('PRINTER_ARR', JSON.stringify(variable.printerArr || []))return true}return {getPrinterArr,printLabel,printA4Paper,CheckLodopIsOk}
}

上述代码大概暴露4个方法分别为

CheckLodopIsOk

CheckLodopIsOk : 判断lodop 插件是否安装、启动了,相应的逻辑处理,一般插件都没开启直接提示就好

getPrinterArr

getPrinterArr :这个是判断有没有可以用打印机,需要安装了lodop插件后,调用他的api 获取。这里获取后储存了起来方便其他页面调用

printLabel

printLabel : 这个方法用来处理base64 数据,打印标签, 其中 LODOP.SET_PRINT_STYLEA(0, ‘Stretch’, 1) 用来调整显示比例

printA4Paper

printA4Paper: 这个是打印A4纸质的表单,常见的仓库里的拣货单等


总结

本文讲解Vue3 项目如何从零到1集成lodop 实现标签打印与A4纸质类型的打印。

这篇关于Vue3+hooks快速接入Lodop打印插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/505614

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

hdu 4565 推倒公式+矩阵快速幂

题意 求下式的值: Sn=⌈ (a+b√)n⌉%m S_n = \lceil\ (a + \sqrt{b}) ^ n \rceil\% m 其中: 0<a,m<215 0< a, m < 2^{15} 0<b,n<231 0 < b, n < 2^{31} (a−1)2<b<a2 (a-1)^2< b < a^2 解析 令: An=(a+b√)n A_n = (a +

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

v0.dev快速开发

探索v0.dev:次世代开发者之利器 今之技艺日新月异,开发者之工具亦随之进步不辍。v0.dev者,新兴之开发者利器也,迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势,助汝速速上手,提升开发之效率。 何谓v0.dev? v0.dev者,现代化之开发者工具也,旨在简化并加速软件开发之过程。其集多种功能于一体,助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo