【前端】vue下载文件，返回值为 blob 文件流(添加这个属性 responseType: ‘blob‘)，失败后的错误信息处理以及成功处理。

1、当我们下载文件时，成功可以直接下载，代码如下

downExcel() {
    this.loading = true;
    //文件名
    let fileName = "xxx.xlsx";
    downExcel(fileName).then(res => {
      //将文件流转成blob形式
      const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
      //创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
      const eLink = document.createElement("a");
      eLink.download = fileName;
      eLink.style.display = "none";
      eLink.href = URL.createObjectURL(blob);
      document.body.appendChild(eLink);
      eLink.click();
      URL.revokeObjectURL(eLink.href); // 释放URL 对象
      document.body.removeChild(eLink);
      this.loading = false;
     }).catch(error=>{console.log(error)})
},

2、如果下载失败，后端返回json的错误信息

downExcel() {
        this.loading = true;
        let fileName = "xxx.xlsx";
        downExcel(fileName).then(res => {
          let data = res.data;
          let fileReader = new FileReader();
          
          fileReader.onload = function(event) {
            try {
              let jsonData = JSON.parse(event.target.result);
              if (jsonData.code) {
                alert("失败。。")
              }
            } catch (err) {
              // 解析成对象失败，说明是正常的文件流
              //将文件流转成blob形式
              const blob = new Blob([res.data],{type: "application/vnd.ms-excel"});
              //创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
              const eLink = document.createElement("a");
              eLink.download = fileName;
              eLink.style.display = "none";
              eLink.href = URL.createObjectURL(blob);
              document.body.appendChild(eLink);
              eLink.click();
              URL.revokeObjectURL(eLink.href); // 释放URL 对象
              document.body.removeChild(eLink);
            }
          };
          fileReader.readAsText(data);
          this.loading = false;
        }).catch(error=>{console.log(error)})
      },

3、fileReader.onload  方法内使用外部 this，也可直接赋值外部对象，此处用提示信息演示

downExcel() {
        this.loading = true;
        let fileName = "xxx.xlsx";
        downExcel(fileName,this.ids).then(res => {
          let data = res.data;
          let fileReader = new FileReader();
          fileReader.onload = (event) => {
            try {
              let jsonData = JSON.parse(event.target.result);
              if (jsonData.code) {
                // 说明是普通对象数据，后台转换失败
                console.log(jsonData)
                this.$message({
                  type: "error",
                  message: jsonData.msg
                });
              }
            } catch (err) {
              console.log("流处理")
            }
          };
          fileReader.readAsText(data);
          this.loading = false;
        }).catch(error=>{console.log(error)})
},

4、a() {}和a = () => {}的区别

这两种方式的区别，就是 this的指向区别：

1、下面这种方式，this的范围指当前 function。

2、下面这种方式，this的范围指整个页面，这样就可以使用 this 的相关函数，以及属性的赋值