注意第一种方式返回值必须为void
@GetMapping("/t1")
public void down1(HttpServletResponse response) throws Exception {
response.reset();
response.setContentType("application/octet-stream;charset=utf-8");
response.setHeader(
"Content-disposition",
"attachment; filename=test.png");
try(
BufferedInputStream bis = new BufferedInputStream(new FileInputStream("E:\\desktop\\1.png"));
// 输出流
BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
){
byte[] buff = new byte[1024];
int len = 0;
while ((len = bis.read(buff)) > 0) {
bos.write(buff, 0, len);
}
}
}
@GetMapping("/t2")
public ResponseEntity<InputStreamResource> down2() throws Exception {
InputStreamResource isr = new InputStreamResource(new FileInputStream("E:\\desktop\\1.png"));
return ResponseEntity.ok()
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.header("Content-disposition", "attachment; filename=test1.png")
.body(isr);
}
@GetMapping("/t3")
public ResponseEntity<ByteArrayResource> down3() throws Exception {
byte[] bytes = Files.readAllBytes(new File("E:\\desktop\\1.png").toPath());
ByteArrayResource bar = new ByteArrayResource(bytes);
return ResponseEntity.ok()
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.header("Content-disposition", "attachment; filename=test2.png")
.body(bar);
}
后端使用前三种的一种方式,请求方式使用非GET请求,前端使用Blob类型接收
某些情况下,在下载时需要向后端POST一些参数,这时需要前端做一定配合,将接收类型设定为Blob
@PostMapping("/t4")
public ResponseEntity<ByteArrayResource> down4(String fileName, @RequestBody Map data) throws Exception {
System.out.println(data);
byte[] bytes = Files.readAllBytes(new File("E:\\desktop\\1.png").toPath());
ByteArrayResource bar = new ByteArrayResource(bytes);
return ResponseEntity.ok()
.contentType(MediaType.APPLICATION_OCTET_STREAM)
.header("Content-disposition", "attachment; filename=test.png")
.body(bar);
}
前端代码(这里使用了原生的ajax):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function download() {
var ajax = new XMLHttpRequest();
ajax.withCredentials = true;
ajax.responseType = "blob";
const fileName = "ttt.txt";
ajax.open('post','http://localhost:7901/demo/down/file/t4?fileName=' + fileName);
ajax.setRequestHeader("Content-Type","application/json;charset=utf-8");
// ajax.setRequestHeader("Accept","application/json;charset=utf-8");
ajax.send(JSON.stringify({firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}));
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
console.log(ajax.response);
const href = URL.createObjectURL(ajax.response);
const a = document.createElement('a');
a.setAttribute('href', href);
a.setAttribute('download', fileName);
a.click();
URL.revokeObjectURL(href);
}
}
}
</script>
</head>
<body>
<input type="button" value="下载" onclick="download();"/>
</body>
</html>