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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值