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

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

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

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

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

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

 1 /**
 2  * @name: 
 3  * @param {type} 
 4  * @return: 
 5  * @description: (前端)文件流转换
 6  */
 7  export const _customDownLoadZipGet = (data, fileName) => {
 8   const blob = new Blob([data]);
 9   const downloadElement = document.createElement("a");
10   const href = window.URL.createObjectURL(blob);
11   //后台再header中传文件名
12   downloadElement.href = href;
13   downloadElement.download = fileName;
14   document.body.appendChild(downloadElement);
15   downloadElement.click();
16   document.body.removeChild(downloadElement); // 下载完成移除元素
17   window.URL.revokeObjectURL(href); // 释放掉blob对象
18 };

Blod转 => JSON

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