vue批量下载，打包zip

vue 批量下载 打包zip

// npm install file - saver--save
// npm install jszip
import JSZip from "jszip";
import FileSaver from "file-saver";
import axios from "axios";
export function downfilesZip(fileList) {
  const zip = new JSZip();
  const cache = {};
  const promises = [];
  fileList.forEach((item, i) => {
    const promise = getFile(item).then((data) => {
      // 下载文件, 并存成blob对象
      const file_name = i + item.substring(item.lastIndexOf("/") + 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) => {
      // 生成二进制流   然后保存文件（如果这个下载不了 也可以将下方这一行换成a标签下载逻辑）
      FileSaver.saveAs(content, "批量下载.zip"); // 利用file-saver保存文件  自定义文件名
    });
  });
}
export function getFile(url) {
  return new Promise((resolve, reject) => {
    axios({
      method: "get",
      url, // 原先后端下载单个文件的路径
      // responseType: "ArrayBuffer"  // 注意看下你自己的原先后端下载地址返回的文件格式 是blob 还是其他的啥 对应这里就要改成后端返回的下载格式
      responseType: "blob",
    })
      .then((res) => {
        resolve(res.data); // 返回文件的blob   Blob {size: 151382, type: 'image/png'}
      })
      .catch((error) => {
        reject(error.toString());
      });
  });
}