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

相关推荐
北冥湖畔的燕雀2 小时前
C++泛型编程(函数模板以及类模板)
开发语言·c++
demi_meng3 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
QX_hao3 小时前
【Go】--map和struct数据类型
开发语言·后端·golang
你好,我叫C小白3 小时前
C语言 循环结构(1)
c语言·开发语言·算法·while·do...while
MC丶科4 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20164 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
Evand J5 小时前
【MATLAB例程】基于USBL和DVL的线性回归误差补偿,对USBL和DVL导航数据进行相互补偿,提高定位精度,附代码下载链接
开发语言·matlab·线性回归·水下定位·usbl·dvl
lang201509286 小时前
Spring Boot 入门:5分钟搭建Hello World
java·spring boot·后端
爱喝白开水a6 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱