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

前端实现zip文件流下载：axios与Blob对象结合的解决方案

原创已于 2022-05-14 14:41:57 修改 · 3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-05-14 14:39:20 首次发布

Vuejs 同时被 3 个专栏收录

48 篇文章

订阅专栏

前端 javascript

32 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

本文介绍了如何在前端通过axios从后台获取zip文件流并实现下载。关键步骤包括设置axios的responseType为'blob'，将文件流转换为blob对象，创建对象URL并利用隐藏的a标签触发下载。示例代码详细展示了整个过程，适用于前端开发者处理文件下载场景。

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

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

1. 后台返回 zip文件流

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

请求前的准备

axios的 responseType 设置为blob
将返回的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('接口请求失败，请稍后再试!')
    })
  },

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