vue生成条形码和二维码并打印

---

前言

最近有一个需求，需要将产品信息生成标签，每个信息生成一个条形码，拿到所有数据生成二维码，最后打印标签。

---

一、生成条形码

使用jsbarcode，直接install，然后写这么一个组件，直接在页面引入，传入参数和内容即可，方便拓展和后期使用

<template>
    <svg :width="width" :height="height" :fontSize="fontSize" :displayValue="displayValue" :margin="margin" ref="barcode"></svg>
</template>
  
  <script>
  import JsBarcode from 'jsbarcode'
  
  export default {
    props: {
        value: {
            type: String,
            required: true
        },
        width: {
            type: Number,
            default: 2
        },
        height: {
            type: Number,
            default: 20
        },
        fontSize:{
            type: Number,
            default: 10
        },
        margin:{
            type: Number,
            default: 0
        },
        displayValue:{
            type: Boolean,
            default: true
        }
    },
    mounted() {
      JsBarcode(this.$refs.barcode, this.value, {
        width: this.width,
        height: this.height,
        fontSize:this.fontSize,
        displayValue:this.displayValue,
        margin:this.margin
      })
    }
  }
  </script>

二、生成二维码

同样是安装依赖直接写组件：

<template>
  <canvas  :width="width" :height="height" :fontSize="fontSize" ref="qrcode"></canvas>
</template>
  
  <script>
  import QRCode from 'qrcode';
  
  export default {
    name: 'QRCodeGenerator',
    props: {
      width: {
        type: Number,
        default: 20
      },
      height: {
        type: Number,
        default: 20
      },
      fontSize: {
        type: Number,
        default: 10
      },
      content: {
        type: String,
        required: true
      }
    },
    mounted() {
      this.generateQRCode();
    },
    methods: {
      generateQRCode() {
        const canvas = this.$refs.qrcode;
        const ctx = canvas.getContext('2d');
  
        // Set canvas size
        canvas.width = this.width;
        canvas.height = this.height;
  
        // Generate QR Code
        QRCode.toDataURL(this.content, {
          margin: 1,
          width: this.width,
          height: this.height,
          errorCorrectionLevel: 'H'
        }).then((url) => {
          // Draw QR Code on canvas
          const img = new Image();
          img.src = url;
          img.onload = () => {
            ctx.drawImage(img, 0, 0, this.width, this.height);
  
            // Add text below QR Code
            ctx.fillStyle = '#000000';
            ctx.font = `16px ${this.font}`;
            ctx.textAlign = 'center';
            ctx.fillText(this.content, this.width / 2, this.height + 20);
          };
        });
      }
    }
  };
  </script>

三、效果图

在标签中使用组件生成标签，截图部分

四、打印

1、直接安装依赖，使用vue-print-nb

2、全局引入使用

import Print from "vue-print-nb";

Vue.use(Print);

3、在打印的内容中添加一个id

<el-table id="printBox"> ......

4、添加按钮绑定v-print

 <el-button
  	size="small"
    type="success"
    icon="el-icon-printer"
    style="margin-right:40px;float:right;"
    v-print="'#printBox'"
    @click="printTag"
  >
      打印
  </el-button>

5、点击按钮打印就能出现打印预览页面啦，就可以去配置打印机打印啦…

---