快捷導(dǎo)航

使用Vue3生成二維碼和條形碼詳細(xì)圖文教程

更新時(shí)間：2024年09月04日 08:54:33 作者：XError＿xiaoyu

在Vue項(xiàng)目和微信小程序中生成二維碼和條形碼是一個(gè)常見(jiàn)的需求,主要用于分享、產(chǎn)品識(shí)別等場(chǎng)景,這篇文章主要給大家介紹了關(guān)于使用Vue3生成二維碼和條形碼的相關(guān)資料,需要的朋友可以參考下

前言

在我剛接觸CSDN時(shí),便寫(xiě)下了第一篇使用python庫(kù)生成二維碼的博文,但是隨著學(xué)習(xí)的知識(shí)越來(lái)越多,實(shí)現(xiàn)同一個(gè)功能,但可以通過(guò)不同的方式得以實(shí)現(xiàn),本篇是通過(guò)Vue3和Vue的一些組件庫(kù)從而實(shí)現(xiàn)的一個(gè)小demo

一、前期準(zhǔn)備

1.1. 使用Vite創(chuàng)建工程化項(xiàng)目

這里可以在vscode或是其他的IDE,或是直接找一個(gè)合適的目錄,然后在cmd中即可

npm create vite@latest

輸入要?jiǎng)?chuàng)建的vue項(xiàng)目名,然后回車(chē),選擇Vue,然后回車(chē),這里我的項(xiàng)目名是demo0-happy

選擇自己想用的,不知道直接選js

進(jìn)入文件所處的目錄

cd demo0-happy

1.2 安裝所需的依賴(lài)

首先輸入npm i 也就是(npm install的縮寫(xiě))

將使用qrcode庫(kù)來(lái)生成二維碼，使用bwip-js來(lái)生成條形碼?？梢酝ㄟ^(guò)以下命令安裝它們：

npm install qrcode bwip-js

二、環(huán)境檢查

首先，請(qǐng)確保已經(jīng)安裝了Node.js和Vue CLI。如果還未安裝，可以通過(guò)以下命令進(jìn)行安裝：

npm install @vue/cli

三、生成二維碼

3.1 創(chuàng)建二維碼組件

在src/components目錄下創(chuàng)建QRCodeGenerator.vue文件，并添加以下代碼：

<script setup>
import { ref } from 'vue';
import QRCode from 'qrcode';

const text = ref('');
const qrCodeUrl = ref("");

async function generateQRCode() {
  try {
    qrCodeUrl.value = await QRCode.toDataURL(text.value);
  } catch (err) {
    console.error(err);
  }
}

</script>

<template>
  <div>
      <h2>二維碼生成器</h2>
      <input v-model="text" placeholder="輸入文本生成二維碼">
      <button @click="generateQRCode">生成二維碼</button>
      <div v-if="qrCodeUrl">
        <img :src="qrCodeUrl" alt="二維碼"/>
      </div>
    </div>
</template>

<style scoped>

</style>

3.2 在App.vue中使用二維碼組件

打開(kāi)src/App.vue文件，導(dǎo)入并使用QRCodeGenerator組件：

<script setup>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
</script>

<template>
  <div>
    <QRCodeGenerator></QRCodeGenerator>
    <hr>
  </div>
</template>

<style scoped>
</style>

四、生成條形碼

4.1 創(chuàng)建條形碼組件

在src/components目錄下創(chuàng)建BarcodeGenerator.vue文件，并添加以下代碼：

<script setup>
import bwipjs from 'bwip-js'
import { ref } from 'vue'

const text = ref('')
const barcodeCanvasRef = ref("")

function generateBarcode() {
  bwipjs.toCanvas(barcodeCanvasRef.value, {
    bcid: 'code128', // 條形碼類(lèi)型
    text: text.value,
    scale: 3, // 縮放比例
    height: 10, // 條形碼高度
    includetext: true, // 是否包括文本
    textxalign: 'center' // 文本對(duì)齊方式
    
  })
}
</script>

<template>
  <div>
    <h2>條形碼生成器</h2>
    <input v-model="text" placeholder="輸入文本生成條形碼" aria-label="輸入文本" />
    <button @click="generateBarcode" aria-label="生成條形碼">生成條形碼</button>
    <canvas ref="barcodeCanvasRef"></canvas>
  </div>
</template>

<style scoped>

</style>

4.2.在App.vue中使用條形碼組件

同樣，在src/App.vue中導(dǎo)入并使用BarcodeGenerator組件,此時(shí)會(huì)將之前的二維碼的一并導(dǎo)入：

<script setup>
import QRCodeGenerator from './components/QRCodeGenerator.vue'
import BarcodeGenerator from './components/BarcodeGenerator.vue'

</script>

<template>
  <div>
    <QRCodeGenerator></QRCodeGenerator>
    <hr>
    <BarcodeGenerator></BarcodeGenerator>
  </div>
</template>

<style scoped>
</style>