前端处理axios请求下载后端返回的文件流代码实例

function logsDownload(params) {
 return axios.get('xxx/xxx/xxx',{
   params,
   responseType: 'blob'
 })
}

function download(fileName ='log', type: 'txt' | 'json, file:Blob) {
   const blob = new Blob([file]);
    // 获取heads中的filename文件名
    const downloadElement = document.createElement('a');
    // 创建下载的链接
    const href = window.URL.createObjectURL(blob);
    downloadElement.href = href;
    // 下载后文件名
    downloadElement.download = `${fileName}.${type}`
    document.body.appendChild(downloadElement);
    // 点击下载
    downloadElement.click();
    // 下载完成移除元素
    document.body.removeChild(downloadElement);
    // 释放掉blob对象
    window.URL.revokeObjectURL(href);
}

// 定义一个读取文件的方法
async function readFileAsText (file:File){
      const fileReader = new FileReader()
      let text
      await new Promise(resolve=>{
         fileReader.onLoad = ()=>{
            text = fileReader.result
            resolve(true)
         }
        fileReader.readAsText(file, 'utf8')
      })
      return text || ''
 }

// 响应拦截器
banseInstance.interceptors.response.use(response => {
  ...
  // 文件流直接返回
  if (response .request.responseType === 'blob' ) {
      if (response .data.type === 'application/json') {
        const res = await readFileAsText(response.data)

        ElMessage.error(JSON.parse(res).message || '下载失败')
        return false;
     } else {
       return response .data;
     }
  }
 ...
}

  const handleDown = () => {
    const fileName = 'xxxx'
    const file = await logsDownload(params)
    if (file) {
     download(fileName, 'txt', file)
     ElMessage.success('下载成功')
    }
  }