Vue2批量生成二维码并下载的实现步骤

npm install qrcode jszip file-saver

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

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

// 添加进度状态
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);
    });
});

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

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