前端将链接生成压缩包

package.json 依赖包

"jszip": "^3.10.1"
"file-saver": "^2.0.5",

使用示例

<template>
    <el-button type="success" @click="downLoadAll">
        批量下载
    </el-button>
</template>
<script setup lang="ts">
import JSZip from 'jszip';
import  FileSaver  from 'file-saver';


const allFileList = [
{ link: 'xxx', name: '申请表' },
{ link: 'xxx', name: '登记表' },
]


//通过url 转为blob格式的数据
const getImgArrayBuffer = (url)=>{
    // let _this=this;
    return new Promise((resolve, reject) => {
        //通过请求获取文件blob格式
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open('GET', url, true);
        xmlhttp.responseType = 'blob';
        xmlhttp.onload = function () {
            if (this.status == 200) {
                resolve(this.response);
            }else{
                reject(this.status);
            }
        };
        xmlhttp.send();
    });
};

// imgDataUrl 数据的url数组
const BatchDownload = (imgDataUrl)=>{
    let zip = new JSZip();
    let cache = {};
    let promises:any = [];

    for (let item of imgDataUrl) {
        const promise= getImgArrayBuffer(item.path).then((data:any) => {
            // 下载文件, 并存成ArrayBuffer对象(blob)
            const arr_name = item.path.split('/');
            zip.file(  arr_name[arr_name.length - 1], data, { binary: true }); // 逐个添加文件
            cache[item.name] = data;
        });
        promises.push(promise);
    }

    Promise.all(promises).then(() => {
        let title = '正在加载压缩文件';
        console.log(title);
        

        zip.generateAsync({ type: 'blob' }).then(content => {
            title = '正在压缩';
            // 生成二进制流
            FileSaver.saveAs(content, '模板资料'); // 利用file-saver保存文件  自定义文件名
            title = '压缩完成';
        });
    }).catch(_res=>{
        ElMessage.error('文件压缩失败');
    });
};
// 下载全部附件;

const downLoadAll = ()=>{
    const files:any = [];
    allFileList.map((item:any)=>{
        if(item.link !== ''){
            files.push({
                path:item.link,
                name:item.name}
                      
            ); 
            // console.log('files',files);
        }
           
    });
    BatchDownload(files);
};

</script>