Vue3 之 JsBarcode打印条形码

在Vue 3中，你可以使用JsBarcode库来生成并打印条形码。首先，确保安装了JsBarcode：

npm install jsbarcode

然后，在你的Vue组件中，你可以这样使用JsBarcode：

<template>
  <div>
    <canvas ref="barcodeCanvas"></canvas>
    <button @click="printBarcode">打印条形码</button>
  </div>
</template>
 
<script>
import JsBarcode from 'jsbarcode';
 
export default {
  methods: {
    generateBarcode(code) {
      JsBarcode(this.$refs.barcodeCanvas, code, {
        format: 'CODE128', // 选择适合你数据的编码格式
        lineColor: '#0aa',
        width: 2,
        height: 100,
      });
    },
    printBarcode() {
      const canvas = this.$refs.barcodeCanvas;
      const img = canvas.toDataURL('image/png');
      const printWindow = window.open('', '_blank');
      printWindow.document.write('<img src="' + img + '">');
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    }
  },
  mounted() {
    this.generateBarcode('123456789012');
  }
};
</script>

在这个例子中，我们首先在模板中定义了一个canvas元素，用于绘制条形码。然后，在generateBarcode方法中，我们使用JsBarcode生成条形码并将其绘制在canvas上。printBarcode方法打开一个新窗口，将条形码图片写入，然后调用打印方法来打印图片。