当前位置: 首页 > Web前端 > JavaScript

将字符串生成二维码打包并批量下载

时间:2023-03-26 22:00:29 JavaScript

所需依赖包qrcode二维码生成插件库jszip用于打包压缩一个库文件保存文件,用于保存下载的插件库思路qrcode可以直接将字符串生成base64格式的二维码图片,并转换二维码图片转换成base64格式将base64集成到JSZip对象中,最后生成一个zip文件,通过file-saver下载到本地主代码1.导入headerimportJSZipfrom"jszip";importFileSaverfrom"file-saver";importQRCode来自“二维码”;2.函数方法/***将字符串生成二维码并转base64*@param{生成二维码的字符串}text*@returns*/functiontextQrcodeToBase64(text){returnnewPromise((res,rej)=>{QRCode.toDataURL(text,//二维码字符串{type:"image/png",//生成dataurl图片格式width:200,//二维码宽度quality:0.8,//质量差:1,//白色边框大小color:{dark:"#000",//深色light:"#fff",//亮色},},function(err,dataUrl){if(err)rej(err);res(dataUrl.substring(22));//substring(22)是去掉图片的base64头});});}/***将png格式的base64字符串放到jszip中,然后下载保存到本地*@param{Array}data{value:base64string,name:二维码名称}*/functiondataUrlZip(data){constzip=newJSZip();for(constitemofdata){const{value,name}=item;zip.file(name+".png",value,{base64:true,});}//以二进制形式保存并传递文件-将保存器下载到本地});}3.使用//注意:textQrcodeToBase64返回的对象是promiseasync()=>{//二维码字符串相关数据constqrStrArr=[{name:"baidu",url:"http://www.baidu.com"},{name:"npm",url:"https://www.npmjs.com/"},];//生成下载数据constdata=[];for(constitemofqrStrArr){constbase64=awaittextQrcodeToBase64(item.url);数据.push({名称:item.name,值:base64,});}//下载dataUrlZip(data);};