原生js+JSZip实现批量下载并打包zip文件

1、引入JSZip 

import JSZip from 'jszip';

2、源码

                exportMaterialDrawings: async function () {
                    let list = _.get($scope.entity, 'materialList', []);
                    if (!list || _.isEmpty(list) || list.length < 1) {
                        dialog.noty('采购物料需至少有一项才能导出');
                        return false;
                    }
                    let codeList = list.map(item => {
                        return item.materialCode
                    });
                    let data = {codeList: codeList}
                    
                    //下载地址集合
                    let imgs = []
                    //key:url value:文件名字
                    let map = new Map();
                    http.post("/materialType/getMaterialShowByCodeList", {
                        data: util.encodeJSON(data)
                    }).then((res) => {
                        let result = _.get(res, "data.datas.result", []);
                        result.forEach(item => {
                            let url = skybird.c_path + '/gridfs/' + item.url
                            let name = item.materialCode + '-' + item.materialName
                            imgs.push(url)
                            map.set(url, name)
                        })
                        ctrl.downloadFile(imgs, map)
                    })
                },
                downloadFile: function (imgs, map) {
                    // 创建一个新的JSZip实例
                    const zip = new JSZip();

                    // 异步地获取每个图片并将其添加到zip文件中
                    const promises = imgs.map(url => {
                        return fetch(url)
                            .then(response => response.blob())
                            .then(blob => {
                                // 设置文件名
                                const filename = `${map.get(url)}.jpg`;
                                // 将blob添加到zip文件中
                                zip.file(filename, blob);
                            });
                    });

                    // 等待所有图片都添加到zip文件中
                    Promise.all(promises)
                        .then(() => {
                            // 生成zip文件并获取Blob
                            zip.generateAsync({type: "blob"})
                                .then(function (blob) {
                                    // 创建一个隐藏的a标签
                                    const a = document.createElement('a');
                                    // 创建一个Blob URL
                                    const url = URL.createObjectURL(blob);
                                    // 设置a标签的href和download属性
                                    a.href = url;
                                    a.download = '物料图纸.zip';
                                    // 触发点击事件
                                    a.click();
                                    // 释放URL对象
                                    URL.revokeObjectURL(url);
                                });
                        })
                        .catch(error => {
                            console.error('下载异常：' + error);
                            dialog.noty('下载异常：' + error);
                        });
                },