前后端分离,前端以文件流的方式下载文件

495 阅读1分钟

使用axios封装统一处理

// 封装下载方法(流文件)
const downloadUrl = (url: any) => {
  const iframe: any = document.createElement('iframe')
  iframe.style.display = 'none'
  iframe.src = url
  iframe.onload = function () {
    document.body.removeChild(iframe)
  }
  document.body.appendChild(iframe)
}



import axios from 'axios';
// 集中处理
axios.interceptors.response.use(
  (response: any) => {
    // store.commit('SPIN_VISIBLE', false);
    // 处理excel文件
    if (response.headers && (response.headers['content-type'] === 'application/x-msdownload' || response.headers['content-type'] === 'application/vnd.ms-excel;charset=utf-8' || response.headers['content-type'] === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')) {
      downloadUrl(response.request.responseURL)
      return {
        data: {
          code: 0,
          data: {},
          msg: '导出成功'
        }
      }
    }
    return response;
  },
  (error: any) => {
    if (this.handleError(error)) {
      return new Promise(() => {}); // 中止Promise链
    } else {
      return Promise.reject(error);
    }
  }
);

传参方式:(特别注意)需要用进行编码处理:encodeURI()

const { code, data, msg }: any = await exportexls(encodeURI(parmdata.downlink))
if (code === 0) {
  api_getData()
} else {
  message.error(msg || '导出失败!')
}

传参数方式(这里是多条数组,所以需要循环传参)需要注意的是,每一条的最后一个需要加'&'符号,不然也会报错。

image.png image.png