您现在的位置是：首页 >技术教程 >vue批量生成二维码，打包zip下载网站首页技术教程

记录一个批量生成二维码，并打包成zip文件，并下载的功能

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

<script>
import QRCode from 'qrcode';
import LogoSrc from '@/assets/imgs/basicprofile.png';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';

export default {
  methods: {
    async generateQRCode() {
      const deviceCodeArr = ["860678073705931", "860678073705932", "860678073705933"];
      const zip = new JSZip();
      const promises = deviceCodeArr.map(async (deviceCode) => {

        // 创建一个隐藏的 canvas 元素
        const canvas = document.createElement('canvas');
        canvas.width = 300;
        canvas.height = 300;
        const ctx = canvas.getContext('2d');

        // 生成二维码
        await QRCode.toCanvas(canvas, deviceCode, { width: 300, errorCorrectionLevel: 'H' });

        // 在二维码上绘制 logo
        const logo = new Image();
        logo.src = LogoSrc;
        await new Promise((resolve) => {
          logo.onload = resolve;
        });

        const logoSize = 60; // logo 的大小
        const x = (canvas.width - logoSize) / 2;
        const y = (canvas.height - logoSize) / 2;
        ctx.drawImage(logo, x, y, logoSize, logoSize);

        // 在二维码底部绘制 deviceCode
        ctx.font = '16px Arial';
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.fillText(deviceCode, canvas.width / 2, canvas.height - 10);

        // 转换Canvas内容为Blob
        return new Promise((resolve) => {
          canvas.toBlob((blob) => {
            resolve({ blob, filename: `${deviceCode}.png` });
          }, 'image/png');
        });

      });


      const qrCodeBlobs = await Promise.all(promises);

      qrCodeBlobs.forEach(qrCodeBlob => {
        zip.file(qrCodeBlob.filename, qrCodeBlob.blob);
      });

      // 生成ZIP文件并下载
      zip.generateAsync({ type: "blob" }).then(content => {
        saveAs(content, "qrcodes.zip");
      });

    },
  },
};
</script>