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

news2024/12/23 20:14:18

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);
    }