qrcode.react组件生成的二维码打包下载 qrcode.react组件生成的二维码打

需求

用 qrcode.react 组件生成二维码
前端实现批量打包下载二维码功能

思路

qrcode.react 组件生成的二维码默认是 canvans
将 canvans 转成 base64
然后整合放入到 JSZip 对象里
最后生成 zip 文件并通过 file-saver 下载到本地

所需依赖包

qrcode.react 二维码生成的 react 组件
jszip 用来打包压缩的一个库
file-saver 文件保存下载的插件库

主要代码
1.头部引入

import JSZip from 'jszip'; import FileSaver from 'file-saver'; import Qrcode from 'qrcode.react';

2.react render

3.下载 js 代码

// 1. 获取canvas元素 const canvans = document.querySelectorAll(".qrcode"); if (!canvans.length) { return alert("elements is empty!"); }// 2. 将每个canvans生成base64格式、并且放入到JSZip里 const zip = new JSZip(); // const zipDir = zip.folder('qrcode'); // 也可以生成子文件夹 for (const canvan of canvans) { const item = { data: canvan.toDataURL().substring(22), // substring(22) 是去掉base64头部 name: canvan.getAttribute("name"), }; // 放到jszip对象里 zip.file(item.name + ".png", item.data, { base64: true, }); }// 3. 以二进制形式保存、并且通过file-saver下载到本地 zip.generateAsync({ type: "blob" }).then(function (content) { FileSaver.saveAs(content, "qrcodes.zip"); });