关于前台封装实现zip文件流的下载功能并如何使用

封装实现 zip 文件流的下载与如何使用

在前端开发过程中有关于文件下载的基本是后台返回文件地址指向的 url ，前端通过 window.open 进行下载，但是对于后台返回 zip 文件流如何进行下载呢？接下来 来看看如何实现。

1. 后台返回 zip文件流

2. 前台使用axios请求后台接口获取zip文件流

请求前的准备

1. axios的 responseType 设置为blob
2. 将返回的zip文件流转换为blob对象解析，并指定type为：“application/zip;charset-UTF-8”，然后通过
   一系列处理后即可实现前台下载zip文件流的功能

示例：

 downLoadZip(data, name) {
   let blob = new Blob([data], {
     type: "application/zip;charset-UTF-8"
   });
   const blobUrl = URL.createObjectURL(blob);
   const a = document.createElement("a");
   a.href = blobUrl;
   a.download = name;
   a.style.display = "none";
   a.click();
   // 释放内存
   URL.revokeObjectURL(blobUrl);
 },

接下来看如何使用

downLoad() { //下载二维码
    let idList = []
    this.dataListSelections.forEach((item) => {
      idList.push(item.id)
    })
    if(!idList.length) return this.$message.info('请勾选需要下载的二维码表格数据')
    this.$http.post('/pump/site/downLoadQrCode', { idList }, {
      responseType: "blob"
    }).then(({ data: res }) => {
      this.downLoadZip(res, "二维码.zip")
    }).catch((err) => {
      this.$message.error('接口请求失败，请稍后再试!')
    })
  },

亲测有效，欢迎使用！！！