当前位置：首页 > VUE

vue实现条码打印

2026-03-29 12:17:14VUE

使用Vue实现条码打印

在Vue项目中实现条码打印功能，可以通过集成第三方库生成条码，再结合浏览器的打印功能完成打印。以下是具体实现方法：

安装条码生成库

推荐使用jsbarcode库生成条码，支持多种条码格式（如CODE128、EAN、UPC等）。安装命令如下：

npm install jsbarcode @types/jsbarcode --save

生成条码组件

创建一个Vue组件用于生成和显示条码：

vue实现条码打印

<template>
  <div>
    <svg ref="barcode"></svg>
    <button @click="printBarcode">打印条码</button>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode';

export default {
  props: {
    barcodeValue: {
      type: String,
      required: true
    }
  },
  mounted() {
    this.generateBarcode();
  },
  methods: {
    generateBarcode() {
      JsBarcode(this.$refs.barcode, this.barcodeValue, {
        format: "CODE128",
        lineColor: "#000",
        width: 2,
        height: 100,
        displayValue: true
      });
    },
    printBarcode() {
      window.print();
    }
  },
  watch: {
    barcodeValue() {
      this.generateBarcode();
    }
  }
};
</script>

<style>
@media print {
  body * {
    visibility: hidden;
  }
  svg, svg * {
    visibility: visible;
  }
  svg {
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>

使用组件

在父组件中使用条码组件：

<template>
  <div>
    <BarcodePrinter :barcode-value="barcodeText" />
  </div>
</template>

<script>
import BarcodePrinter from './BarcodePrinter.vue';

export default {
  components: {
    BarcodePrinter
  },
  data() {
    return {
      barcodeText: "123456789012"
    };
  }
};
</script>

打印样式优化

通过CSS媒体查询优化打印效果，确保只打印条码部分：

vue实现条码打印

@media print {
  body * {
    visibility: hidden;
  }
  .barcode-container, .barcode-container * {
    visibility: visible;
  }
  .barcode-container {
    position: absolute;
    left: 0;
    top: 0;
  }
}

其他条码格式

如需生成其他格式条码，修改format参数即可：

JsBarcode(this.$refs.barcode, this.barcodeValue, {
  format: "EAN13", // 改为EAN13格式
  // 其他配置...
});

服务端打印方案

如需更复杂的打印控制，可考虑以下方案：

使用html2canvas将条码转为图片
通过后端服务生成PDF或直接连接打印机
调用系统打印对话框时隐藏非条码内容

import html2canvas from 'html2canvas';

// 转为图片后打印
html2canvas(this.$refs.barcode).then(canvas => {
  const dataUrl = canvas.toDataURL();
  const win = window.open();
  win.document.write(`<img src="${dataUrl}" onload="window.print()">`);
});

以上方法可根据实际需求选择，浏览器打印方案适合简单场景，服务端方案适合需要精确控制打印参数的场景。