二维码工具

本文档介绍二维码生成工具的使用方法。

QRCodeUtils

二维码工具类，支持生成、下载二维码。

生成二维码

import { QRCodeUtils } from '@vben/utils';

// 生成二维码（返回 Data URL）
const qrCode = await QRCodeUtils.generate({
  text: 'https://example.com',
  width: 200,
  height: 200
});

// 在 img 标签中显示
<img :src="qrCode" alt="QR Code" />

生成带 Logo 的二维码

import { QRCodeUtils } from '@vben/utils';

const qrCode = await QRCodeUtils.generate({
  text: 'https://example.com',
  width: 300,
  height: 300,
  logo: '/logo.png',
  logoWidth: 60,
  logoHeight: 60
});

下载二维码

import { QRCodeUtils } from '@vben/utils';

// 生成并下载
await QRCodeUtils.download({
  text: 'https://example.com',
  filename: '二维码.png'
});

自定义样式

import { QRCodeUtils } from '@vben/utils';

const qrCode = await QRCodeUtils.generate({
  text: 'https://example.com',
  width: 300,
  height: 300,
  colorDark: '#000000',    // 前景色
  colorLight: '#ffffff',   // 背景色
  correctLevel: 'H'        // 容错级别：L/M/Q/H
});

使用 qrcode 库

import QRCode from 'qrcode';

// 生成 Data URL
const dataUrl = await QRCode.toDataURL('https://example.com');

// 生成 Canvas
const canvas = document.getElementById('canvas');
await QRCode.toCanvas(canvas, 'https://example.com');

// 自定义选项
const dataUrl = await QRCode.toDataURL('https://example.com', {
  width: 300,
  margin: 2,
  color: {
    dark: '#000000',
    light: '#ffffff'
  },
  errorCorrectionLevel: 'H'
});

完整示例

<script setup lang="ts">
import { ref } from 'vue';
import { QRCodeUtils } from '@vben/utils';
import { message } from 'ant-design-vue';

const inputText = ref('https://example.com');
const qrCodeUrl = ref('');
const qrCodeSize = ref(200);

async function handleGenerate() {
  try {
    qrCodeUrl.value = await QRCodeUtils.generate({
      text: inputText.value,
      width: qrCodeSize.value,
      height: qrCodeSize.value
    });
    message.success('生成成功');
  } catch (error) {
    message.error('生成失败');
  }
}

async function handleDownload() {
  try {
    await QRCodeUtils.download({
      text: inputText.value,
      width: qrCodeSize.value,
      height: qrCodeSize.value,
      filename: '二维码.png'
    });
    message.success('下载成功');
  } catch (error) {
    message.error('下载失败');
  }
}
</script>

<template>
  <div class="qrcode-demo">
    <a-space direction="vertical" style="width: 100%">
      <a-input
        v-model:value="inputText"
        placeholder="输入要生成二维码的内容"
      />
      
      <div>
        <span>尺寸：</span>
        <a-slider
          v-model:value="qrCodeSize"
          :min="100"
          :max="500"
          style="width: 200px; display: inline-block; margin-left: 10px"
        />
        <span style="margin-left: 10px">{{ qrCodeSize }}px</span>
      </div>
      
      <a-space>
        <a-button type="primary" @click="handleGenerate">
          生成二维码
        </a-button>
        <a-button @click="handleDownload">
          下载二维码
        </a-button>
      </a-space>
      
      <div v-if="qrCodeUrl" class="qrcode-preview">
        <img :src="qrCodeUrl" alt="QR Code" />
      </div>
    </a-space>
  </div>
</template>

<style scoped>
.qrcode-preview {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  text-align: center;
}

.qrcode-preview img {
  max-width: 100%;
}
</style>

二维码组件

<!-- QRCode.vue -->
<script setup lang="ts">
import { ref, watch } from 'vue';
import QRCode from 'qrcode';

interface Props {
  text: string;
  size?: number;
  colorDark?: string;
  colorLight?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: 200,
  colorDark: '#000000',
  colorLight: '#ffffff'
});

const qrCodeUrl = ref('');

async function generateQRCode() {
  try {
    qrCodeUrl.value = await QRCode.toDataURL(props.text, {
      width: props.size,
      margin: 2,
      color: {
        dark: props.colorDark,
        light: props.colorLight
      }
    });
  } catch (error) {
    console.error('生成二维码失败', error);
  }
}

watch(() => [props.text, props.size, props.colorDark, props.colorLight], () => {
  generateQRCode();
}, { immediate: true });
</script>

<template>
  <div class="qrcode-wrapper">
    <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="QR Code" />
  </div>
</template>

<!-- 使用组件 -->
<template>
  <QRCode
    text="https://example.com"
    :size="300"
    color-dark="#1890ff"
  />
</template>

API 参考

generate

生成二维码。

QRCodeUtils.generate(options: {
  text: string;
  width?: number;
  height?: number;
  colorDark?: string;
  colorLight?: string;
  correctLevel?: 'L' | 'M' | 'Q' | 'H';
  logo?: string;
  logoWidth?: number;
  logoHeight?: number;
}): Promise<string>

download

下载二维码。

QRCodeUtils.download(options: {
  text: string;
  width?: number;
  height?: number;
  filename?: string;
}): Promise<void>

容错级别

• L：约 7% 的错误修正能力
• M：约 15% 的错误修正能力（默认）
• Q：约 25% 的错误修正能力
• H：约 30% 的错误修正能力

容错级别越高，二维码越复杂，但可以容忍更多的损坏。

参考资源

• qrcode 文档
• 二维码规范