vue axios 文件流导出功能 表格 zip 都可以

API接口代码

因为数据返回的是一个流文件，所以必须加上 responseType: ‘blob’

export const getExport = async params => {
  try {
    const data = await axios.post('/xxxxxx/xxxxx',
    { ...params },
    { responseType: 'blob' });
    return data;
  } catch (error) {
    return Promise.reject(error);
  }
};

数据请求

private async getExportData() {
    try {
      this.exportStatus = true;
      this.exportTitle = '正在导出...';
      const resp = await Service.getExport({
        groupSerial: this.formData.parentSerial,
      });
      if (resp.data.type === 'application/vnd.ms-excel') {
        const blob = new Blob([resp.data], {
          type: resp.headers['Content-Type'],
        });
        if (resp && resp.headers['content-disposition']) {
          const filename = resp.headers['content-disposition'].split('=')[1];
          const link = document.createElement('a');
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', filename);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        }
      } else {
        // 错误时需要把blob 转换成json格式，并获取报错信息
        await fileToJson(resp.data)
          .then(res => {
            this.$message.error((res as any).errorMsg);
          })
          .catch(error => {
            /* tslint:disable */
            console.log('error', '\n', error);
            /* tslint:enable */
          });
      }
    } catch (error) {
      /* tslint:disable */
      console.log('error', '\n', error);
      /* tslint:enable */
    } finally {
      this.exportStatus = false;
      this.exportTitle = '确定';
    }
  }

正确的数据返回

错误时数据返回

不管是正确还是错误请求的状态都是200 ，对于后端来说这只是一个下载功能。错误时通过axios 的响应拦截器根本不行，因为返回的status是200。但是错误时也必须要处理呀。因为我们请求时responseType: ‘blob’ ，Blob ，Blob ，Blob ， 直接获取返回的错误信息是不行的。所以需要转换。代码如下，自己封装成了异步。

// 文件流到处错误是，捕获异常
export const  fileToJson = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = res => {
      const { result }: any = res.target; // 得到字符串
      const data = JSON.parse(result); // 解析成json对象
      resolve(data);
    }; // 成功回调
    reader.onerror = err => {
      reject(err);
    }; // 失败回调
    reader.readAsText(new Blob([file]), 'utf-8'); // 按照utf-8编码解析
  });
};