Vue2/Vue3 实现条形码生成(以及打印条形码踩坑)

前言:我写这篇博客是因为在我司业务打印中用到了条形码:而且坑还不少如果是单独展示就很简单

怎么舒服怎么来 在打印踩的坑我放到文章第三步和结束了

第一步:安装jsbarcode库 这个库vue2和vue3都兼容

npm install jsbarcode --save

第二步:在需要的页面进行引入

import JsBarcode from "jsbarcode";

第三步:创建条形码生成容器(有三种方法)

<!-- 第一种svg格式 优点清晰度高 缺点在面积小的纸张兼容性不好不能约束尺寸 不适用打印功能(天坑 踩过) -->
<svg id="svgcode"></svg>

<!-- 第二种img格式 优点适用打印页面能约束宽高 缺点清晰度低点 但是能扫出来  -->
<img id="imgcode" />

<!-- 第三种画布格式   不给予评价 我司目前没业务场景用过 -->  
<canvas id="canvascode"></canvas>  

第四步：有批量生成和单独生成功能 批量生成存放的容器必须要是唯一的

   //批量打印的渲染DOM结构(不需要可以直接跳过)
<div
   class="prinPage"
   v-for="(item, index) in prinList"
   :key="index">
  <img :id="'barcode-' + index"/>
</div>

let prinList = ref([]);
let getBarcode = () => {
  let options = {
    text: "编码内容",//等同于JsBarcode第二个参数 
    fontSize: 10,//条形码下方文字的大小
    height: 60,//条形码的高度
    width: 2.5,//条形码 条的宽度不是总体的宽度 (宽度过小 扫描枪会扫描不出来 天坑我踩过)
    displayValue: false,//隐藏条形码下方文本
  };
  // JsBarcode第一个参数是容器ID名 第二个参数是条形码扫描后的内容(默认条形码的内容会在条形码下方展示) 第三个参数是方法的配置项(具体配置查看官网)
  JsBarcode("#barcode", '5', options);
  //这个函数是实现批量生成的功能（没用可以删除）
  // prinList.value.forEach((item, index) => {
  //   options.text = item.order_number;
  //   options.order_number = item.order_number;
  //   JsBarcode("#barcode-" + index, '5', options);  挂载条形码方法 注意批量生成 容器必须是唯一的 且同时都要存在 思路容器加上循环的index即可
  // });
};
onMounted(() => {
  nextTick(() => {
    getBarcode(); //需要再真实DOM渲染完成后执行否则就会报错
  });
});

踩坑说明:与正常使用无关 可以跳过无碍

注意:在打印中使用条形码就不一样了 我们需要注意条形码容器的类型 可以回到第三步阅读

注意:条形码的内容会影响条形码的长度 内容文本越长 条形码宽度越宽

svg格式无法进行宽度约束 我也不知道为什么 一旦文本内容过长条形码就会溢出屏幕(踩坑)

解决方案:采用img格式放弃svg格式 约束img格式的宽高

我司用到的扫码枪是PDA 可以在扫描出电脑上的但是无法扫码打印纸上的(踩坑)

解决方案:options 的width配置项 不同打扫码枪能识别的条形码的条width宽度不一样

手机能识别出条形码但是PDA扫码枪识别不了(踩坑)

解决方案 在同样的条形码条宽度手机的条形码识别宽度要小于扫描枪的识别宽度 可以配置options 的width配置项来解决