Vue3集成条形码插件-jsbarcode配合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 =