有时候,前端根据 urls 批量下载二维码的需求。
例如,在办理系统中,公司里边每一个人有一个人主页(地址), 个人主页对应自己的内容。为了便利这些内容对外展现,需求一个对应的二维码,便利客户快速的访问其中内容。
将不同人的主页地址 url 写入 二维码中,然后一致打包到一个 url 中。
React 前端完成
注意在阅读中完成,可能会跟着类容的增多变得慢!
一、依靠
- qrcode 生成二维码
- jszip 压缩
- file-save 保存数据到压缩文件
二、思路收拾
1. 一个数据列表,将选用展现的数据放在数组中,例如,下面一个简单的数据结构式咱们要展现的:
const list = [
{ name: "qrcode", url: "https://www.npmjs.com/package/qrcode" },
{ name: "article", url: "https:///article" },
{
name: "remix-antd-admin",
url: "https://github.com/yyong008/remix-antd-admin",
},
];
2. 有用 qrcode + canvas 将 url 装换成 canvas 的二维码图片
以下是批量得将 url 挂载到 body 后面:
const gnVisiableCanvas = async () => {
for (const item of list) {
const canvas = document.createElement("canvas");
canvas.style.display = "none";
canvas.classList.add("__qrcode");
canvas.setAttribute("name", item.name);
await QRCode.toCanvas(canvas, item.url).catch((err) => {
console.log("qr err", err);
});
document.body.appendChild(canvas);
}
};
3. 将二维码 cavans 元素们转成 base64 数据保存在 zip 中,并保存到文件夹中
const createQrCodeWithURL = async () => {
const zip = new JSZip();
const folder = zip.folder("创建文件夹")!;
await gnVisiableCanvas();
const qrs = document.querySelectorAll(".__qrcode");
qrs.forEach((qr: any) => {
const data = qr.toDataURL().substring(22); // canvas 转换成 base64
folder.file(qr.getAttribute("name") + ".png", data, {
base64: true,
});
});
const content = await folder
.generateAsync({ type: "blob" }) // zip下载
.then(function (content) {
return content;
});
saveAs(content, "二维码.zip"); // zip下载后的姓名
};
- 将 canvas 转换成 base64 数据,然后将 base64 数据保存到 zip 创建的 folder 中
- folder 生成 generateAsync 内容 content, 然后将 content 保存 saveAs 下载下来
4. 正对 React 进行封装
针对 React 封装,咱们需求考虑两个大点:
- 触发下载器,一般是一个按钮
- 原始需求展现的数据
下面是一个封装的示例, 根据 React 和 Antd 的内容:
import React from "react";
import QRCode from "qrcode";
import JSZip from "jszip";
import { saveAs } from "file-saver";
import { Button } from "antd";
export default function QrCodeList({ trigger, list = [] }: any) {
// canvas
const gnVisiableCanvas = async () => {
for (const item of list) {
const canvas = document.createElement("canvas");
canvas.style.display = "none";
canvas.classList.add("__qrcode");
canvas.setAttribute("name", item.name);
await QRCode.toCanvas(canvas, item.url).catch((err) => {
console.log("qr err", err);
});
document.body.appendChild(canvas);
}
};
const destoryQrCodeWithURL = () => {
const qrs = document.querySelectorAll(".__qrcode");
qrs.forEach((qr: any) => {
document.body.removeChild(qr);
});
};
// 将 二维码转化成 图片,然后放在压缩包里边
const createQrCodeWithURL = async () => {
const zip = new JSZip();
const folder = zip.folder("创建文件夹")!;
await gnVisiableCanvas();
const qrs = document.querySelectorAll(".__qrcode");
qrs.forEach((qr: any) => {
const data = qr.toDataURL().substring(22);
folder.file(qr.getAttribute("name") + ".png", data, {
base64: true,
});
});
const content = await folder
.generateAsync({ type: "blob" }) // zip下载
.then(function (content) {
return content;
});
saveAs(content, "二维码.zip"); // zip下载后的姓名
destoryQrCodeWithURL();
};
const TriggerNew = () => {
if (!trigger) {
return (
<Button type="primary" onClick={() => createQrCodeWithURL()}>
批量生成二维码
</Button>
);
}
return React.cloneElement(
trigger,
{
onClick: () => {
createQrCodeWithURL();
},
},
trigger.props.children
);
};
return <TriggerNew />;
}
5. 下载结束之后
绘制下载结束之后,咱们还需求将这些 dom 中的 html 元素找到并全部整理洁净。
小结
- 批量下载二维码,一个很常见的应用场景,本质上有用 canvas 效果中间环节。然年有用 zip 压缩等辅助工具将二维码图片放在压缩包中存储起来并下载。最后不要忘掉移除之前的 canvas 等元素。