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

相关推荐
恋猫de小郭12 分钟前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin
JosieBook23 分钟前
【Java编程动手学】使用IDEA创建第一个HelloJava程序
java·开发语言·intellij-idea
Thomas_YXQ23 分钟前
Unity3D DOTS场景流式加载技术
java·开发语言·unity
喜欢敲代码的程序员27 分钟前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
旷世奇才李先生32 分钟前
Ruby 安装使用教程
开发语言·后端·ruby
泓博1 小时前
Objective-c把字符解析成字典
开发语言·ios·objective-c
try2find1 小时前
安装llama-cpp-python踩坑记
开发语言·python·llama
失落的多巴胺1 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear1 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息1 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js