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",
    },
  ];

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 createQrCodeWithURL = async () => {
    const zip = new JSZip();
    const folder = zip.folder("創(chuàng)建文件夾")!;
    await gnVisiableCanvas();
    const qrs = document.querySelectorAll(".__qrcode");
    qrs.forEach((qr: any) => {
      const data = qr.toDataURL().substring(22); // canvas 轉(zhuǎn)換成 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下載后的名字
  };

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);
    });
  };
  // 將 二維碼轉(zhuǎn)化成 圖片，然后放在壓縮包里面
  const createQrCodeWithURL = async () => {
    const zip = new JSZip();
    const folder = zip.folder("創(chuàng)建文件夾")!;
    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 />;
}