vue3实现文件批量下载并打包成zip文件

实现批量下载的步骤

1、安装axios，异步下载文件

2、将下载的每个文件转为Blob，使用JSZip库将Blob加入到Zip中

3、使用file-saver下载ZIP文件

示例实现：

安装依赖

npm install axios jszip file-saver --save

引入

import axios from 'axios'
import JSZip from 'jszip'
import FileSaver from 'file-saver'

// 下载全部文件
const downloadAll = () => {
    const zip = new JSZip();
    const promises = [];
    //遍历文件地址
    navList.value.forEach(item => {
        if('下载地址'){
            const promise = getFile('下载地址').then(data => {
                const file_name = '文件名称';//获取文件名
                zip.file(file_name, data, { binary: true })
            });
            promises.push(promise);
        }
    });
    Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
            // 生成二进制流
            FileSaver.saveAs(content, `xxx.zip`);
        });
    });
}

// 封装异步请求所有文件
const getFile = (url) => {
    return new Promise((resolve, reject) => {
            axios({
            method: "get",
            url:url,
            responseType: "blob"
            })
            .then(data => {
                resolve(data.data);
            })
            .catch(error => {
                reject(error.toString());
            });
        });
}