通过后台返回的二进制文件流，前端使用js的blob对象去实现压缩包的下载

压缩包下载.png

1、需求分析

下载列表中展示的zip压缩文件，需要实现用户点击下载去实现压缩包的下载。

2、后台接口分析

后台的接口是通过get请求，query传参，然后去下载二进制文件，一般的话前端是直接通过a标签去实现文件的下载，但是这种方式也是可以学习的，今天便试了下，也算是个学习的过程。

后台接口格式.png

3、代码实现

3.1、接口部分

• 1. 引入axios

import axios from "axios";

• 2. URL的参数拼接
     当点击某一项时，通过@click="handleDown(item)"将这一项的具体信息作为方法的参数传入
     然后在item中拿到当前压缩包的url，将这个参数传给后台

let url = `/api/tdm/common/storage/readFile/?fileUrl=${row.fileId}`,

3.2、调接口开始下载

row.taskName为下载的压缩包的名字

      axios({
        method: "get",
        url: url,
        responseType: "blob",
      })
        .then((res) => {
          let data = res.data;
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", row.taskName);
          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error(error);
        });

压缩包便成功下载了

下载成功.png