前言

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

一、生成条形码

使用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 sizecanvas.width = this.width;canvas.height = this.height;// Generate QR CodeQRCode.toDataURL(this.content, {margin: 1,width: this.width,height: this.height,errorCorrectionLevel: 'H'}).then((url) => {// Draw QR Code on canvasconst img = new Image();img.src = url;img.onload = () => {ctx.drawImage(img, 0, 0, this.width, this.height);// Add text below QR Codectx.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-buttonsize="small"type="success"icon="el-icon-printer"style="margin-right:40px;float:right;"v-print="'#printBox'"@click="printTag">打印</el-button>