js+boot项目实现自定义下载
一、前端页面
1、先导入axios的js包
2、注意axios响应的格式:result.data.
真实的数据内容
3、这里请求的url就是你boot项目的getMapping的url,保持一致即可
4、如果想在后端设置文件名,那么后端生成后,响应一个fileName字段,前端解析给值就可以了。
这里是js在页面追加了一个a标签,调用click方法,实现代码触发跳转的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/axios.min.js"></script>
</head>
<body>
<h2>模拟下载</h2>
<button onclick="downloading()">Click me</button>
</body>
<script>
async function downloading() {
const result = await axios.get('http://localhost:8080/download');
console.log(result.data)
if (result.data.code === 200) {
const blob = new Blob([result.data.data], {type: 'text/plain;charset=utf-8'});
const link = document.createElement('a')
link.style.display = 'none'
const url = URL.createObjectURL(blob)
link.href = url
link.download = '文件名.txt'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
URL.revokeObjectURL(url)
} else {
alert("下载失败!")
}
}
</script>
</html>
二、后端代码
1、网上比较多的demo都是返回resp那种通过设置请求体的方式实现的,这里提供另外一种思路,返回数据数组,如果是excel等其他格式,可以响应返回二进制数据 byte[] 这种的。
2、没有中文等纯ASCII码,可以设置base64响应,如果有Unicode编码,切记请勿使用base64编码,否则前端atob()方法之后,会造成乱码现象。
3、这里使用了Gson,通过其格式化,将map转为了json字符串返回给前端
@GetMapping("/download")
@ResponseBody
public String downloadFile() {
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 500; i++) {
sb.append("模拟一条数据").append(i).append("\n");
}
Map<String, Object> resultMap = new HashMap<>(6);
resultMap.put("code", 200);
resultMap.put("data", sb.toString());
return gson.toJson(resultMap);
}
二、项目启动测试
项目启动访问:http://localhost:8080/toIndex
点击按钮实现下载
查看txt文本
四、总结
以上就是一个简单的文件下载功能的实现demo。
这里虽然不是前后端分离开发,但是设计理念完全按照后端传递数据,不对view做过多处理,还是很有参考学习价值的。
很多细节我都忽略了,只是展示核心的部分。
比如你文件下载涉及分包下载,大文件分段下载等
比如对下载格式的泛化处理等
希望可以帮助大家解决问题,多多点赞主助力博主继续更新~
大能们轻喷,就是一个简单demo,互相学习了。