请求成功,响应二进制数据,但是页面不下载
页面放了一个下载按钮,点击下载后,可以正常请求下载的接口,而且也成功响应,但是文件不会从浏览器页面下载下来。
<div>
<button onclick="down()">下载Excel</button>
</div>
function download() {
$.ajax({
type: 'GET',
url: '/download',
success: function (data) {
layer.msg(data.message)
}
});
}
原因是发送Ajax请求后,后端响应的是二进制数据,jQuery的Ajax只能接收JSON等数据。
解决办法:
1、最简单的办法,在新的标签页请求接口,在请求接口上自己拼接参数
function download() {
window.open("/download");
}
2、创建一个form
表单,提交表单的方式下载
function download() {
var studentName = 1;
var form = document.createElement('form');
form.id = 'form';
form.name = 'form';
//把这个form放在body里面
document.body.appendChild(form);
//给form里面创建一个input框,隐藏掉,来存参数
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'studentName';
input.value = studentName;
//把input放在form里面
form.appendChild(input);
form.method = "GET" //请求方式
form.action = '/download';
form.submit();
//删掉form
document.body.removeChild(form)
}
——完——
EasyExcel官方文档
示例:
@RestController
public class StudentController {
@RequestMapping("/download")
public JsonResult download(HttpServletResponse response) throws IOException {
//文件名需要这样写,不能在setHeader直接写中文名,否则下载的文件名字为空,只有后缀
String fileName = new String("学生表.xlsx".getBytes(), StandardCharsets.ISO_8859_1);
response.setContentType("application/vnd.ms-excel");
response.setCharacterEncoding("utf8");
response.setHeader("Content-disposition", "attachment;filename=" + fileName );
EasyExcel.write(response.getOutputStream(), Student.class)
.sheet("sheet")
.doWrite(getStudentList());
return new JsonResult().setCode(1).setMessage("下载成功!").setData(null);
}
private List getStudentList() {
ArrayList<Student> students = new ArrayList<>();
for (int i = 0; i < 1000; i++) {
Student student = new Student(i, "名字" + i, i, new Date());
students.add(student);
}
return students;
}
}
Student类(Excel行对象)
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Student {
@ExcelProperty("学号")
private Integer id;
@ExcelProperty("姓名")
private String name;
@ExcelProperty("年龄")
private Integer age;
@ExcelProperty("出生日期")
private Date birthday;
}