1、由于传递的参数比较多，网页动态指定需要下载的文件，所以希望使用post方式传递参数。
2、ajax方式请求的数据只能存放在javascipt内存空间，下载文件时无法触发浏览器打开保存文件对话框，也就无法将下载的文件保存到硬盘上。参考地址
3、通常，在web前端需要下载文件，都是通过指定<a>标签的href属性，访问服务器端url即可下载并保存文件到本地，但是这种方式使用的是HTTP GET方法，参数只能通过URL参数方式传递，无法使用POST方式传递参数。
4、但是，模拟表单提交同步方式下载文件，能够弹出保存文件对话框，所以，考虑使用表单提交方式下载文件，因此也就无法使用POST json data body提交数据。
此外，form表单需要注意:
每个input标签都要有name属性,后台代码（Springboot）对应解析时，使用name值作为key获取input值;
因此，后台代码的签名应该为：download(@RequestParam("ids") List<Integer> ids, HttpServletRequest request, HttpServletResponse response)，其中@RequestParam("ids")表明使用表单提交，而且需要解析key为ids的值。
直接使用Ajax post请求返回的数据，打印response，大概会显示为：
Ajax直接请求返回
示例代码：
<!--前端-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input id="downsload" type="button" value="下载" />
<script>
var DownLoadFile = function (options) {
var config = $.extend(true, { method: "post" }, options);
var $iframe = $('<iframe id="down-file-iframe" />');
var $form = $(
'<form target="down-file-iframe" method="' + config.method + '" />'
);
$form.attr("action", config.url);
var ids = $.makeArray(config.data);
$form.append('<input type="hidden" name="ids" value="' + ids + '" />');
$iframe.append($form);
$(document.body).append($iframe);
$form[0].submit();
$iframe.remove();
};
$("#downsload").on("click", function () {
var params = {};
//调用
DownLoadFile({
url: "http://url/download", //请求的url
data: 3, //要发送的数据
});
});
</script>
</body>
</html>
//服务端
@PostMapping("/download")
public void download(@RequestParam("ids") List<Integer> ids, HttpServletRequest request, HttpServletResponse response) {
//TODO: 业务逻辑，如获取文件
response.setHeader("Content-Disposition", "attachment;fileName=" + fileName);
response.setHeader("content-type", "application/octet-stream");
response.setContentType("application/octet-stream");
response.setCharacterEncoding("UTF-8");
byte[] buffer = new byte[1024];
FileInputStream fileInputStream = null;
BufferedInputStream bufferedInputStream = null;
try {
fileInputStream = new FileInputStream(file);
bufferedInputStream = new BufferedInputStream(fileInputStream);
OutputStream oStream = response.getOutputStream();
int i = bufferedInputStream.read(buffer);
while (i != -1) {
oStream.write(buffer, 0, i);
i = bufferedInputStream.read(buffer);
}
return true;
} catch (Exception e) {
e.printStackTrace();
} finally {
if (bufferedInputStream != null) {
try {
bufferedInputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (fileInputStream != null) {
try {
fileInputStream.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
//后台下载代码粘贴不完善，可能无法使用，服务端代码和本文下载中心偏离，仅作说明
网友评论