【vue】 批量下载文件 zip

记录 批量下载文件 zip

使用file-saver 下载文件

使用jszip 转zip包

import { saveAs } from 'file-saver';
import JsZip from 'jszip';


// 点击下载按钮
    downlist(list) {
      /*
            list = [
            	{
            		name: 'xxxx',
            		url: 'xxxxxxx'
				}
			]
        */
      this.dowmurls(list).then((res) => {
        if (res.code === 'success') {
          // 下载失败的文件 res.errUrls.length > 0
          // console.log(res.errUrls);
          saveAs(res.content, '批量下载压缩包.zip');
        } else {
          // "文件下载失败"
        }
      });
    },
    // 接收一个文件路径的集合
    dowmurls(fileUrls) {
      return new Promise((resolve, reject) => {
        if (fileUrls.length > 0) {
          const zip = new JsZip();
          const cache = {};
          const downAll = [];
          // 错误文件
          const errlist = [];
          for (let key in fileUrls) {
            const promise = this.getFile(fileUrls[key].url).then((data) => {
              // 成功的文件
              if (data !== 'downerr') {
                // 获取文件名
                const file_name = fileUrls[key].name;
                // 逐个添加文件
                zip.file(file_name, data, {
                  binary: true,
                });
                // 保存文件
                cache[file_name] = data;
              } else {
                // 保存错误文件
                errlist.push(fileUrls[key]);
              }
            });
            // 保存所有的文件
            downAll.push(promise);
          }
          // 统一下载
          Promise.all(downAll).then(() => {
            // 生成二进制流
            zip
              .generateAsync({
                type: 'blob',
              })
              .then((content) => {
                // 封装的返回文件
                let resData = {
                  // 状态码
                  code: 'success',
                  // 存放错误文件数据
                  errUrls: [],
                  // 文件流数据
                  content: null,
                };
                // 判断是否存在错误文件
                resData.errUrls = errlist.length > 0 ? errlist : [];
                // 判断错误文件的个数是否等于要下载的文件个数
                errlist.length !== fileUrls.length
                  ? (resData.content = content)
                  : (resData.code = 'error');
                // 返回下载结果信息
                resolve(resData);
              });
          });
        }
      });
    },
    // 根据文件路径获取这个文件的文件流
    getFile(url) {
      // return 返回请求的图拼内容 responseType: 'blob';
    },