需求下载导出excel:
提示:当下载excel时报错集
下载代码如下
下载方法:
export const saveAsExcel = (res: any, fileName: string) => {
//指定类型文件类型application/json;charset=utf-8
const blob = new Blob([res.data], { type: "application/ms.ms-excel" })
const alink = document.createElement("a")
alink.style.display = "none"
alink.download = '1111.xlsx'// 下载后文件名
const href = window.URL.createObjectURL(blob)
alink.href = href
document.body.appendChild(alink)
alink.click()
document.body.removeChild(alink) // 下载完成移除元素
URL.revokeObjectURL(href) // 释放掉blob对象
}
请求数据方法:
export function getTempalteApi() {
return request({
url: "setting/actionTerminal/download-tempalte",
method: "get",
responseType: 'blob'
})
}
1.问题描述:
当下载调取后端接口下载成功但是下载下来文件内容为object,object,
错误代码如下:注意new Blod 中 res
export const saveAsExcel = (res: any, fileName: string) => {
//指定类型文件类型application/json;charset=utf-8
const blob = new Blob([res], { type: "application/ms.ms-excel" })
const alink = document.createElement("a")
alink.style.display = "none"
alink.download = '1111.xlsx'// 下载后文件名
const href = window.URL.createObjectURL(blob)
alink.href = href
document.body.appendChild(alink)
alink.click()
document.body.removeChild(alink) // 下载完成移除元素
URL.revokeObjectURL(href) // 释放掉blob对象
}
网上查阅资料提示数据格式问题,然后控制台打印接口返回数据格式发现res内容如下图,而我们需要做处理的为data中内容(此时数据还有问题,继续往下看),所以需要我们取res.data中数据才可以如最前面正确代码
2.问题描述:
当我修改了上述问题之后下载文件,发现下载下来的文件报错,wps打不开,然后查找资料发现是因为请求头中缺少 responseType: 'blob'(如下图 )告诉后端接口返回数据格式为二进制 所以才会出现上图中data中数据 ,
export function getTempalteApi() {
return request({
url: "setting/actionTerminal/download-tempalte",
method: "get",
})
}
当加上 responseType: 'blob' 时请求返回数据格式如下图此时再次导出,格式正常。