需要和后端联调一个文件下载的接口,在postman上测试,效果OK的。但是自己在测试的时候,就成下面这个样子了。
这是我本地的效果
下载方法如下
// 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呢
- 问了 chatgpt ,回答如下
- 改成如下就可以了
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文件流类型 |
|---|---|
| .doc | application/mswordapplication/msword |
| .xls | application/vnd.ms-excelapplication/vnd.ms-excel |