定制设计axios请求设置responseType为‘blob‘或‘arraybuffer‘下载时，正确处理返回值

问题：定制设计调用后台图片接口，定制设计后台返回二进制流图片数据格式。定制设计前端接收到流后处理数据显示在img标签。

解决：

1、设置axios定制设计接收参数格式为""：

responseType: 'arraybuffer'
1

2、转换为base64定制设计格式图片数据在显示：

return 'data:image/png;base64,' + btoa(    new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')  );
1
2
3

返回的string直接放在img标签src可直接显示

二、设置axios接收参数格式为"blob"：

axios.post( ExportUrl, Params, {    responseType: 'blob'  })  .then(function(response) {    this.url = window.URL.createObjectURL(new Blob([response.data]));      });
1
2
3
4
5
6
7

三、通过a标签下载文件

const url = '下载的url链接';const link = document.createElement('a');link.href = url;link.target = '_blank';link.setAttribute('download', 'Excel名字.xlsx');document.body.appendChild(link);link.click();
1
2
3
4
5
6
7

值的类型

实例
返回值不同情况的处理方式，举例如下：

①、请求设置为 responseType: ‘arraybuffer’，
请求成功时，后端返回文件流，正常导出文件;
请求失败时，后端返回json对象，如：{“Status”:“false”,“StatusCode”:“500”,“Result”:“操作失败”}，也被转成了arraybuffer

此时请求成功和失败返回的http状态码都是200

解决方案：将已转为arraybuffer类型的数据转回Json对象，然后进行判断

代码如下

async downloadFile (file) {      let res = await this.$axios.post(this.API.order.tradeImpExcle, { responseType: "arraybuffer" });      if (!res) return;      try {        //如果JSON.parse(enc.decode(new Uint8Array(res.data)))不报错，说明后台返回的是json对象，则弹框提示        //如果JSON.parse(enc.decode(new Uint8Array(res.data)))报错，说明返回的是文件流，进入catch，下载文件        let enc = new TextDecoder('utf-8')        res = JSON.parse(enc.decode(new Uint8Array(res.data))) //转化成json对象        if (res.Status == "true") {          this.refresh()          this.$message.success(res.Msg)        } else {          this.$message.error(res.Result)        }      } catch (err) {        const content = res.data;        const blob = new Blob([content]);        let url = window.URL.createObjectURL(blob);        let link = document.createElement("a");        link.style.display = "none";        link.href = url;        link.setAttribute(          "download",          res.headers["content-disposition"].split("=")[1]        );        document.body.appendChild(link);        link.click();      }    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

②、请求设置为 responseType: ‘blob’，

解决方案：将已转为blob类型的数据转回Json对象，然后进行判断

代码如下

 async downloadFile (file) {      let formData = new FormData();      formData.append("allTradesExcelFile", file);      let res = await this.$axios.post(this.API.order.tradeImpExcle, formData, { responseType: "blob" });      if (!res) return;      let r = new FileReader()      let _this = this      r.onload = function () {        try {          // 如果JSON.parse(this.result)不报错，说明this.result是json对象，则弹框提示          // 如果JSON.parse(this.result)报错，说明返回的是文件流，进入catch，下载文件          res = JSON.parse(this.result)          if (res.Status == "true") {            _this.refresh()            _this.$message.success(res.Msg)          } else {            _this.$message.error(res.Result)          }        } catch (err) {          const content = res.data;          const blob = new Blob([content]);          let url = window.URL.createObjectURL(blob);          let link = document.createElement("a");          link.style.display = "none";          link.href = url;          link.setAttribute(            "download",            res.headers["content-disposition"].split("=")[1]          );          document.body.appendChild(link);          link.click();        }      }      r.readAsText(res.data) // FileReader的API    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35