Vue。js Axios responseType blob或json对象

Question

我有一个Axios请求下载。xls文件。问题是，作为后端响应返回的对象并不总是必须是真实的文件。如果我返回json对象而不是文件数据。那么我将如何阅读这个json呢？

以下是函数：

downloadReport() {
  let postConfig = {
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    responseType: 'blob',
  } as AxiosRequestConfig

  axios
  .post(this.urls.exportDiscountReport, this.discount.id, postConfig)
  .then((response) => {
    let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
    let url = window['URL'].createObjectURL(blob);
    let a = document.createElement('a');
    a.href = url;
    a.download = this.discount.id + ' discount draft.xlsx';
    a.click();
    window['URL'].revokeObjectURL(url);
  })
  .catch(error => {
  })
}

我想阅读响应，如果其中包含一些数据-不要创建blob并启动下载，而是显示一些消息或其他内容。如果我删除responseType:'blob'，则。xls文件下载为不可读且无效的文件。

因此，问题是每个返回的响应都变成Blob类型，我在其中看不到返回的数据。有什么想法吗？

Answer 1

您是否尝试过检查响应Blob.type属性？它给出返回数据的MIME类型。

例如，你可以有这样的东西：

const jsonMimeType = 'application/json';
const dataType = responseBlob.type;

// The instanceof Blob check here is redundant, however it's worth making sure
const isBlob = responseBlob instanceof Blob && dataType !== jsonMimeType;

if (isBlob) {

  // do your blob download handling

} else {
  responseBlob.text().then(text => {
    const res = JSON.parse(text);
    // do your JSON handling
  });
}

我发现这更简单，对我有效，但它取决于您的后端设置。BLOB响应仍然是文本响应，但处理方式略有不同。

Answer 2

我通过读取blob响应并检查它是否具有JSON参数状态来解决这个问题。但在我看来，这似乎是一个过度工程。有更好的解决办法吗？

let postConfig = {
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'blob',
} as AxiosRequestConfig

axios
  .post(this.urls.exportDiscountReport, this.discount.id, postConfig)
  .then((responseBlob) => {
    const self = this;
    let reader = new FileReader();

    reader.onload = function() {
      let response = { status: true, message: '' };

      try {
        response = JSON.parse(<string>reader.result);
      } catch (e) {}

      if (response.status) {
        let blob = new Blob([responseBlob.data], { type: 'application/vnd.ms-excel' });
        let url = window['URL'].createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.download = self.discount.id + ' discount draft.xlsx';
        a.click();
        window['URL'].revokeObjectURL(url);
      } else {
        alert(response.message)
      }
    }
    reader.readAsText(responseBlob.data);
  })
  .catch(error => {
  })

我在这里也找到了同样的解决方案：https://github.com/axios/axios/issues/815#issuecomment-340972365

看起来还是太老套了。