快捷導(dǎo)航

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

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

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

前言

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

一、前期準(zhǔn)備

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

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

npm create vite@latest

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

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

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

cd demo0-happy

1.2 安裝所需的依賴

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

將使用qrcode庫來生成二維碼，使用bwip-js來生成條形碼?？梢酝ㄟ^以下命令安裝它們：

npm install qrcode bwip-js

二、環(huán)境檢查

首先，請確保已經(jīng)安裝了Node.js和Vue CLI。如果還未安裝，可以通過以下命令進(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中使用二維碼組件

打開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', // 條形碼類型
    text: text.value,
    scale: 3, // 縮放比例
    height: 10, // 條形碼高度
    includetext: true, // 是否包括文本
    textxalign: 'center' // 文本對齊方式
    
  })
}
</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組件,此時會將之前的二維碼的一并導(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>