vue中多个文件下载实现打包压缩下载示例

npm i axios
npm i jszip
npm i file-saver

import axios from "axios";
import JSZip from "jszip";
import FileSaver from "file-saver";

getFile(url) {
    let that = this;
    return new Promise((resolve, reject) => {
    axios({
    method: "get",
    url,
    responseType: "arraybuffer",
    onDownloadProgress: function(progressEvent) {
    }
    })
    .then(data => {
    console.log(data);
    resolve(data.data);
    })
    .catch(error => {
    reject(error.toString());
    });
    });
    },

downfile(){
const data = []; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
//this.List为多个下载数据的地址数组
    this.List.forEach(item => {
      data.push(`${item.fileurl`);//item.fileurl把文件路径添加在要下载的data数组中
    });
    const zip = new JSZip();
    const cache = {};
    const promises = [];
    data.forEach(item => {
      const promise = this.getFile(item).then(data => {
        // 下载文件, 并存成ArrayBuffer对象
        const arr_name = item.split("/");
        const file_name = arr_name[arr_name.length - 1]; // 获取文件名
        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, "打包下载.zip"); // 利用file-saver保存文件
      });
    });
}