axios请求下载excel文档blob异常处理不显示

原创已于 2022-05-10 17:19:23 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2021-08-06 09:56:47 首次发布

js 专栏收录该内容

78 篇文章

订阅专栏

当axios请求设置为responseType: 'blob'时，错误信息将以blob格式返回，导致无法正常显示。解决方法是先不带responseType进行预请求，检查错误，无误后再带responseType发起请求以下载Excel文件。

问题:数据请求加了{ responseType: "blob" },那么返回的数据格式就是blob格式,这时候如果有错误提示,返回的也是blob格式,而不是我们想要的错误提示,如果没加{ responseType: "blob" },那么错误提示可以正常提示.

下面是正常错误提示,没加{ responseType: "blob" },

这是导出,加了{ responseType: "blob" },

这时候就没有错误提示,前端就不能做统一处理

解决办法:

把导出接口请求两次,第一请求不加{ responseType: "blob" },判断接口是否正常,有错误就直接提示,如果没有错误,就再次请求一次,这时候加{ responseType: "blob" },同时下载文件.

const confirmExport = () => {
    console.log('导出条件-tableFilter', tableFilter)
    // videoTable:表格的数据,多少条
    if (videoTable.length === 0) {
      message.info('没有可导出的数据!');
      return false;
    }
    

    instance.get(`/video-excel/export?${tableFilter}`).then(res => {
      instance.get(`/video-excel/export?${tableFilter}`, {
        responseType: "blob"
      }).then(res => {
        console.log('导出成功', res)
        //let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });
        download_file(blob, "录像管理数据");
        message.success('导出成功')
      })
    })


  }

export const download_file = (blob, name = 'download_file') => {
  let url = window.URL.createObjectURL(blob)
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', name + '.xlsx')
  document.body.appendChild(link)
  link.click()
}