java(前后端交互) - 使用ajax请求下载excel后文件无法打开?

最新推荐文章于 2024-09-12 14:41:18 发布

Xiao·Jian

最新推荐文章于 2024-09-12 14:41:18 发布

阅读量4k

点赞数 4

分类专栏：项目开发走过的坑前端实战知识点

本文链接：https://blog.csdn.net/qq_42986107/article/details/109380113

版权

项目开发走过的坑同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

前端实战知识点

1 篇文章 0 订阅

订阅专栏

本文探讨了前端通过Ajax请求后台模板文件下载时遇到的乱码问题，重点讲述了两种解决方法：一是利用window.location.href直接下载，二是设置响应类型为blob并创建下载链接。同时提供了后端EasyExcel响应配置代码。

摘要由CSDN通过智能技术生成

1.问题如下:

1.1 后台直接用get请求地址在浏览器访问可以下载;
1.2 跟前台交互后, 也是可以下载的, 但是一直无法打开! ( 查看响应结果为乱码 )
在这里插入图片描述

2.问题分析:

前端是直接通过ajax进行请求的，因为服务器端已经通过文件的形式响应给前端所以没有任何的json数据返回需要进行接收, 故无法下载;

3.解决办法:

①使用window.location.href = ‘url’；的方式进行请求，问题得到解决.

window.location.href = "http://localhost/down/template";

②设置响应类型: responseType: ‘blob’ ( 本人使用, 考虑到安全问题. )

axios({
	  url: '/down/template',
	  method: 'get',
	  responseType: 'blob'
}).then(res => {
	  const url = window.URL.createObjectURL(new Blob([res.data]));
	  const link = document.createElement('a');
	  link.style.display = 'none';
	  link.href = url;
	  link.setAttribute('download', '文件名称.xlsx');
	  document.body.appendChild(link);
	  link.click();
	  document.body.removeChild(link);
}).catch(err => {
	  console.log(err);
});

============================================================================================
附上后端代码如下:

public static void downTemplate(HttpServletResponse response) {
		response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");
		response.setHeader("Content-Disposition", "attachment; filename=" + URLEncoder.encode("文件名称", "UTF-8") + ".xlsx");
		response.setHeader("Pragma", "public");
		response.setHeader("Cache-Control", "no-store");
		response.addHeader("Cache-Control", "max-age=0");
		
		//使用的easyexcel. 
		Resource resource = new ClassPathResource("123.xlsx");
		ExcelWriter writer = EasyExcel.write(response.getOutputStream()).withTemplate(resource.getInputStream()).build();
		writer.finish();
}