js+spring boot实现简单前后端文件下载功能

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 = urllink.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")@ResponseBodypublic 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);}