调用原生方法下载文件:
// 传入导出文件方法名
handleExportXls(fileName) {
if (!fileName || typeof fileName != 'string') {
fileName = '导出文件'
}
// 后端接收数据
let ids = []
this.dataSource.forEach((v) => {
ids.push(v.id)
})
// 调用下载文件的方法,传入导出接口的参数
exportExcel(ids).then((data) => {
// 如果返回的数据为空,则提示文件下载失败
if (!data) {
this.$message.warning('文件下载失败')
return
}
// 判断浏览器是否支持 msSaveBlob 方法(IE 浏览器特有)
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 使用 msSaveBlob 方法下载文件
window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
} else {
// 创建一个下载链接
let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
// 文件名及后缀拼接
link.setAttribute('download', fileName + '.xls')
// 将下载链接添加到页面并触发点击
document.body.appendChild(link)
link.click()
// 下载完成后移除下载链接
document.body.removeChild(link)
// 释放 blob 对象占用的内存
window.URL.revokeObjectURL(url)
}
})
},
前端使用axios下载文件时,需要确保设置了正确的responseType为'blob',以Blob形式接收响应数据。如果不设置responseType为'blob',axios将默认以字符串形式接收响应数据。由于下载的文件是二进制数据,如果以字符串形式接收,则可能导致文件内容被错误地解析或损坏,出现编码错误或数据丢失的情况。
// 导出Blob形式接收响应数据
export function exportExcel(data) {
return axios({
url: '/url/',
method: 'post',
data,
responseType: 'blob',
})
}