前端实现批量导出图片并打包压缩功能

需求管理后台需要批量导出二维码图片实现难点选择相应的图片批量导出或直接批量导出并压缩在一个文件夹里思路分析1.先将选中二维码的地址存在一个数组中2.依次请求图片并将其下载3.后用jszip压缩文件4.最后用file-saver生成文件实现实现的代码如下import axios from ‘axios’import JSZip from ‘jszip’import FileSaver from ‘file-saver’getFile = (url) => { return new Promise((resolve, reject) => { axios({ method: ‘get’, url, responseType: ‘arraybuffer’ }).then(data => { resolve(data.data) }).catch(error => { reject(error.toString()) }) }) };}// 批量下载handleBatchDownload = async(selectImgList) => { const data = selectImgList; const zip = new JSZip() const cache = {} const promises = [] await data.forEach(item => { const promise = this.getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象 const arr_name = item.split("/"); let file_name = arr_name[arr_name.length - 1] // 获取文件名 // if (file_name.indexOf(’.png’) == -1) { // file_name = file_name + ‘.png’ // } zip.file(file_name, data, { binary: true }) // 逐个添加文件 cache[file_name] = data }) promises.push(promise) }) Promise.all(promises).then(() => { zip.generateAsync({ type: “blob” }).then(content => { // 生成二进制流 FileSaver.saveAs(content, “photo.zip”) // 利用file-saver保存文件 }) }) }; 知识点总结1.插件file-saver的使用a标签download属性下载不了跨域图片直接在浏览器预览，利用file-saver将跨域访问的图片下载可以file-saver下载其他文件，详情可去参考其API如果你需要保存较大的文件，不受 blob 的大小限制或内存限制，可以看一下更高级的 StreamSaver.js2.插件jszip的使用点击批量下载所有图片都在浏览器下载文件多表现不友好，需将批量下载的图片打包进压缩包里，故引进了JSZip进行打包JSZip是一个用于创建，阅读和编辑.zip文件的JavaScript库，具有友好而简单的API,详细用法可以参照其API备注 ：注意的是responseType, 如果下载文件是文本类型的(如: .txt, .js之类的),那么用responseType: ’text’也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer如果下载的文件过大, 打包的时间将会很长, 甚至可能会导致浏览器奔溃还需要注意的一点是请求图片资源时因其是异步请求，需要等所有图片请求完再进行打包这一步，在请求资源时需要await参考文档file-saver地址JSZip参考文档地址