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

vue-qr生成的二维码增加下载功能

news 2025/7/4 8:13:24

大家好！今天给大家分享一个超实用的前端小技巧——如何在 Vue 项目中生成二维码并实现下载功能。这个功能在分享链接、活动推广等场景特别有用，一起来学习吧！
🔍 功能预览

使用 vue-qr 生成美观二维码
点击按钮即可下载 PNG 格式的二维码
兼容现代浏览器，响应式设计
🛠️ 所需依赖
首先确保安装这两个关键库：

npm install vue-qr file-saver --save
# 或
yarn add vue-qr file-saver

核心代码实现

组件引入

import VueQr from 'vue-qr';
import { saveAs } from 'file-saver'; // 文件下载神器

模板部分 - 二维码展示区

<template><div class="qr-container"><!-- 二维码生成组件 --><vue-qr:text="qrContent":size="200":margin="10":callback="getCodeUrl"></vue-qr><!-- 下载按钮 --><button @click="downloadQr" class="download-btn">下载二维码</button></div>
</template>

脚本部分 - 核心逻辑

<script>
export default {data() {return {qrContent: 'https://example.com', // 默认二维码内容qrBlob: null,    // 存储二维码二进制数据fileName: '我的二维码.png' // 默认文件名}},methods: {// 二维码生成回调getCodeUrl(dataURL) {// 移除Base64前缀const base64Data = dataURL.replace(/^data:image\/\w+;base64,/, '');// 转换Base64为二进制数据const byteArray = Uint8Array.from(atob(base64Data), c => c.charCodeAt(0));// 创建Blob对象this.qrBlob = new Blob([byteArray], { type: 'image/png' });},// 下载二维码downloadQr() {if (!this.qrBlob) {alert('请先生成二维码！');return;}// 使用file-saver保存文件saveAs(this.qrBlob, this.fileName);// 可以添加下载统计等扩展功能this.trackDownload();},// 扩展：下载统计trackDownload() {console.log('二维码下载次数+1');// 这里可以接入埋点统计}}
}
</script>

🚨 常见问题解决
Q1：为什么下载的文件损坏？
A：确保正确处理了Base64数据转换，特别注意替换前缀的正则表达式要准确。

Q2：如何在移动端兼容？
A：file-saver 在移动端可能有兼容性问题，可以添加提示：

downloadQr() {if (/Android|iPhone/i.test(navigator.userAgent)) {alert('长按图片即可保存到相册');return;}// ...原有下载逻辑
}

Q3：如何提高生成速度？
A：对于大量二维码生成，可以考虑使用Web Worker进行异步处理。
Q4：对于下载的图片有尺寸要求怎么办？
A：修改getCodeUrl，使用canvas转blob

    getCodeUrl(url, id) {const canvas = document.createElement("canvas");const img = new Image();img.src = url;img.onload = () => {canvas.width = 800;canvas.height = 800;const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 800, 800);canvas.toBlob((blob) => {this.codeBlob = blob;}, "image/png");};},