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

js+boot项目实现自定义下载

一、前端页面

1、先导入axios的js包

2、注意axios响应的格式:result.data.真实的数据内容

3、这里请求的url就是你boot项目的getMapping的url,保持一致即可

4、如果想在后端设置文件名,那么后端生成后,响应一个fileName字段,前端解析给值就可以了。

这里是js在页面追加了一个a标签,调用click方法,实现代码触发跳转的。

html 复制代码
<!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字符串返回给前端

java 复制代码
    @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,互相学习了。

相关推荐
再见晴天*_*3 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
lqjun08274 小时前
Qt程序单独运行报错问题
开发语言·qt
hdsoft_huge6 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
风中的微尘6 小时前
39.网络流入门
开发语言·网络·c++·算法
前端君6 小时前
实现最大异步并发执行队列
javascript
未来之窗软件服务7 小时前
幽冥大陆(二)RDIFSDK 接口文档:布草洗涤厂高效运营的技术桥梁C#—东方仙盟
开发语言·c#·rdif·仙盟创梦ide·东方仙盟
小冯记录编程7 小时前
C++指针陷阱:高效背后的致命危险
开发语言·c++·visual studio
1uther7 小时前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
知识分享小能手8 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
C_Liu_8 小时前
C++:类和对象(下)
开发语言·c++