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

1.安装各个依赖.

  npm i axios
  npm i jszip
  npm i file-saver

2.在需要的页面进行引入

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

3.在methods中证明方法

 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());
     });
     });
    },

4.调用方法

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保存文件
      });
    });
}

在网上找的方法，如有侵权请联系qq 896978695