1 .下载两个插件
npm i -s jszip file-saver 2.封装函数如下：
在//js文件中引入这两个插件importjszipfrom ' js zip ' importfilesaverfrom ' file-saver '/* * *以获取图像的base64编码* @ param imagrage constgetimagebase 64=image={ const canvas=document.createelement (' canvas ' ) canvas.width=image.width canvas.height=image.heightconstctx=canvas.get context (' 2d ' ) CTX.drawimage ) ime 图像扩展名const extension=image.src.substring (image.src.lastindexof ).toLowerCase ) )。默认值为pngreturncanvanve 1 ) }/** *批量下载图像* @param sourceList图像数据* @param zipName //下载时的文件夹名称* @param sourceList[i].picName //每个图像的名称--注意需要：对数据的exportconstdownloadzip=async (源列表，zipName='文件夹名称')={ const zip=new JSZip ) consttte I ) { const name=source list [ I ].picname /注意：每个图像的名称--需要转换数据属性constimage=new image (image.set attribute ) } 设置“anonymous'//crossorigin属性以解决图像的域间错误的image.src=sourcelist[I] . QRcodeimage.onload=async () const URL=awaitgetimagebase 64 (image )文件列表base64，后面的数据if (文件列表. length==) k fileList.length； 在k ()//文件夹中，按图像数据选择filefolder.file (file list [ k ].name '.png '， 添加fileList[k].img，{ base 643360 true } } zip.generate async ({ type : ' blob ' } ) then ) content={ filesaver.ssync zipname'.zip'}}}}sourcelist数据结构sourceList=[ { id: 1，QR code 3360 ' https://Baidu.com.cn/hk4zhtv 46 QB 57l ] picnn QR code : ' https://Baidu.com.cn/hk4z HDTV 46 QB 57l _ 12346 '，picname3360 '图片2'}