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

需求

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