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);}二、項目啟動測試
項目啟動訪問：http://localhost:8080/toIndex
點擊按鈕實現下載
查看txt文本
四、總結
以上就是一個簡單的文件下載功能的實現demo。
這里雖然不是前后端分離開發，但是設計理念完全按照后端傳遞數據，不對view做過多處理，還是很有參考學習價值的。
很多細節我都忽略了，只是展示核心的部分。
比如你文件下載涉及分包下載，大文件分段下載等
比如對下載格式的泛化處理等
希望可以幫助大家解決問題，多多點贊主助力博主繼續更新~
大能們輕噴，就是一個簡單demo，互相學習了。
)
