java后端通过HttpServletResponse 返回文件流

在Content-Disposition中插入文件名
一定要设置Access-Control-Expose-Headers，代表跨域该Content-Disposition返回Header可读，如果没有，前端是取不到Content-Disposition的，可以在统一的配置里添加

response.setContentType("application/vnd.ms-excel;charset=utf-8");
response.setCharacterEncoding("UTF-8");
// 跨域暴露Header属性Content-Disposition
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
//test.xls是弹出下载对话框的文件名，不能为中文，中文请自行编码
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(byType.getName() , StandardCharsets.UTF_8) + ".xls");

vue前端通过 axios接收文件

老生常谈的 blob或者arraybuffer
这里以arraybuffer举例

export const exportExcel=(data: Object)=>{return request.get( option: {url:'/scrm/customer/exportExcel'data,responseType:'arraybuffer'})
})

找你的axios封装

vue2找 request.js
vue3找service.ts
或者你们自己封装的文件
找到里边的响应拦截器

request.interceptors.response.use

service.interceptors.response.use

在返回成功的前提下单独处理
直接返回response
如果你们封装的axios跟没封装一样可以忽略

if (response.request.responseType === 'blob' || response.request.responseType === 'arraybuffer') {return response
}

封装个统一的方法
TS

const download = {
object: ({data, headers}, fileName :string, contentType: string) => {try {const uri =headers["content-disposition"].split(";")[1].split("filename=")[1];fileName = decodeURIComponent(uri)contentType = headers["content-type"]} catch (e) {console.error(e)}// 老一套blob const blob = new Blob([data],{ type: contentType})const link = document.createElement('a')const href = window.URL.createObjectURL(blob) // 创建下载的链接link.href = hreflink.download = fileNamelink.click()document.body.removeChild(link)window.URL.revokeObjectURL(href)}
}

JS

 downloadObject(res, fileName, contentType) {let data = res.datalet headers = res.headerstry {const uri =headers["content-disposition"].split(";")[1].split("filename=")[1];fileName = decodeURIComponent(uri)contentType = headers["content-type"]} catch (e) {console.error(e)}// 老一套blob const blob = new Blob([data],{ type: contentType})const link = document.createElement('a')const href = window.URL.createObjectURL(blob) // 创建下载的链接link.href = hreflink.download = fileNamelink.click()document.body.removeChild(link)window.URL.revokeObjectURL(href)}

调用

	exportExcel({//请求参数}).then(res => {// vue3download.object(res,'','')// vue2this.downloadObject(res)})

最后

需要注意的一共有两个点
第一 后端必须配置
response.setHeader(“Access-Control-Expose-Headers”, “Content-Disposition”);
第二 axios返回拦截器一定要返回完整的response，不能返回经过加工的response.data