Vue2批量生成二维码并下载

在Vue2中批量生成二维码并打包成压缩包下载，我们可以使用以下步骤：

使用qrcode库生成二维码图片（这里我们可以使用qrcode或qrcodejs2）。
使用jszip库将生成的二维码图片打包成压缩包。
使用file-saver库将压缩包保存到本地。

具体步骤：

安装依赖：

qrcode：用于生成二维码图片数据。
jszip：用于创建压缩包。
file-saver：用于保存文件到本地。

在Vue组件中，我们可以创建一个方法，该方法接收一个包含多个文本的数组（每个文本生成一个二维码），然后遍历这个数组生成二维码图片。
生成二维码时，我们可以使用QRCode.toDataURL方法将文本转换为二维码的DataURL（base64格式）。
使用JSZip创建一个压缩包实例，将每个生成的二维码（base64数据）作为文件添加到压缩包中。
使用JSZip生成压缩包，然后使用FileSaver保存到本地。

注意：由于生成多个二维码是异步操作，我们需要使用Promise.all来等待所有二维码生成完毕。

安装依赖：

复制代码

npm install qrcode jszip file-saver

代码示例：

html 复制代码

<template>
  <div>
    <button @click="generateAndDownload">批量生成并下载二维码</button>
  </div>
</template>

<script>
import QRCode from 'qrcode';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async generateAndDownload() {
      // 1. 准备数据（示例）
      const qrDataList = [
        { id: 'user001', content: 'https://example.com/user001' },
        { id: 'user002', content: 'https://example.com/user002' },
        // ...更多数据
      ];

      const zip = new JSZip();
      
      // 2. 批量生成二维码
      const promises = qrDataList.map(item => 
        QRCode.toDataURL(item.content)
          .then(dataUrl => {
            // 3. 将base64转换为Blob
            const blob = this.dataURLtoBlob(dataUrl);
            // 4. 添加到压缩包
            zip.file(`${item.id}.png`, blob);
          })
      );

      // 5. 等待所有二维码生成完成
      await Promise.all(promises);
      
      // 6. 生成并下载压缩包
      zip.generateAsync({ type: 'blob' })
        .then(content => {
          saveAs(content, 'qrcodes.zip');
        });
    },

    // 工具函数：Base64转Blob
    dataURLtoBlob(dataUrl) {
      const arr = dataUrl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
      let n = bstr.length;
      const u8arr = new Uint8Array(n);
      
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      
      return new Blob([u8arr], { type: mime });
    }
  }
};
</script>

关键点说明

QRCode生成：
- 使用 qrcode.toDataURL() 生成Base64格式的二维码
- 默认生成PNG格式（300x300像素）
压缩包处理：
- JSZip 创建内存中的压缩包
- zip.file(name, content) 添加文件
- generateAsync() 生成压缩包Blob
文件下载：
- file-saver 的 saveAs() 触发浏览器下载
- 文件名默认为 qrcodes.zip

优化建议

批量限制：

js 复制代码

// 分批次处理（每批10个）
const batchSize = 10;
for (let i = 0; i < qrDataList.length; i += batchSize) {
  const batch = qrDataList.slice(i, i + batchSize);
  // 处理批次...
}

进度显示：

js 复制代码

// 添加进度状态
data() {
  return {
    progress: 0,
    total: 0
  }
},

// 在生成方法中更新进度
promises = qrDataList.map((item, index) => {
  return QRCode.toDataURL(item.content)
    .then(/* ... */)
    .finally(() => {
      this.progress = Math.floor((index + 1) / qrDataList.length * 100);
    });
});

自定义配置：

js 复制代码

// 二维码高级配置
QRCode.toDataURL(item.content, {
  width: 400,          // 大小
  margin: 2,           // 边距
  color: {
    dark: '#000',      // 二维码颜色
    light: '#ffffff00' // 透明背景
  }
})

注意事项

内存限制：大量二维码（如1000+）可能导致内存溢出，建议分批次处理
异步处理 ：使用 Promise.all 确保所有二维码生成完成后再打包
文件名规范：确保文件名合法（避免特殊字符）
浏览器兼容：Blob API 兼容IE10+，如需更低版本需添加polyfill

替代方案（减少内存使用）

js 复制代码

// 使用canvas直接绘制（避免Base64转换）
const canvas = document.createElement('canvas');
QRCode.toCanvas(canvas, content).then(() => {
  canvas.toBlob(blob => {
    zip.file(`${id}.png`, blob);
  });
});

虽说是deepseek生成，但亲测实用，已经实装项目上线。