前端如何根據后端返回文件流下載

前端實現下載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