Vue3实现二维码生成

这里使用 qrcode 库

快速生成

安装 qrcode 库

npm install qrcode

import QRCode from "qrcode"

const qrValue = ref("") // 默认的二维码内容
const qrDataUrl = ref("")

const generateQRCode = async () => {
    if (!qrValue.value) {
        return
    }
    try {
        qrDataUrl.value = await QRCode.toDataURL(qrValue.value, {
            width: 200,
            margin: 2,
            color: {
                dark: "#000000", // 前景色
                light: "#ffffff", // 背景色
            },
        })
    } catch (err) {
        console.error("生成二维码失败:", err)
    }
}

const downloadQRCode = () => {
    const link = document.createElement("a")
    link.href = qrDataUrl.value
    link.download = "qrcode.png"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}