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

news2024/11/23 3:30:09

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


二、项目启动测试

在这里插入图片描述
项目启动访问:http://localhost:8080/toIndex

在这里插入图片描述
点击按钮实现下载
在这里插入图片描述
查看txt文本
在这里插入图片描述

四、总结

以上就是一个简单的文件下载功能的实现demo。
这里虽然不是前后端分离开发,但是设计理念完全按照后端传递数据,不对view做过多处理,还是很有参考学习价值的。

很多细节我都忽略了,只是展示核心的部分。
比如你文件下载涉及分包下载,大文件分段下载等
比如对下载格式的泛化处理等

希望可以帮助大家解决问题,多多点赞主助力博主继续更新~
大能们轻喷,就是一个简单demo,互相学习了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1908882.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HackTheBox--BoardLight

BoardLight 测试过程 1 信息收集 NMAP端口扫描 端口扫描开放 22、80 端口 80端口测试 # 添加 boardLight.htb 到hosts文件 echo "10.10.11.11 boardLight.htb" | sudo tee -a /etc/hosts检查网页源代码&#xff0c;发现 board.htb # 添加 board.htb 到 hosts 文…

安卓应用开发学习:腾讯地图SDK应用改进,实现定位、搜索、路线规划功能集成

一、引言 我的上一篇学习日志《安卓应用开发学习&#xff1a;通过腾讯地图SDK实现定位功能》记录了利用腾讯地图SDK实现手机定位功能&#xff0c;并能获取地图中心点的经纬度信息。这之后的几天里&#xff0c;我对《Android App 开发进阶与项目实战》一书第九章的内容深入解读…

Open3D KDtree的建立与使用

目录 一、概述 1.1kd树原理 1.2kd树搜索原理 1.3kd树构建示例 二、常见的领域搜索方式 2.1K近邻搜索&#xff08;K-Nearest Neighbors, KNN Search&#xff09; 2.2半径搜索&#xff08;Radius Search&#xff09; 2.3混合搜索&#xff08;Hybrid Search&#xff09; …

STM32F446RE实现多通道ADC转换功能实现(DMA)

目录 概述 1 软硬件介绍 1.1 软件版本 1.2 ADC引脚介绍 2 STM32Cube配置项目 2.1 配置基本参数 2.2 ADC通道配置 2.3 DMA通道配置 3 项目代码介绍 3.1 自生成代码 3.2 ADC-DMA初始化 3.3 测试函数 3.4 ADC1、ADC2、ADC3轮询采集数据存贮格式 4 测试 源代码下载地…

clickhouse学习笔记(五)SQL操作

目录 一、增 二、删改 三、查询以及各种子句 1、with子句 a、表达式为常量 b、表达式为函数调用 c、表达式为子查询 2、from子句 3、array join子句 a、INNER ARRAY JOIN b、LEFT ARRAY JOIN c、数组的一些函数 groupArray groupUniqArray arrayFlatten splitBy…

小米订单锐减背后的挑战与应对之道

近期&#xff0c;富士康印度子公司Bharat FIH面临高管离职、工厂关闭的困境&#xff0c;其背后原因之一是小米订单的显著下滑&#xff0c;据报道&#xff0c;这一降幅高达70%。这一现象不仅反映了富士康在印度市场的艰难处境&#xff0c;也揭示了小米在全球智能手机市场面临的挑…

Atom CMS v2.0 SQL 注入漏洞(CVE-2022-24223)

前言 概要 CVE-2022-24223 是一个发现于 Atom CMS v2.0 中的 SQL 注入漏洞。该漏洞存在于 /admin/login.php 文件中&#xff0c;通过该文件&#xff0c;攻击者可以在未经身份验证的情况下执行任意的 SQL 命令。 漏洞描述 该漏洞位于 Atom CMS 的管理员登录页面&#xff08;/a…

甄选范文“论区块链技术及应用”,软考高级论文,系统架构设计师论文

论文真题 区块链作为一种分布式记账技术,目前已经被应用到了资产管理、物联网、医疗管理、政务监管等多个领域。从网络层面来讲,区块链是一个对等网络(Peer to Peer, P2P),网络中的节点地位对等,每个节点都保存完整的账本数据,系统的运行不依赖中心化节点,因此避免了中…

跨境电商代购系统与电商平台API结合的化学反应

随着全球化的不断推进和互联网技术的飞速发展&#xff0c;跨境电商已成为国际贸易的重要组成部分。跨境电商代购系统作为连接国内外消费者与商品的桥梁&#xff0c;不仅为消费者提供了更多元化的购物选择&#xff0c;也为商家开辟了更广阔的市场空间。在这一过程中&#xff0c;…

数据结构——顺序表(java实现)

文章目录 顺序表顺序表的定义代码实现&#xff1a;创建一个顺序表的类在顺序表中增加一条新的数据展示顺序表中内容在pos位置处插入一条数据判断顺序表中是否包含指定的数据查找某个数据在顺序表中的位置获取pos位置的元素将pos位置的元素改为value删除顺序表中第一个出现的数据…

搭建基础库~

前言 项目中会用到工具库、函数库以及一些跟框架绑定的组件&#xff0c;如果这些基础模块每个项目都实现一套&#xff0c;维护起来那真的头大&#xff0c;你说呢&#x1f609; 搭建流程 准备工作 创建文件夹myLib、安装Git以及pnpm 目录大概就系这样子&#xff1a; myLib ├…

从零开始做题:好怪哦

题目 给出一个压缩文件 解题 方法1 01Edit打开&#xff0c;发现是个反着的压缩包&#xff08;末尾倒着的PK头&#xff09; import os# 目标目录路径 # target_directory /home/ai001/alpaca-lora# 切换到目标目录 # os.chdir(target_directory)# 打印当前工作目录以确认…

# Redis 入门到精通(一)数据类型(1)

Redis 入门到精通&#xff08;一&#xff09;数据类型&#xff08;1&#xff09; 一 、Redis 入门到精通 基本介绍 1、Redis 基础 ( windows 环境 ) redis 入门数据类型通用命令Jedis 2、Redis 高级 ( linux 环境 ) 持久化redis.conf 配置事务集群 3、Redis 应用 ( linux…

WAIC | 2024年世界人工智能大会“数学与人工智能”学术会议成功举办!

由斯梅尔数学与计算研究院&#xff08;Smale Institue of Mathematics & Computation&#xff09;主办的2024年世界人工智能大会(WAIC)“数学与人工智能”学术会议7月4日在上海世博中心圆满落幕&#xff01;作为全球性高级别学术研讨会&#xff0c;此次会议由华院计算技术&…

SQLServer的系统数据库用别的服务器上的系统数据库替换后做跨服务器连接时出现凭证、非对称金钥或私密金钥的资料无效

出错作业背景&#xff1a; 公司的某个sqlserver服务器要做迁移&#xff0c;由于该sqlserver服务器上数据库很多&#xff0c;并且做了很多的job和维护计划&#xff0c;重新安装的sqlserver这些都是空的&#xff0c;于是就想到了把系统4个系统数据库进行替换&#xff0c;然后也把…

Camera Raw:裁剪

Camera Raw 的裁剪 Crop面板提供了裁剪、旋转、翻转、拉直照片等功能&#xff0c;通过它们可以更精确地调整照片的视角和范围&#xff0c;以达到最佳二次构图的视觉效果。 快捷键&#xff1a;C ◆ ◆ ◆ 使用方法与技巧 1、使用预设 选择多种裁剪预设&#xff08;如 1:1、16:…

JAVA基础-----128陷阱

一、何为128陷阱 Java中Integer类型在使用比较时的特殊行为------128陷阱&#xff0c;解释了当数值在-128到127范围内&#xff0c;由于valueOf方法的缓存机制导致地址相同&#xff0c;比较为真&#xff1b;超出这个范围则新分配内存&#xff0c;地址不同&#xff0c;比较为假。…

YOLOv10改进 | 主干篇 | 低照度增强网络PE-YOLO改进主干(改进暗光条件下的物体检测模型)

一、本文介绍 本文给大家带来的改进机制是低照度图像增强网络PE-YOLO中的PENet&#xff0c;PENet通过拉普拉斯金字塔将图像分解成多个分辨率的组件&#xff0c;增强图像细节和低频信息。它包括一个细节处理模块&#xff08;DPM&#xff09;&#xff0c;用于通过上下文分支和边…

数据链路层(超详细)

引言 数据链路层是计算机网络协议栈中的第二层&#xff0c;位于物理层之上&#xff0c;负责在相邻节点之间的可靠数据传输。数据链路层使用的信道主要有两种类型&#xff1a;点对点信道和广播信道。点对点信道是指一对一的通信方式&#xff0c;而广播信道则是一对多的通信方式…

办公必备——ONLYOFFICE8.1版本桌面编辑器

一、介绍ONLYOFFICE ONLYOFFICE是一款免费的开源办公软件&#xff0c;它可以让你创建、编辑和分享文档、表格和演示文稿。就像微软的Office一样&#xff0c;但它是完全免费的&#xff0c;而且可以在多种设备上使用&#xff0c;包括电脑和手机。它还支持多人同时在线编辑文档&am…