如何通过URL批量下载二维码图片？

本文共计1233个文字，预计阅读时间需要5分钟。

目录 + React + 前端实现 + 一、依赖 + 二、思路整理

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

2.实用 qrcode + canvas 将 url 转换成 canvas 的二维码图片

3.二维码 + canvas 元素们转换成 base64 数据，保存至 zip 中

目录

• React 前端实现
• 一、依赖
• 二、思路整理
• 1.将选用展示的数据放在数组中
• 2. 实用 qrcode + canvas 将 url 装换成 canvas 的二维码图片
• 3.二维码 cavans 元素们转成 base64 数据保存在 zip 中
• 4. 正对 React 进行封装
• 5. 下载完毕
• 小结

React 前端实现

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

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

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

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

一、依赖

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

二、思路整理

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

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

const list = [ { name: "qrcode", url: "www.npmjs.com/package/qrcode" }, { name: "article", url: "juejin.cn/article" }, { name: "remix-antd-admin", url: "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 批量下载二维码的资料请关注自由互联其它相关文章！