如何根據(jù)url?批量下載二維碼實(shí)現(xiàn)詳解
更新時(shí)間：2023年05月12日 09:44:34 作者：?jiǎn)讨蝊x
這篇文章主要為大家介紹了如何根據(jù)url批量下載二維碼實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
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 寫入 二維碼中，然后統(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)文章！
相關(guān)文章
JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能
滑塊驗(yàn)證碼是在網(wǎng)站、APP等應(yīng)用中常見(jiàn)的一種驗(yàn)證方式，通過(guò)按照一定規(guī)則滑動(dòng)滑塊到指定位置完成驗(yàn)證，才可以進(jìn)行下一步操作，本文給大家分享基于JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能，感興趣的朋友一起看看吧2022-06-06
javascript設(shè)計(jì)模式 – 抽象工廠模式原理與應(yīng)用實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 抽象工廠模式,結(jié)合實(shí)例形式分析了javascript抽象工廠模式相關(guān)概念、原理、定義、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
在頁(yè)面中我們最常見(jiàn)的頁(yè)面元素就是input了,但是我們?nèi)绾斡肑avaScript得到網(wǎng)頁(yè)input中輸入的value值呢,其實(shí)很簡(jiǎn)單,方法也不止一種,今天給大家分享兩種JavaScript獲得input元素value值的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器
這篇文章主要介紹了js代碼實(shí)現(xiàn)的加入收藏效果并兼容主流瀏覽器,需要的朋友可以參考下2014-06-06
javascript刪除數(shù)組元素的七個(gè)方法示例
這篇文章主要給大家介紹了關(guān)于javascript刪除數(shù)組元素的七個(gè)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
MutationObserver監(jiān)視對(duì)DOM?樹所做更改的功能妙用
這篇文章主要為大家介紹了MutationObserver監(jiān)視對(duì)DOM?樹所做更改的功能妙用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要介紹了electron-builder打包配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實(shí)例
這篇文章主要介紹了基于JS抓取某高校附近共享單車位置 使用web方式展示位置變化代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例
這篇文章主要給大家介紹了關(guān)于js對(duì)象合并與數(shù)組合并綜合應(yīng)用舉例的相關(guān)資料,本文將介紹常見(jiàn)的JS對(duì)象合并和數(shù)組合并方法,幫助讀者更好地理解和運(yùn)用這些方法,需要的朋友可以參考下2023-11-11