在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方法打开一个新窗口，将条形码图片写入，然后调用打印方法来打印图片。