文章目錄

• 前言
• 一、生成條形碼
• 二、生成二維碼
• 三、效果圖
• 四、打印

---

前言

最近有一個需求，需要將產(chǎn)品信息生成標簽，每個信息生成一個條形碼，拿到所有數(shù)據(jù)生成二維碼，最后打印標簽。

---

一、生成條形碼

使用jsbarcode，直接install，然后寫這么一個組件，直接在頁面引入，傳入?yún)?shù)和內容即可，方便拓展和后期使用

<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>

5、點擊按鈕打印就能出現(xiàn)打印預覽頁面啦，就可以去配置打印機打印啦…

---

總結

以上是生活随笔為你收集整理的vue生成条形码和二维码并打印的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。