前端如何根据后端返回文件流下载

前端实现下载excel、img、zip....方法有两种

    1. 直接调接口进行下载 后端进行处理                        多GET请求

    2. 调取接口返回对应的文件流，前端进行处理           多POST请求

(1) zip下载：(未对IE浏览器做处理)

        let dataStr = `taskId=${this.taskVal}&versionNo=${this.versionVal}&flag=${this.flagVal}`;
        axios.get("/dq/task/record/detail/excel/exportDetail2?" + dataStr, {
          responseType: 'blob'  // zip文件流需要添加，不然文件无法打开
        }).then(res => {
           let Res = new ResDatas({
            res,
          }).init();
          let contentType = res.headers['content-type'];
          let contentDisposition = res.headers['content-disposition'];
          if(contentType.indexOf('application/json') != -1) {
            this.$message({
              message: Res,
              type: "warning"
            });
          } else {
            contentDisposition = contentDisposition.split(";")[1];
            let filename = contentDisposition.split("=")[1];
            let filenameStr = window.decodeURI(filename.split(",")[0],"utf-8"); // 下载的文件名称
            _customDownLoadZipGet(res.data, filenameStr);
          }
        })

/**
 * @name: 
 * @param {type} 
 * @return: 
 * @description: (前端)文件流转换
 */
 export const _customDownLoadZipGet = (data, fileName) => {
  const blob = new Blob([data]);
  const downloadElement = document.createElement("a");
  const href = window.URL.createObjectURL(blob);
  //后台再header中传文件名
  downloadElement.href = href;
  downloadElement.download = fileName;
  document.body.appendChild(downloadElement);
  downloadElement.click();
  document.body.removeChild(downloadElement); // 下载完成移除元素
  window.URL.revokeObjectURL(href); // 释放掉blob对象
};

Blod转  =>  JSON

            let reader = new FileReader(); // 创建读取文件对象
            reader.addEventListener("loadend", () => {
              let Res = JSON.parse(reader.result); // 返回的数据
              this.$message({
                message: Res.data,
                type: Res.code == "200" ? "success" : "warning"
              });
            });
            reader.readAsText(res.data, 'utf-8'); // 设置读取的数据以及返回的数据类型为utf-8