后端接口返回文件流，前端将其导出下载在浏览器

原创已于 2023-06-28 10:45:06 修改 · 1.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-21 16:08:03 首次发布

前端学习同时被 2 个专栏收录

6 篇文章

订阅专栏

vue项目中问题总结

6 篇文章

订阅专栏

文章介绍了如何使用axios库进行接口请求以下载文件。关键步骤包括配置post请求的responseType为blob，设置headers，以及处理返回的blob数据来触发文件下载。同时，文章强调了downloadFileTools方法需要的参数类型，并提供了错误处理机制。

1.先定义一下接口注意一定要配置responseType和headers

export function exportList (params) {
  return axios({
    url: process.env.VUE_APP_API_BASE_EVAL_URL + '/prorecord/downloadExcel',
    method: 'post',
    params,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
      'accessToken': sessionStorage.getItem(ACCESS_TOKEN)
    }
  })
}

2.写一个方法

export function downloadFileTools (blob, name) {
  const readerUrl = window.URL.createObjectURL(blob)
  const tempLink = document.createElement('a')
  tempLink.download = name
  tempLink.href = readerUrl
  tempLink.click()
  return Promise.resolve()
}

3.在需要导入的页面中引用,把导出方法绑定到按钮上即可

import { exportList } from '@/api/evalTaskManage.js'
import { downloadFileTools } from '@/utils/fileTool'

...
methods:{
exportList () {
      exportList({ taskId: this.taskId }).then(res => {
        let fileNameEncode = ''
        let error = ''
        // 如果报错，拿到报错信息
        if (res.headers['error']) {
          error = res.headers['error']
          const errorInfo = decodeURIComponent(error)
          this.$message.error(errorInfo)
        } else {
          // 切割出文件名
          if (res.headers['content-disposition']) {
            fileNameEncode = res.headers['content-disposition'].split('filename=')[1]
          // 解码
            const fileName = decodeURIComponent(fileNameEncode)
            downloadFileTools(new Blob([res.data]), fileName)
          }
        }
      })
      .catch(error => {
        console.log('🚀 ~ file: tree.vue:84 ~ exportList ~ error', error)
      })
    },
  }