导出文件，responseType设置了blob，实际返回了JSON格式的错误信息的处理方式

需求：导出文件

问题描述：由于后台直接返回的文件流，在请求下载的方法中将XHR 的 responseType 指定为 blob 或者 arraybuffer。但并不是每次的操作都是成功的，所以在接口错误时后台返回的就是不是二进制流格式了。因此这里需要获取到后台反馈的错误信息进行用户提示。

这时后台返回的数据类型就是这样的：

而接口返回的是json的数据信息{“msg”: "导出失败"， code: 1007}

解决代码示例：

getFiles(_path, query) {
    axios({
      method: 'get', // 请求方式
      headers: {
        'Content-Type': 'application/octet-stream',
        'token': store.getters.token
      },
      url: _path, // 请求路径
      params: query,
      responseType: 'blob'
    }).then(res => {
      const data = res.data;
      if (res.data.type == 'application/json') {
　　　　　// json信息展示
        this.handlerResponseError(data);
      } else {
        // 下载文件流
        const filename = this.getCaption(res.headers['content-disposition']);
        const blob = new Blob([res.data], {
          type: 'application/octet-stream'
        });
        const objectUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = objectUrl;
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();// 点击
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(URL); // 释放掉blob对象
      }
    }).catch((err) => {
      console.log(err, 'err');
    });
  },

  handlerResponseError(data) {
    const _this = this;
    const fileReader = new FileReader();
    fileReader.onload = function() {
      try {
        const jsonData = JSON.parse(fileReader.result); // 说明是普通对象数据，后台转换失败
        console.log('后台返回的信息'，jsonData.msg);
       // dosomething……
      } catch (err) { // 解析成对象失败，说明是正常的文件流
        console.log('success...');
      }
    };
    fileReader.readAsText(data);
  }, 　

// or
handlerResponseError2(data){　　

　　　　const reader = new FileReader();

　　　　reader.onload = (e) => {

　　　　const {message} = JSON.parse(reader.result);

　　　　　　this.$message.error("err:" + message);

　　　　}

　　　　reader.readAsText(data);

}

使用表单下载文件

jsFormFilesSubmit(downUrl, fileParam) {

  let tempform = document.createElement("form");
  tempform.action = downUrl;
  tempform.method = "post";
  tempform.style.display = "none";

  for (let x in fileParam) {
  　let opt = document.createElement("input");
　　opt.name = x;
　　opt.value = fileParam[x];
　　tempform.appendChild(opt);
  }

  let opt = document.createElement("input");
  opt.type = "submit";
  tempform.appendChild(opt);
  document.body.appendChild(tempform);
  tempform.submit();
  document.body.removeChild(tempform);
}

文件类型转换

```

async handleSubmitFile(file) {

    let binarySystem = await this.converToBase64(file.raw) // base64

    let binarySystem = await this.handleFileToBlob(file.raw) // 二进制

    console.log('binarySystem:', binarySystem)

},

converToBase64(file) {

    return new Promise((resolve,rej) => {

        const reader = new FileReader()

        reader.onload = function (res) {

            console.log('获取文件信息', res.target.result)

            resolve(res.target.result)

        }

        reader.readAsDataURL(file)

    });

},

handleFileToBlob(file) {

    return new Promise((resolve,rej) => {

        const reader = new FileReader()

        reader.readAsArrayBuffer(file.raw)

        reader.onload = function (res) {

            console.log('获取文件信息', res.target.result)

            resolve(res.target.result)

        }

    })

},

```

PS：MDN官方解释：Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据（https://developer.mozilla.org/zh-CN/docs/Web/API/Blob）。