当前位置：首页 > news >正文

前端生成二维码 + 条形码

news 来源：原创 2025/6/5 0:30:33

二维码采用的是qrcode

条形码采用的是jsbarcode

一、安装插件

npm install qrcode --save

npm install jsbarcode --save

二、准备容器

<canvas id="qrcodeCanvas"></canvas> <!-- 用于显示二维码 -->


<!-- 用于显示条形码的 svg   这里必须是用svg 用canvas会很小而且扫描不好-->
    <svg style="width: 630rpx; height: 134rpx;
         margin-top: 20rpx" :id="`svg-${item.hyxh}`">
    </svg>

三、准备函数

import QRCode from 'qrcode';
const text ='内容或网址'
const dom = document.querySelector('#qrcodeCanvas');
// 生成二维码的函数
    const generateQRCode = (text: string) => {
      if (dom) {
        QRCode.toCanvas(dom, text, {
          width: 200,  // 二维码宽度 定位px
          margin: 2,   // 外边距
        }, (error) => {
          if (error) {
            console.error(error);
          } else {
            console.log('二维码生成成功');
          }
        });
      }
   };
//需要注意的是这里的dom 一定是canvas标签 如果使用uniapp需要 为 
//document.querySelector('#qrcodeCanvas canvas');
//因为uniapp会包一层

条形码

const dom = document.querySelector(`#svg-${item.hyxh}`);
    const text = item.mzhm;
    try {
      if (dom) {
        JsBarcode(dom, text, {
          format: 'CODE128', // 条形码格式，可以是 'EAN13', 'EAN8', 'CODE128', 'UPC', 'pharmacode'等等
          lineColor: '#000', // 条形码颜色
          width: 3, // 每个条形的宽度
          height: 100, // 条形码的高度
          displayValue: false, // 是否显示文本
          fontSize: 18, // 字体大小
          margin: 10, // 增加边距
        });
      } else {
        console.log('错误');
      }
    } catch (error) {
      console.log(error);
    }

//这里是因为我是一个列表都需要条形码 format: 'CODE128' 一般使用这个就可以了
//这个也是要dom为svg 不过uniapp的svg没有嵌套一层所以可以直接使用