当前位置: 首页 > news >正文

Vue3+TypeScript+printjs 实现标签批量打印功能

前言:临时性需求没怎么接触过前端,代码实现有问题及优化点希望大佬可以留言告知一下

开发工具:VS CODE

界面开发:Vue3+TypeScript+ElementPlus

打印组件:Print-JS

前端打印入口图:

标签页面:

打印界面:

实现功能:前端点击"打印标签"弹出打印界面进行打印作业

实现过程:主界面点击"打印标签"调用el-dialog弹窗(预览和直接打印都居于弹窗实现)

  标签模板代码:

<template><div class="LabelPrint-List"><el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="50%" ><template #header><div style="color: #fff"><el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit/> </el-icon><span>标签打印界面</span></div></template><el-row :gutter="10"><el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb10"><div v-for="item in state.Datas"><el-card class="box-card" style="width:100mm; height: 90mm;display: block;" ><div :id='item.id?.toString()'><!-- print-js --><div class="labelHeadBody"><div class="labelHeadBodyLeftHead"><img class="labelHeadBodyLeftHeadimage"  src="/image/点金log.png" fit="fill" /></div><div class="labelHeadBodyRightHead"><table class="tableHead"><tr><td class="labelHeadBodyRightHeadTd">某某有限公司</td></tr><tr><td class="labelHeadBodyRightHeadTd">物料标识卡</td></tr></table></div></div><div class="labelBody"><table><tbody><tr><td class="lableBodytdleft">P/N:</td><td class="lableBodytdright">{{ item.produceNo }}</td></tr><tr><td class="lableBodytdleft">数量:</td><td class="lableBodytdright">{{ item.quantity }}</td></tr><tr><td class="lableBodytdleft">规格:</td><td class="lableBodytdright lableBodytdrightfont">{{ item.platingSpecs }}</td></tr><tr><td class="lableBodytdleft">供应商:</td><td class="lableBodytdright">东莞点金</td></tr><tr><td class="lableBodytdleft">生产日期:</td><td class="lableBodytdright">{{moment(String(item.createTime)).format('YYYY/MM/DD')}}</td></tr><tr><td class="lableBodytdleft">批次单号:</td><td class="lableBodytdright">{{ item.lot }}</td></tr><tr><td class="lableBodytdleft">单重:</td><td class="lableBodytdright">{{ item.singleWeight }}</td></tr><tr><td class="lableBodytdleft">总重:</td><td class="lableBodytdright">{{ item.sumWeight }}</td></tr><tr><td class="lableBodytdleft">标识人:</td><td class="lableBodytdright"></td></tr></tbody></table></div></div></el-card></div></el-col></el-row><template #footer><span class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button style="background-color:red;color:white" @click="print">打 印</el-button></span></template> </el-dialog></div>
</template>

Typescript代码:

printrow 方法中使用nextTick是当el-dialog弹窗DOM加载完成后在调用PrintJS获取需要打印的区域,这个直接打印过程其实会先弹窗然后DOM加载完成后直接调用浏览器打印界面,后面把弹出关闭,如果不加载el-dialog可以通过动态加载html内容来实现直接打印,我这里图方便就用该方法实现了。

printJS({printable:区域id,type:打印类型(pdf\image\html等),style:打印内容的CSS样式})

注意:style参数值按打印区域的HTMLCSS样式构建,调用printJS设置scanStyles:false不会自动加载HTML的CSS样式需要重新给Style参数赋值所以增加了一个printStyle函数,scanStyles默认值是true(会导致打印界面的内容奇奇怪怪,还没去了解详细原因哈哈哈哈)

<script lang="ts" setup>
import { ref,reactive,nextTick } from 'vue';
import { TbProduceOrderNoInfo } from '/@/api-services';
import printJS from 'print-js';
import moment from 'moment';
const props=defineProps({title:String
})const state=reactive({isShowDialog:false,Datas:[] as Array<TbProduceOrderNoInfo>,
})const emits = defineEmits(['handleQuery']);
const closeDialog=()=>{emits('handleQuery');state.isShowDialog=false;
}const cancel=()=>{state.isShowDialog=false;closeDialog();
}//预览+打印
const openDialog=async(row:any)=>{state.Datas=JSON.parse(JSON.stringify(row));state.isShowDialog=true;
}const print=()=>{for(var i=0;i<state.Datas.length;i++){printJS({printable:`${state.Datas[i].id}`,type:"html",style:printStyle(),scanStyles:false})}
}//直接打印不预览
const printrow=async(row:any)=>{state.Datas=JSON.parse(JSON.stringify(row));state.isShowDialog=true;//主界面form DOM加载完成nextTick(()=>{//弹窗加载完成nextTick(()=>{printJS({printable:`${state.Datas[0].id}`,type:"html",style:printStyle(),scanStyles:false})state.isShowDialog=false;})})
}//打印界面的CSS样式
const printStyle=()=>{return `
.labelHeadBody{display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%; height:45px
}
.labelHeadBodyLeftHead{width: 30px;
}
.labelHeadBodyRightHead{width: 250px; height: 70px;display: flex;justify-content: center;
}
.lableBodytdrightfont{font-size:10px
}
.labelHeadBodyRightHeadTd{padding: 0;font-size: 14px;font-weight: bold;text-align: center;vertical-align: middle;
}
.labelBody{margin-left: 5px;margin-right: 5px;
}
.lableBodytdleft{width: 30%;font-weight: bold;vertical-align: bottom;}.lableBodytdright{width: 70%; border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{width: 70px; height: 40px
}
.tableHead{height: 20px;
}`;
}//预览、直接打印
defineExpose({openDialog,printrow})
</script>

标签前端样式代码:

<style>
.labelHeadBody{display: flex;justify-content:space-between;margin: 0; font-size: 16px;width: 100%;
}
.labelHeadBodyLeftHead{width: 30px;
}
.labelHeadBodyRightHead{width: 250px; height: 70px;display: flex;justify-content: center;
}.labelHeadBodyRightHeadTd{padding: 0;font-size: 14px;font-weight: bold;text-align: center;vertical-align: middle;
}
.labelBody{margin-top: 10px;margin-left: 5px;margin-right: 5px;
}
.lableBodytdleft{width: 30%;font-weight: bold;vertical-align: bottom;}
.lableBodytdright{width: 75%; border-bottom: 1px solid;
}
.labelHeadBodyLeftHeadimage{width: 80px; height: 55px
}
.tableHead{height: 20px;
}
</style>

最后,如果需要带二维码的同学可以添加qrcode组件,以下是简单的实现(el-image、img标签中图片不显示的问题还没解决,迂回操作直接把生成的二维码图片设置成控件背景来处理,囧.........):

<template #default="scope"><div :style="createQrcode(scope.row.eqNo)" ></div><!-- <el-image :scr="createQrcode1(scope.row.eqNo)" style="width: 60px;height: 60px;"></el-image> -->
</template>import QRCode from 'qrcode'//将生成的二维码设置成div的Style,不知道为嘛el-image绑定base64image图片不显示
const createQrcode=(text:string)=>{if(text==""||text==undefined||text==null) return "";let url1:any;url1="";  QRCode.toDataURL(text,(err,url)=>{if(err){console.error(err);}else{url1=url;}})return `background-image: url(${url1});background-position: center center;background-size: contain;background-repeat: no-repeat;;width:100%;height:60px`;
}

相关文章:

Vue3+TypeScript+printjs 实现标签批量打印功能

前言&#xff1a;临时性需求没怎么接触过前端&#xff0c;代码实现有问题及优化点希望大佬可以留言告知一下 开发工具&#xff1a;VS CODE 界面开发&#xff1a;Vue3TypeScriptElementPlus 打印组件&#xff1a;Print-JS 前端打印入口图&#xff1a; 标签页面&#xff1a; …...

微信文件如何直接打印及打印功能在哪里设置?

在数字化时代&#xff0c;打印需求依旧不可或缺&#xff0c;但传统打印店的高昂价格和不便操作常常让人头疼。幸运的是&#xff0c;琢贝打印作为一款集便捷、经济、高效于一体的网上打印平台&#xff0c;正逐渐成为众多用户的首选。特别是通过微信小程序下单&#xff0c;更是让…...

dataX -20240804-master分支

1、相关报错 Error: java.io.IOException: java.lang.RuntimeException: ORC split generation failed with exception: org.apache.orc.impl.SchemaEvolution$IllegalEvolutionException: ORC does not support type conversion from file type struct<nanos:int> (10)…...

【网络】传输层

传输层 一、预备知识1、端口号1、端口号范围划分2、知名端口号3、两个问题4、netstat && iostate5、pidof6、谈下面协议始终铭记两个问题 二、UDP协议&#xff08;简单&#xff09;1、UDP协议端格式2、UDP的特点3、面向数据报4、UDP缓冲区 三、TCP协议&#xff08;重点…...

学生管理系统之更新和删除、筛选

学生管理系统之更新和删除 建立新的窗口 添加组件 进行布局 使用Widget把二个放在一块,作为一列,然后全选进行栅格布局,最后添加弹簧进行微调。 编写增加的槽函数 在主函数中调用对话框...

教您一键批量下载拼多多批发图片信息,节省时间

图片是电商的核心展示手段&#xff0c;高质量、吸引人的图片能显著提升商品吸引力&#xff0c;增强用户体验&#xff0c;促进购买决策。良好的视觉呈现有助于品牌形象的塑造&#xff0c;提高转化率和客户满意度&#xff0c;对电商平台的流量和销售业绩具有直接影响。 使用图快…...

基于微信小程序的微课堂笔记的设计与实现(源码+论文+部署讲解等)

博主介绍&#xff1a;✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍&#xff1a;我是程序员阿龙&#xff…...

去噪扩散恢复模型

去噪扩散恢复模型 Bahjat Kawar 计算机科学系 以色列海法理工学院 bahjat.kawarcs.technion.ac.il Michael Elad 计算机科学系 以色列海法理工学院 eladcs.technion.ac.il Stefano Ermon 计算机科学系 美国加利福尼亚州斯坦福大学 ermoncs.stanford.edu …...

Stable Diffusion 官方模型V1.5版本下载

模型描述 Stable Diffusion的官方模型更适合绘制偏写实的风格&#xff0c;如果您想绘制二次元之类的风格&#xff0c;可以考虑下载本站的其它模型。 安装方法 将模型下载后&#xff0c;将会得到一个名为****.ckpt格式的文件&#xff0c;将该文件剪切至你的Stable Diffusion本…...

【算法】双指针-OJ题详解1

双指针-OJ题 移动零&#xff08;点击跳转&#xff09;原理讲解代码实现 复写零&#xff08;点击跳转&#xff09;原理讲解代码实现 快乐数&#xff08;点击跳转&#xff09;原理讲解代码实现 盛最多水的容器&#xff08;点击跳转&#xff09;原理讲解代码实现 有效三角形的个数…...

29 两个任务切换(1)

1 这里涉及到进程的切换与之前的 特权级的切换还是不一样的。 2 给每个进程 在 GDT表中&#xff0c;分配一个 TSS&#xff0c; 这个TSS中 保存着这个进程 所用到的 通用寄存器段寄存器 3个可能的栈&#xff0c; 当进行 进程切换的时候&#xff0c;就是切换到 另一个 TSS表&am…...

正则表达式概述

一、正则表达式概述 正则表达式&#xff08;Regular Expression&#xff0c;简称regex或regexp&#xff09;是一种强大的文本处理工具&#xff0c;它使用一种特定的模式来描述和匹配一系列符合某个句法规则的字符串。在Python中&#xff0c;我们可以使用re模块来操作正则表达式…...

【C语言】Top K问题【建小堆】

前言 TopK问题&#xff1a;从n个数中&#xff0c;找出最大&#xff08;或最小&#xff09;的前k个数。 在我们生活中&#xff0c;经常会遇到TopK问题 比如外卖的必吃榜&#xff1b;成单的前K名&#xff1b;各种数据的最值筛选 问题分析 显然想开出40G的空间是不现实的&#…...

Rust 程序设计语言学习——并发编程

安全且高效地处理并发编程是 Rust 的另一个主要目标。并发编程&#xff08;Concurrent programming&#xff09;&#xff0c;代表程序的不同部分相互独立地执行&#xff0c;而并行编程&#xff08;parallel programming&#xff09;代表程序不同部分同时执行&#xff0c;这两个…...

联邦学习研究综述【联邦学习】

文章目录 0 前言机器学习两大挑战&#xff1a; 1 什么是联邦学习&#xff1f;联邦学习的一次迭代过程如下&#xff1a;联邦学习技术具有以下几个特点&#xff1a; 2 联邦学习的算法原理目标函数本地目标函数联邦学习的迭代过程 3 联邦学习分类横向联邦学习纵向联邦学习联邦迁移…...

深入理解Python中的列表推导式

深入理解Python中的列表推导式 在Python编程中,列表推导式(List Comprehension)是一种简洁而强大的语法,用于创建和操作列表。它不仅提高了代码的可读性,还能显著减少代码的行数。本文将详细介绍什么是列表推导式,如何使用它,以及一些实际应用示例,帮助读者更好地理解…...

Android 实现左侧导航栏:NavigationView是什么?NavigationView和Navigation搭配使用

目录 1&#xff09;左侧导航栏效果图 2&#xff09;NavigationView是什么&#xff1f; 3&#xff09;NavigationView和Navigation搭配使用 4&#xff09;NavigationView的其他方法 一、实现左侧导航栏 由于Android这边没有直接提供左侧导航栏的控件&#xff0c;所以我尝试了…...

如何快速下载拼多多图片信息,效率高

图片是电商吸引顾客的关键因素&#xff0c;高质量的商品图片能提升产品吸引力&#xff0c;增强用户购买欲望。良好的视觉展示有助于建立品牌形象&#xff0c;提高转化率。同时&#xff0c;图片也是商品信息的主要传递媒介&#xff0c;对消费者决策过程至关重要。 使用图快下载器…...

windows 10下,修改ubuntu的密码

(1)在搜索框里面输入cmd&#xff0c;然后点击右键&#xff0c;选择管理员打开 Microsoft Windows [版本 10.0.22631.3880] (c) Microsoft Corporation。保留所有权利。 C:\Windows\System32>C: C:\Windows\System32>cd ../../ C:\>cd Users\ASUS\AppData\Local\Micros…...

【MySQL】慢sql优化全流程解析

定位慢sql 工具排查慢sql 调试工具&#xff1a;Arthas运维工具&#xff1a;Skywalking 通过以上工具可以看到哪个接口比较慢&#xff0c;并且可以分析SQL具体的执行时间&#xff0c;定位到哪个sql出了问题。 启用慢查询日志 慢查询日志记录了所有执行时间超过指定参数(lon…...

RabbitMQ高级特性 - 消息分发(限流、负载均衡)

文章目录 RabbitMQ 消息分发概述如何实现消费分发机制&#xff08;限制每个队列消息数量&#xff09;使用场景限流背景实现 demo 非公平发送&#xff08;负载均衡&#xff09;背景实现 demo RabbitMQ 消息分发 概述 RabbitMQ 的队列在有多个消费者订阅时&#xff0c;默认会通过…...

信号处理——自相关和互相关分析

1.概括 在信号处理中&#xff0c;自相关和互相关是相关分析非常重要的概念&#xff0c;它们能分析一个信号或两个信号在时间维度的相似性&#xff0c;在振动测试分析、雷达测距和声发射探伤得到了广泛的应用。自相关分析的研究对象为一个信号&#xff0c;互相关分析的研究对象…...

如何解决部分设备分辨率不适配

1&#xff09;如何解决部分设备分辨率不适配 2&#xff09;Unity中如何实现草的LOD 3&#xff09;使用了Play Asset Delivery提交版本被Google报错 4&#xff09;如何计算弧线弹道的落地位置 这是第396篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热门话题&#xff0c;…...

C#插件 调用存储过程(输出参数类型)

存储过程 CREATE PROCEDURE [dbo].[GetSum]num1 INT,num2 INT,result INT OUTPUT AS BEGINselect result num1 num2 END C#代码 using Kingdee.BOS; using Kingdee.BOS.App.Data; using Kingdee.BOS.Core.Bill.PlugIn; using Kingdee.BOS.Util; using System; using System.…...

代码随想录算法训练营day32 | 509. 斐波那契数 、70. 爬楼梯 、746. 使用最小花费爬楼梯

碎碎念&#xff1a;开始动态规划了&#xff01;加油&#xff01; 参考&#xff1a;代码随想录 动态规划理论基础 动态规划常见类型&#xff1a; 动规基础类题目背包问题打家劫舍股票问题子序列问题 解决动态规划问题应该要思考清楚的&#xff1a; 动态规划五部曲&#xff1…...

【人工智能专栏】Learning Rate Decay 学习率衰减

Learning Rate Decay 学习率衰减 使用格式 optimizer = torch.optim.SGD(model.paraters(), lr=0.1, momentum=0.9, weight_decay=1e-4) scheduler = torch.optim...

浙大版《C语言程序设计(第3版)》题目集

练习4-11 统计素数并求和 本题要求统计给定整数M和N区间内素数的个数并对它们求和。 输入格式: 输入在一行中给出两个正整数M和N&#xff08;1≤M≤N≤500&#xff09;。 输出格式: 在一行中顺序输出M和N区间内素数的个数以及它们的和&#xff0c;数字间以空格分隔。 输入…...

【学习笔记】Day 2

一、进度概述 1、inversionnet_train_light 试运行——未成功 2、DL-FWI基础入门培训-1,2&#xff0c;以及作业1的完成——暂未完成作业 二、详情 1、inversionnet_train_light 试运行 在补充完相关依赖后&#xff0c;运行仍有报错 产生原因&#xff1a;这个代码在当…...

Java中的Map(如果想知道Java中有关Map的知识点,那么只看这一篇就足够了!)

前言&#xff1a;在Java编程语言中&#xff0c;集合框架&#xff08;Collection Framework&#xff09;提供了一系列用于存储和操作数据的接口和类。其中&#xff0c;Map和Set是两个非常重要的接口&#xff0c;分别用于存储键值对和无重复元素的集合。 ✨✨✨这里是秋刀鱼不做梦…...

裸金属服务器详解

在云计算飞速发展的今天&#xff0c;裸金属服务器&#xff08;Bare Metal Server, BMS&#xff09;作为一种兼具传统物理服务器性能和虚拟化服务优势的计算资源&#xff0c;正逐渐成为企业和个人用户的重要选择。今天我们就来了解下关于裸金属服务器的定义、核心特点以及其在各…...

招远网站建设价格/百度一下你知道主页官网

存储过程能够用来提高数据库的查询效率。由于它事先被编译过。被储存于内存中&#xff0c;每次执行前。不必被从新编译&#xff0c;所以效率非常高。存储过程是一组sql增删改查的集合&#xff0c;假设程序中的一个功能涉及到对数据库的多次操作。那么就能够事先编译好存储过程。…...

网站建设实验分析/今天新闻头条最新消息

string类型&#xff1a; 添加、修改数据 mset key1 value1 key2 value2 [.....]获取数据 mget key1 key2 key3[....]获取字符的大小 strlen key追加信息到原始信息后部 append key value设置数据增加指定范围的值 incr key incrby key increment incrbyfloat key increme…...

学校网站建设情况说明/有哪些网络营销公司

题目描述&#xff1a; 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数appendTail和deletedHead,分别完成在队列尾部插入节点和在队列头部删除节点的功能。 分析&#xff1a; 我们通过一个具体的例子来分析该队列插入和删除元素的过程。首先插入一个元…...

wordpress微信插件/什么是网站推广?

width和height默认都是auto自动伸缩的&#xff0c;但不同的标签效果却不一样比如div默认是width:100%,通常不用写100%如果是table&#xff0c;如果div内的table没有设定100%&#xff0c;那就是最小值&#xff0c;以td为准&#xff0c;td没设宽度的话&#xff0c;就以td的内容自…...

wordpress伪静/优化搜索曝光次数的方法

mysql中的一个库表&#xff0c;有十万条数据&#xff0c;用ibator操纵数据库&#xff0c;在分页查询的时候&#xff0c;报错&#xff0c;错误信息如下&#xff1a;ERROR-Servlet.service()forservletdefaultthrewexceptionjava.lang.OutOfMemoryErro...mysql中的一个库表&#…...

网站空间 阿里云/超链接友情外链查询

1. 可以给用户一个链接&#xff0c;提示在浏览器打开并下载; 2.如果希望保存在本地&#xff0c;这个几乎不可能&#xff0c;但是可以让后端将pdf转换成png长图&#xff0c;保存到相册; 3. wx.openDocment({filePath: filePath,fileType: pdf,showMenu: true, // 添加该属性,…...