excel 文件下载为 undefined ,记录

585 阅读1分钟

需要和后端联调一个文件下载的接口,在postman上测试,效果OK的。但是自己在测试的时候,就成下面这个样子了。

image.png

这是我本地的效果

image.png

下载方法如下

// excel 文件下载
 download(row) {
      const downloadObj = {
        tk0101: row.tk0101
      }
      const fileName = row.tk0103
      this.loading = true
      downloadExportFile(downloadObj).then(res => {
        const blob = new Blob([res.data], {
          type: 'application/vnd.ms-excel'  // Blog 文件流类型
        })
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        window.URL.revokeObjectURL(link.href)
        document.body.removeChild(link)
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.loading = false
      })
    },

原因分析,为啥下载的 excel 文件是 undefined

请求方式、传参是正确的。 接口返回的结果也是正确的。 为啥下载的 excel 是undefined呢 image.png

  • 问了 chatgpt ,回答如下

image.png

  • 改成如下就可以了
import request from '@/utils/request'
//  x下载文件
export function downloadLaborManageLocalFileNew(data) {
  return request({
    url: '/xxx/downloadFile',
    method: 'get',
    params: data,
    responseType: 'blob' // 关键点: 加上这个,就可以了
  })
}

常用的 blob 类型

参考:Blob 文件流下载 type类型_new blob type类型_格子衫·的博客-CSDN博客

文件名后缀blob文件流类型
.docapplication/mswordapplication/msword
.xlsapplication/vnd.ms-excelapplication/vnd.ms-excel