在线页游_中国黄页免费版_公司开发设计推荐_搜索 引擎优化

记录一个批量生成二维码，并打包成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' });// 在二维码上绘制 logoconst 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);// 在二维码底部绘制 deviceCodectx.font = '16px Arial';ctx.fillStyle = 'black';ctx.textAlign = 'center';ctx.fillText(deviceCode, canvas.width / 2, canvas.height - 10);// 转换Canvas内容为Blobreturn 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>