使用Vue3生成二维码和条形码详细图文教程

npm create vite@latest

cd demo0-happy

npm install qrcode bwip-js

npm install @vue/cli

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

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

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

<style scoped>
</style>

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

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

npm run dev