字符串生成二维码并且批量打包下载前端javascript

所需依赖包

qrcode 二维码生成的插件库
jszip 用来打包压缩的一个库
file-saver 文件保存下载的插件库

思路

qrcode 能直接将字符串生成二维码图片的 base64 格式
将二维码图片的 base64 整合放入到 JSZip 对象里
最后生成 zip 文件并通过 file-saver 下载到本地

主要代码
1.头部引入

import JSZip from "jszip"; import FileSaver from "file-saver"; import QRCode from "qrcode";

2.函数方法

/** * 将字符串生成二维码并且转成base64 * @param {要生成二维码的字符串} text * @returns */ function textQrcodeToBase64(text) { return new Promise((res, rej) => { QRCode.toDataURL( text, // 二维码字符串 { type: "image/png", // 生成dataurl图片格式 width: 200, // 二维码宽度 quality: 0.8, // 质量 margin: 1, // 白边大小 color: { dark: "#000", // 暗色颜色 light: "#fff", // 亮色颜色 }, }, function (err, dataUrl) { if (err) rej(err); res(dataUrl.substring(22)); // substring(22)是去掉图片base64头 } ); }); }/** * 将base64字符串以png格式装进jszip, 然后下载保存到本地 * @param {Array} data {value: base64字符串, name: 二维码的名字} */ function dataUrlZip(data) { const zip = new JSZip(); for (const item of data) { const { value, name } = item; zip.file(name + ".png", value, { base64: true, }); }// 以二进制形式保存、并且通过file-saver下载到本地 zip.generateAsync({ type: "blob" }).then(function (content) { FileSaver.saveAs(content, "qrcodes.zip"); }); }

3.使用

// 注意: textQrcodeToBase64返回对象是promise async () => { // 二维码字符串相关的数据 const qrStrArr = [ { name: "baidu", url: "http://www.baidu.com" }, { name: "npm", url: "https://www.npmjs.com/" }, ]; // 生成下载数据 const data = https://www.it610.com/article/[]; for (const item of qrStrArr) { const base64 = await textQrcodeToBase64(item.url); data.push({ name: item.name, value: base64, }); }// 下载 dataUrlZip(data); };