vue+jszip多图下载成压缩包

1、引入jszip

<script src="https://cdn.staticfile.org/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdn.staticfile.org/FileSaver.js/2.0.5/FileSaver.min.js"></script>

2、点击下载图片压缩包

//批量下载
        aaaaa(){
            let layerIndex = layer.load(1, {
                shade: [0.1, '#000'] //0.1透明度的白色背景
            });
            var _title = $(".search_input").val();
            let startDate = $("#ECalendar_case1").val()
            let endDate = $("#ECalendar_case2").val()
            let json = { pageNo: 1, pageSize: 10000, title: _title,startDate:startDate,endDate:endDate}
            json = JSON.stringify(json)
            vueUI.ajaxCall({
                url: vueUI.conf.host + "/IMA/queryIMAPic",
                datatype: "json",
                type: "post",
                data: json,
                contentType: 'application/json;charset=utf-8',
                //contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                success: (rsp) => {
                    let meta = rsp.meta
                    console.log('*******************', rsp)
                    if (meta.code == 0) {
                        let data = rsp.data;
                        let listDatas = data.result;
                        
                        let imgsSrc = [];
                        listDatas.forEach((item) => {
                            if(item.pic !== ''){
                                imgsSrc.push(item)
                            }
                        })
                        console.log('imgsSrc',imgsSrc)
                        this.downloadImages(imgsSrc)

                    } else {
                        vueUI.alert(meta.message)
                    }
                    
                }, error: (rsp) => {
                    if (rsp.status != 0) {
                        var err = JSON.parse(rsp.responseText);
                        if (err.meta.code == 999) {
                            vueUI.alert(err.meta.message)
                        }
                    }
                }
            });
        },

 

3、下载压缩包方法

async downloadImages(images) {
    async downloadImages(images) {
            this.setTimes()
            const zip = new JSZip();
            let layerIndex = layer.load(1, {
                shade: [0.1, '#000'] //0.1透明度的白色背景
            });
            // 循环处理每个图像并添加到zip文件中
            for (let i = 0; i < images.length; i++) {
                const response = await fetch(images[i].pic);
                const arrayBuffer = await response.arrayBuffer();
                zip.file(`${images[i].name}-${images[i].phone}-${this.getPicName(images[i].pic)}`, arrayBuffer);
                console.log(`${images[i].name}-${images[i].phone}-${this.getPicName(images[i].pic)}`)

            }
            
            // 生成zip文件并下载
            const content = await zip.generateAsync({ type: 'blob' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(content);
            link.download = `报名信息收集${this.startTime}.zip`;
            link.click();
            await layer.close(layerIndex);
        },

给压缩包以日期命名获取时间

setTimes() {
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf = new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds();
            _this.startTime = yy + "年" + mm + "月" + dd + "日" + hh + "时" + mf + "分"+ ss + "秒";
            },