Vue3集成条形码插件-jsbarcode配合Lodop使用

文章目录

  • 前言
  • 一、安装
    • 效果图:
    • 实际集成遇到的问题
  • 二、组件完整代码
  • 三、Lodop的配合使用
  • 总结


前言

jsbarcode npm 直达 。
本文在Vue3的项目中集成条形码插件,目的是为了结合Lodop 打印插件实现table内嵌条形码的打印功能。


一、安装

pnpm install jsbarcode --save

在这里插入图片描述

效果图:

在这里插入图片描述
使用Lodop打印出来后如图:看起来条码有点模糊,但用扫码枪测试后,可以正确识别出来。这里建议空间足够的情况下,barcode间距设置大点。高度也设置大点。一个字就是要大!
在这里插入图片描述

实际集成遇到的问题

这里动态绑定是id 如图所示是 22222215 这样的,报错了,

在这里插入图片描述
改为 ‘barcode’ + 22222215 就不报错了,估计我的id命名不合法
在这里插入图片描述
新的问题是:我遍历第一个打印后,第二页的barcode没有更新,取的第一页的barcode。
在这里插入图片描述
这里我试探性的加多一句 await nextTick() 结果正常了。
在这里插入图片描述

二、组件完整代码

按实际的业务效果更改。

<template>
  <div>
    <svg :id="getCurBarcodeId"></svg>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive , nextTick , computed } from 'vue'
import JsBarcode from 'jsbarcode'
const props = defineProps({
  value: {
    type: String,
    default() {
      return ''
    }
  }
})

const variable = reactive({
  barCodeId: '',
})

const getCurBarcodeId = computed(() => {
  console.log('props.value',props.value)
    if(!props.value){
      return
  }
  return 'barcode' + String(props.value).substring(8);
})

onMounted(async () => {
    await nextTick();
    JsBarcode(`#${getCurBarcodeId.value}`, String(props.value), {
      format: "CODE128",//选择要使用的条形码类型
      width: 1.5,//设置条之间的宽度
      height: 70,//高度
      displayValue: true,//是否在条形码下方显示文字
//   text:"456",//覆盖显示的文本
//   fontOptions:"bold italic",//使文字加粗体或变斜体
//   font:"fantasy",//设置文本的字体
//   textAlign:"left",//设置文本的水平对齐方式
//   textPosition:"top",//设置文本的垂直位置
//   textMargin:5,//设置条形码和文本之间的间距
     fontSize: 15,//设置文本的大小
//   background:"#eee",//设置条形码的背景
//   lineColor:"#2196f3",//设置条和文本的颜色。
      margin: 15//设置条形码周围的空白边距
    })
    await nextTick();
})
</script>

三、Lodop的配合使用

Lodop的基础使用请看这一篇 《Vue3+hooks快速接入Lodop打印插件》。

以下是部分核心代码。

<template>
  <div class="app-container">
    <div :id="summaryPickingSlipTemplateId2" style="display: block">
      <table
        id="summaryTableId2"
        border="1"
        cellpadding="0"
        cellspacing="0"
        style="border: solid 1px black; width: 100%; text-align: center"
      >
        <thead>
          <tr>
            <th>No</th>
            <th>BarCode</th>
          </tr>
        </thead>
        <tbody style="height: 82%; width: 100%; padding: 3px">
          <tr v-for="(item, index) in variable.realPickingSlips" :key="item?.refNum">
            <td
              style="
                word-break: break-all;
                word-wrap: break-word;
                font-size: 10px;
                padding: 1px;
                min-height: 22px;
              "
              width="10%"
            >
              {{ index + 1 }}
            </td>
            <td style="word-break: break-all; word-wrap: break-word; font-size: 12px" width="35%">
              <js-barcode :value="item?.refNum" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { reactive, onMounted, onActivated, nextTick } from 'vue'
import _ from 'lodash'
import jsBarcode from '@/components/jsBarcode/index.vue'

const userStore = useUserStore()
const { printPickingSummaryA4Paper } = useLodop()

const props = defineProps({
  mainForm: {
    type: Object,
    default() {
      return {}
    }
  }
})

let variable = reactive({
  curObj : {},
})

let summaryPickingSlipTemplateId2 = 'summaryPickingSlipTemplateId2'
const printAction = (printData: any) => {
  return new Promise(async (resolve, reject) => {
    variable.curObj = printData
    await nextTick()
    const isPrintSuccss = await printPickingSummaryA4Paper({
      rawObj: variable.curObj,
      RefNumEnum: RefNumEnum.OCP,
      TableId: summaryPickingSlipTemplateId
    })
    resolve(!!isPrintSuccss)
  })
}


defineExpose({
  printAction,
  variable
})
</script>

<style lang="scss" scoped>
.packagesTab {
}
</style>


总结

本文主要讨论为了配合Lodop 在table中内嵌条形码,而引入jsbarcode插件的集成过程,希望对你有帮助。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

使用 C++23 协程实现第一个 co_yield 同步风格调用接口--Qt计算排列组合

上一篇介绍了 co_await 的例子。与 co_await 类似&#xff0c;在C23的协程特性里&#xff0c; co_yield 用于从协程执行过程中暂停&#xff0c;并返回值。这个功能乍一听起来很奇怪&#xff0c;网上的例子大多是用一个计数器来演示多次中断协程函数&#xff0c;返回顺序的计数值…

【Linux】head命令使用

head命令 head是一个在 Unix 和 Unix-like 操作系统中常用的命令行工具&#xff0c;用于输出文件的前 n 行。默认为 10&#xff0c;即显示 10 行的内容。 语法 head [options] [file(s)] head命令 -Linux手册页 选项及作用 执行令 &#xff1a; head --help 执行命令结果…

UGUISuperScrollView

UGUISuperScrollView v2.5.3 基于UGUI ScrollRect,UGUI超级滚动视图提供了易于自定义的滚动视图。它是一组C#脚本,可以帮助您创建所需的ScrollView。它功能强大,性能经过高度优化。 - 列表视图演示: 列表视图从上到下演示 列表视图从左到右演示 列表视图 选择 删除 演…

LabVIEW光偏振态转换及检测仿真系统

LabVIEW光偏振态转换及检测仿真系统 随着光学技术的发展&#xff0c;光偏振态的研究与应用越来越广泛。为了深入理解光的偏振现象&#xff0c;开发了一套基于LabVIEW的光偏振态转换及检测仿真系统。该系统不仅能够模拟线偏振光、圆偏振光、椭圆偏振光等不同偏振态的产生与转换…

【pytorch】函数记录

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 torch.sum()torch.argmax()torch.nn.Parametertorch.unbindtorch.optim.Adam()[^adam]torch.cattorch.unsqueeze()torch.normalize()[^l2]torch.eyetorch.mmto…

golang学习7,glang的web的restful接口结构体传参

接口&#xff1a; //POST请求 返回json 接口传参json r.POST("/postJson", controller.PostUserInfo) 1.定义结构体 //定义结构体 type Search struct {Id intName string }2.结构体传参 //结构体传参 func PostUserInfo(c *gin.Context) {search : &Searc…

SD-WAN专线加速效果如何?企业如何选择SD-WAN加速专线方案?

在数字化时代&#xff0c;企业的网络需求日益增长&#xff0c;对于网络性能和安全性的要求也越来越高。SD-WAN专线加速技术应运而生&#xff0c;成为企业提升网络效率和保障数据安全的重要工具。本文将探讨SD-WAN专线加速的效果&#xff0c;以及企业在选择SD-WAN加速专线方案时…

golang使用gorm操作mysql2

1.接口 //POST请求 db操作&#xff0c;新增数据r.POST("/add", controller.SaveUser) 2.接收前端传的参数并解析成结构化数据&#xff08;类似java的 json转为实体类属性&#xff09; package controllerimport ("gin/dao""github.com/gin-gonic/g…

node 之 http模块

1.什么是http模块 在网络节点中&#xff0c;负责消费资源的电脑叫做客户端&#xff1b;负责对外提供网络资源的电脑&#xff0c;叫做服务器 http模块是node.js官方提供的&#xff0c;用来创建web服务器的模块&#xff0c;通过http模块提供的http.createServer()方法&#xff0c…

java使用e签宝实现合同文件签名盖章

过程细节比较多&#xff0c;官网写得也不太明白&#xff0c;上面只是写了大概步骤&#xff0c;不懂的可以私聊 注意&#xff1a;测试沙箱环境时合同模板&#xff0c;模板上设置的填写表单&#xff08;也就是控件&#xff09;只能用官方提供的接口创建 切换正式后&#xff0c;可…

【JavaScript】面试手撕防抖

引入 防抖可是前端面试时最频繁考察的知识点了&#xff0c;首先&#xff0c;我们先了解防抖的概念是什么。咳咳。&#x1f440; 防抖&#xff1a; 首先它是常见的性能优化技术&#xff0c;主要用于处理频繁触发的浏览器事件&#xff0c;如窗口大小变化、滚动事件、输入框内容…

神经网络结构搜索(NAS)

华为诺亚AI系统工程实验室主任刘文志解读如何使用AutoML预测基站流量 - 知乎讲师介绍&#xff1a;刘文志&#xff08;花名风辰&#xff09;&#xff0c;华为诺亚AI系统工程实验室主任&#xff0c;异构并行计算专家&#xff0c;毕业于中国科学院研究生院&#xff0c;闻名于并行计…

2024Java大厂面试集合,java面试题库及答案

前言 Spring 也算有多年的历史了&#xff0c;已成为Java应用程序开发框架的事实标准。在如此悠久的历史背景下&#xff0c;有人可能会认为Spring放慢了脚步&#xff0c;躺在了自己的荣誉簿上&#xff0c;再也做不出什么新鲜的东西&#xff0c;或者是让人激动的东西。甚至有人说…

Django配置静态文件

Django配置静态文件 目录 Django配置静态文件静态文件配置调用方法 一般我们将html文件都放在默认templates目录下 静态文件放在static目录下 static目录大致分为 js文件夹css文件夹img文件夹plugins文件夹 在浏览器输入url能够看到对应的静态资源&#xff0c;如果看不到说明…

【Maven】Maven 基础教程(一):基础介绍、开发环境配置

Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置 1.Maven 是什么1.1 构建1.2 依赖 2.Maven 开发环境配置2.1 下载安装2.2 指定本地仓库2.3 配置阿里云提供的镜像仓库2.4 配置基础 JDK 版本2.5 配置环境变量 1.Maven 是什么 Maven 是 Apache 软件…

网安入门18-XSS(靶场实战)

HTML实体化编码 为了避免 XSS 攻击&#xff0c;会将<>编码为<与>&#xff0c;这些就是 HTML 实体编码。 编码前编码后不可分的空格 < (小于符号)< > (大于符号)> & (与符号)&amp;″ (双引号)&quot;’ (单引号)&apos;© (版权符…

栈和队列——c语言实现栈

本节复习栈和队列中栈的增删查改。 首先回顾一下栈的性质&#xff1a; 栈的存储数据的原则是“后入先出”&#xff0c; 先入的在栈底&#xff0c; 后入的在栈顶。 弹出数据时在栈顶弹出。 开始实现栈的接口 栈的所有函数接口 //栈的初始化 void StackInit(Stack* pst); //入栈…

Monkey测试必现ANR问题分析与解决

AAA项目Monkey测试必现ANR问题分析 【摘要】ANR(Application Not responding)&#xff0c;是指应用程序未响应&#xff0c;Android系统对于一些事件需要在一定的时间范围内完成&#xff0c;如果超过预定时间能未能得到有效响应或者响应时间过长&#xff0c;比如输入事件5s内未…

大模型日报|今日必读的7篇大模型论文

大家好&#xff0c;今日必读的大模型论文来啦&#xff01; 1.Sora综述&#xff1a;大型视觉模型的背景、技术、局限和机遇 Sora 是 OpenAI 于 2024 年 2 月发布的文生视频人工智能&#xff08;AI&#xff09;模型。经过训练&#xff0c;Sora 能根据文字说明生成逼真或富有想象…

2.27数据结构

1.链队 //link_que.c #include "link_que.h"//创建链队 Q_p create_que() {Q_p q (Q_p)malloc(sizeof(Q));if(qNULL){printf("空间申请失败\n");return NULL;}node_p L(node_p)malloc(sizeof(node));if(LNULL){printf("申请空间失败\n");return…