实现 二维码生成器 工具

分类：developer ｜ 标签：二维码、QR、生成 文本/网址生成二维码并下载 PNG

2.1 功能说明

文本/网址生成二维码并下载 PNG

2.1.1 使用指南

功能说明

将文本、网址、WiFi、名片等内容生成为二维码图片，可调整尺寸、边距、容错等级与颜色，并下载 PNG。

使用场景

活动签到、WiFi 分享、推广物料。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• gen()
• download()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref } from 'vue'
import QRCode from 'qrcode'
import ToolPageShell from '@/components/ToolPageShell.vue'

const text = ref('https://www.i91tools.com')
const size = ref(240)
const margin = ref(2)
const ec = ref('M')
const url = ref('')
const error = ref('')

function gen() {
  error.value = url.value = ''
  if (!text.value.trim()) return
  QRCode.toDataURL(text.value, { width: size.value, margin: margin.value, errorCorrectionLevel: ec.value })
    .then(u => { url.value = u })
    .catch(e => { error.value = e.message })
}
function download() {
  if (!url.value) return
  const a = document.createElement('a')
  a.href = url.value
  a.download = 'qrcode.png'
  a.click()
}
gen()

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/qr-generator