需要

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

思路

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

所需依赖包

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

次要代码

1.头部引入

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

2.react render

<Qrcode    renderAs="canvas"    className="qrcode"    name="001"    value="address1"/><Qrcode    renderAs="canvas"    className="qrcode"    name="002"    value="address2"/><Qrcode    renderAs="canvas"    className="qrcode"    name="003"    value="address3"/>

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");});