设计网站推荐大百度推广开户2400
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