axios请求设置responseType为‘blob‘或‘arraybuffer‘下载文件时，正确处理返回值为文件流或json对象的情况

前言
使用axios请求api下载导出一个文件时，接口返回值可能会出现两种情况：

1、文件流

2、json对象

responseType值的类型

值	数据类型
''	DOMString(默认类型)
arraybuffer	ArrayBuffer对象
blob	Blob对象
document	Documnet对象
json	JavaScript object, parsed from a JSON string returned by the server
text	DOMString

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

①、请求设置为 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();
}
}

---

try {

            // 因为请求设置为 responseType: 'arraybuffer'，所以在接口不满足下载是要对返回错误信息 进行 转码处理为 对象

            // 如果JSON.parse(enc.decode(new Uint8Array(res.data))) 不报错 后台返回的JSON对象，做弹窗提示

            // 如果JSON.parse(enc.decode(new Uint8Array(res.data))) 报错 后台返回的是文件流，做文件下载

            let enc = new TextDecoder('utf-8')

            let newres = JSON.parse(enc.decode(new Uint8Array(res.data)))

            if(!newres.result.success){

              this.$message.error(newres.result.msg)

            }

          } catch (error) {

            const fileNameCode = res.headers['content-disposition'].split('filename=')[1]

            const fileName = decodeURIComponent(escape(fileNameCode))

            let pdfUrl = window.URL.createObjectURL(

            new Blob([res.data], { type: "application/msdoc;charset=UTF-8" })

          );

          var a = document.createElement("a");

          document.body.appendChild(a);

          a.style = "display: none";

          a.href = pdfUrl;

          a.download = fileName;

          a.click();

          document.body.removeChild(a);

          }

 

②、请求设置为 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
}