关于javascript:qrcodereact组件生成的二维码打包下载

需要

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