实现下载Excel文件方法其实很简单,需要和后端沟通好返回的数据形式,一般都是Blob流,类似下图:
当通过请求接口,拿到后端返回的Excel文件数据时,就需要前端自己去实现下载了,因为导出功能可能很多页面都要用到,所以最好是封装成公共方法,代码如下:
/**
* 下载 Excel 文件
* @param fileDate 接口返回的文件数据
* @param fileName 下载的文件名
*/
export const downloadExcel = (fileDate: any, fileName: string) => {
// TODO fileDate 的ts类型应该是 Blob,但是我这里接口返回的数据类型是 res: AxiosResponse<any, any>,会导致提示类型不匹配,所以用any吧
return new Promise((resolve, reject) => {
// 为 blob 设置文件类型,这里以 .xlsx 为例
const blob = new Blob([fileDate], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
})
// 创建一个临时的url指向blob对象
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = fileName
a.click()
// 释放这个临时的对象url
window.URL.revokeObjectURL(url)
return resolve('导出成功')
})
}
这样就可以实现Excel文件的导出下载啦!