React 前端实现

有时候,前端根据 urls 批量下载二维码的需求。

例如,在管理系统中,公司里面每一个人有一个人主页(地址), 个人主页对应自己的内容。为了方便这些内容对外展示,需要一个对应的二维码,方便客户快速的访问其中内容。

将不同人的主页地址 url 写入 二维码中,然后统一打包到一个 url 中。

注意在浏览中实现,可能会随着类容的增多变得慢!

一、依赖

  • qrcode 生成二维码
  • jszip 压缩
  • file-save 保存数据到压缩文件

二、思路整理

1.将选用展示的数据放在数组中

一个数据列表,将选用展示的数据放在数组中,例如,下面一个简单的数据结构式我们要展示的:

const list = [
    { name: "qrcode", url: "https://www.npmjs.com/package/qrcode" },
    { name: "article", url: "https://juejin.cn/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 中

将二维码 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 等元素。

以上就是根据 url 批量下载二维码的详细内容,更多关于根据 url 批量下载二维码的资料请关注阿兔在线工具其它相关文章!

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部