目錄

• React 前端實(shí)現(xiàn)
• 一、依賴
• 二、思路整理
• 1.將選用展示的數(shù)據(jù)放在數(shù)組中
• 2. 實(shí)用 qrcode + canvas 將 url 裝換成 canvas 的二維碼圖片
• 3.二維碼 cavans 元素們轉(zhuǎn)成 base64 數(shù)據(jù)保存在 zip 中
• 4. 正對(duì) React 進(jìn)行封裝
• 5. 下載完畢
• 小結(jié)

React 前端實(shí)現(xiàn)

有時(shí)候，前端根據(jù) urls 批量下載二維碼的需求。

例如，在管理系統(tǒng)中，公司里面每一個(gè)人有一個(gè)人主頁(yè)(地址)， 個(gè)人主頁(yè)對(duì)應(yīng)自己的內(nèi)容。為了方便這些內(nèi)容對(duì)外展示，需要一個(gè)對(duì)應(yīng)的二維碼，方便客戶快速的訪問(wèn)其中內(nèi)容。

將不同人的主頁(yè)地址 url 寫(xiě)入 二維碼中，然后統(tǒng)一打包到一個(gè) url 中。

注意在瀏覽中實(shí)現(xiàn)，可能會(huì)隨著類容的增多變得慢！

一、依賴

• qrcode 生成二維碼
• jszip 壓縮
• file-save 保存數(shù)據(jù)到壓縮文件

二、思路整理

1.將選用展示的數(shù)據(jù)放在數(shù)組中

一個(gè)數(shù)據(jù)列表，將選用展示的數(shù)據(jù)放在數(shù)組中，例如，下面一個(gè)簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)式我們要展示的：

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. 實(shí)用 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 元素們轉(zhuǎn)成 base64 數(shù)據(jù)保存在 zip 中

將二維碼 cavans 元素們轉(zhuǎn)成 base64 數(shù)據(jù)保存在 zip 中,并保存到文件夾中

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下載后的名字
  };

• 將 canvas 轉(zhuǎn)換成 base64 數(shù)據(jù)，然后將 base64 數(shù)據(jù)保存到 zip 創(chuàng)建的 folder 中
• folder 生成 generateAsync 內(nèi)容 content, 然后將 content 保存 saveAs 下載下來(lái)

4. 正對(duì) React 進(jìn)行封裝

針對(duì) React 封裝，我們需要考慮兩個(gè)大點(diǎn)：

• 觸發(fā)下載器，一般是一個(gè)按鈕
• 原始需要展示的數(shù)據(jù)

下面是一個(gè)封裝的示例, 基于 React 和 Antd 的內(nèi)容：

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 />;
}

5. 下載完畢

繪制下載完畢之后，我們還需要將這些 dom 中的 html 元素找到并全部清理干凈。

小結(jié)

批量下載二維碼，一個(gè)很常見(jiàn)的應(yīng)用場(chǎng)景，本質(zhì)上實(shí)用 canvas 作用中間環(huán)節(jié)。然年實(shí)用 zip 壓縮等輔助工具將二維碼圖片放在壓縮包中存儲(chǔ)起來(lái)并下載。最后不要忘記移除之前的 canvas 等元素。

以上就是根據(jù) url 批量下載二維碼的詳細(xì)內(nèi)容，更多關(guān)于根據(jù) url 批量下載二維碼的資料請(qǐng)關(guān)注其它相關(guān)文章！