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,互相学习了。

相关推荐
一勺菠萝丶1 分钟前
Spring Boot + MyBatis/MyBatis Plus:XML中循环处理List参数的终极指南
xml·spring boot·mybatis
charlie11451419127 分钟前
深入理解Qt的SetWindowsFlags函数
开发语言·c++·qt·原理分析
likeGhee1 小时前
python缓存装饰器实现方案
开发语言·python·缓存
whoarethenext1 小时前
使用 C++/Faiss 加速海量 MFCC 特征的相似性搜索
开发语言·c++·faiss
项目題供诗1 小时前
黑马python(二十五)
开发语言·python
RainbowSea1 小时前
问题:后端由于字符内容过长,前端展示精度丢失修复
java·spring boot·后端
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
风象南2 小时前
SpringBoot 控制器的动态注册与卸载
java·spring boot·后端