【前端vue生成二维码和条形码——MQ】

---

前端vue生成二维码和条形码——MQ

一、安装所需要的库

1、安装qrcode

1.1 使用npm安装脚本

npm install qrcode --save

2、安装jsbarcode

2.1 使用npm安装脚本

npm install jsbarcode --save

二、使用步骤

1、二维码生成

<script setup>
import QRCode from 'qrcode'
// 生成二维码的函数
const generateQRCode = (text) => {
  const dom = document.querySelector('#qrcodeCanvas');
  if (dom) {
    QRCode.toCanvas(dom, text, {
      width: 200,  // 二维码宽度 定位px
      margin: 2,   // 外边距
    }, (error) => {
      if (error) {
        console.error(error);
      } else {
        console.log('二维码创建成功');
      }
    });
  }
};

</script>

<template>

  <button @click="generateQRCode('https://blog.youkuaiyun.com/weixin_42588676')">生成二维码</button>
  <!-- 用于显示二维码 -->
  <canvas id="qrcodeCanvas"></canvas>
  
</template>

<style scoped></style>

2、条形码生成

<script setup>
import JsBarcode from 'jsbarcode'
// 生成条形码(code128)的函数
const generateBarcode = (text) => {
  const dom = document.querySelector(`#svg-barcode`);
  if (dom) {
    JsBarcode(dom, text, {
      format: 'CODE128', // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等
      lineColor: '#000', // 条形码颜色
      width: 3, // 每个条形的宽度
      height: 100, // 条形码的高度
      displayValue: false, // 是否显示文本
      fontSize: 18, // 字体大小
      margin: 10, // 增加边距
    });
  }
};
</script>

<template>

  <button @click="generateBarcode('5201314')">生成条形码</button>
  <!-- 用于显示条形码的svg 这里必须是用svg 用canvas会很小而且扫描不好-->
  <svg style="width: 630rpx; height: 134rpx;margin-top: 20rpx" :id="`svg-barcode`"></svg>

</template>

<style scoped></style>

--------------------------------------------------------------------------------------------------------------------------------------------

至此，大功告成！