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 = 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插件的集成过程，希望对你有帮助。