如何根據url?批量下載二維碼實現(xiàn)詳解
更新時間：2023年05月12日 09:44:34 作者：喬治_x
這篇文章主要為大家介紹了如何根據url批量下載二維碼實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
React 前端實現(xiàn)
有時候，前端根據 urls 批量下載二維碼的需求。
例如，在管理系統(tǒng)中，公司里面每一個人有一個人主頁(地址)， 個人主頁對應自己的內容。為了方便這些內容對外展示，需要一個對應的二維碼，方便客戶快速的訪問其中內容。
將不同人的主頁地址 url 寫入 二維碼中，然后統(tǒng)一打包到一個 url 中。
注意在瀏覽中實現(xiàn)，可能會隨著類容的增多變得慢！
一、依賴
- 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("創(chuàng)建文件夾")!;
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 創(chuàng)建的 folder 中
- folder 生成 generateAsync 內容 content, 然后將 content 保存 saveAs 下載下來
4. 正對 React 進行封裝
針對 React 封裝，我們需要考慮兩個大點：
- 觸發(fā)下載器，一般是一個按鈕
- 原始需要展示的數據
下面是一個封裝的示例, 基于 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("創(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 元素找到并全部清理干凈。
小結
批量下載二維碼，一個很常見的應用場景，本質上實用 canvas 作用中間環(huán)節(jié)。然年實用 zip 壓縮等輔助工具將二維碼圖片放在壓縮包中存儲起來并下載。最后不要忘記移除之前的 canvas 等元素。
以上就是根據 url 批量下載二維碼的詳細內容，更多關于根據 url 批量下載二維碼的資料請關注腳本之家其它相關文章！
相關文章
滑塊驗證碼是在網站、APP等應用中常見的一種驗證方式，通過按照一定規(guī)則滑動滑塊到指定位置完成驗證，才可以進行下一步操作，本文給大家分享基于JavaScript實現(xiàn)拼圖式滑塊驗證功能，感興趣的朋友一起看看吧2022-06-06
javascript設計模式 – 抽象工廠模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 抽象工廠模式,結合實例形式分析了javascript抽象工廠模式相關概念、原理、定義、應用場景及操作注意事項,需要的朋友可以參考下2020-04-04
在頁面中我們最常見的頁面元素就是input了,但是我們如何用JavaScript得到網頁input中輸入的value值呢,其實很簡單,方法也不止一種,今天給大家分享兩種JavaScript獲得input元素value值的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了js代碼實現(xiàn)的加入收藏效果并兼容主流瀏覽器,需要的朋友可以參考下2014-06-06
這篇文章主要給大家介紹了關于javascript刪除數組元素的七個方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用
這篇文章主要為大家介紹了MutationObserver監(jiān)視對DOM?樹所做更改的功能妙用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
本文主要介紹了electron-builder打包配置詳解，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要為大家詳細介紹了javascript實現(xiàn)倒計時提示框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實例
這篇文章主要介紹了基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要給大家介紹了關于js對象合并與數組合并綜合應用舉例的相關資料,本文將介紹常見的JS對象合并和數組合并方法,幫助讀者更好地理解和運用這些方法,需要的朋友可以參考下2023-11-11