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

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

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

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

核心代码实现

1. 组件引入

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

2. 模板部分 - 二维码展示区

<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>

3. 脚本部分 - 核心逻辑

<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");
      };
    },

如果有任何问题，欢迎在评论区留言讨论~ 😊