当前位置: 首页 > article >正文

前端react后端java实现提交antd form表单成功即导出压缩包

前端(React + Ant Design)
1. 创建表单:使用<Form>组件来创建你的表单。
2. 处理表单提交:在onFinish回调中发起请求到后端API,并处理响应。

import React from 'react';
import { Form, Input, Button } from 'antd';const MyForm = () => {const [form] = Form.useForm();const onFinish = async (values) => {try {// 提交表单数据给后端API,并等待响应const response = await fetch('/api/submit-form', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(values)});if (!response.ok) throw new Error('Network response was not ok');// 处理返回的文件流const blob = await response.blob();const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = 'exported.zip'; // 设置下载的文件名document.body.appendChild(a);a.click();window.URL.revokeObjectURL(url);document.body.removeChild(a);} catch (error) {console.error('There was a problem with the form submission:', error);}};return (<Form form={form} name="my_form" onFinish={onFinish}>{/* 表单项 */}<Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}><Input /></Form.Item>{/* 更多表单项... */}<Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
};export default MyForm;

后端(Java + Spring Boot)
假设使用的是Spring Boot作为Java后端框架,以下是如何处理前端请求并生成压缩包的示例代码:

1. 接收表单数据:创建一个REST控制器来接收前端发送的表单数据。
2. 生成压缩包:根据接收到的数据生成压缩包。
3. 发送压缩包:将压缩包作为HTTP响应的一部分发送回前端。
首先,需要添加必要的依赖项到pom.xml中,例如commons-compress用于创建ZIP文件。

<dependency><groupId>org.apache.commons</groupId><artifactId>commons-compress</artifactId><version>1.21</version>
</dependency>

然后,在控制器中处理请求:

import org.springframework.web.bind.annotation.*;
import java.io.*;
import java.util.zip.ZipEntry;
import java.util.zip.ZipOutputStream;@RestController
@RequestMapping("/api")
public class FormController {@PostMapping("/submit-form")public void handleFormSubmit(@RequestBody Map<String, Object> formData, HttpServletResponse response) throws IOException {// 根据formData准备要压缩的文件或文件路径列表...// 设置响应头以指示这是一个文件下载response.setContentType("application/zip");response.setHeader("Content-Disposition", "attachment; filename=exported.zip");// 创建ZIP输出流try (ZipOutputStream zipOut = new ZipOutputStream(response.getOutputStream())) {// 添加文件到ZIP存档...// 这里只是一个示例,你需要根据实际情况调整逻辑File fileToZip = new File("path/to/file.txt");FileInputStream fis = new FileInputStream(fileToZip);ZipEntry zipEntry = new ZipEntry(fileToZip.getName());zipOut.putNextEntry(zipEntry);byte[] bytes = new byte[1024];int length;while ((length = fis.read(bytes)) >= 0) {zipOut.write(bytes, 0, length);}zipOut.closeEntry();fis.close();}}
}

请注意,上述代码片段是简化版的示例,实际应用中可能需要更复杂的逻辑来处理错误、验证以及确保安全性。此外,后端部分还需要根据实际需求调整文件的压缩逻辑。如果需要压缩多个文件或目录,或者有更复杂的需求,则可能需要引入其他库或工具来辅助完成任务。

相关文章:

前端react后端java实现提交antd form表单成功即导出压缩包

前端&#xff08;React Ant Design&#xff09; 1. 创建表单&#xff1a;使用<Form>组件来创建你的表单。 2. 处理表单提交&#xff1a;在onFinish回调中发起请求到后端API&#xff0c;并处理响应。 import React from react; import { Form, Input, Button } from ant…...

vue2中trhee.js加载模型展示天空盒子

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/13b9193d6738428791fc1ff112e03627.png 加载模型的时候需要把模型放在public文件下面 创建场景 this.scene new THREE.Scene()创建相机 this.camera new THREE.PerspectiveCamera(45,this.viewNode.clientWidth / t…...

安装Office自定义项,安装期间出错

个人博客地址&#xff1a;安装Office自定义项&#xff0c;安装期间出错 | 一张假钞的真实世界 卸载PowerDesigner后&#xff0c;打开“WPS文字”时出现下图错误&#xff1a; 解决方法&#xff1a; 按“WinR”快捷键&#xff0c;打开【运行】框&#xff0c;在对话框中输入“re…...

代码审查中的自动化与AI应用

代码审查&#xff08;Code Review&#xff09;作为软件开发中的一项重要实践&#xff0c;通常被认为是提高代码质量、减少bug和提升团队协作的重要手段。随着开发规模的不断扩大&#xff0c;手动代码审查在效率、准确性、以及可扩展性上都存在明显的局限性。尤其是在敏捷开发和…...

蓝桥杯模拟算法:蛇形方阵

P5731 【深基5.习6】蛇形方阵 - 洛谷 | 计算机科学教育新生态 我们只要定义两个方向向量数组&#xff0c;这种问题就可以迎刃而解了 比如我们是4的话&#xff0c;我们从左向右开始存&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;4 到5的时候y就大于4了就是越界了&…...

PostGIS笔记:PostgreSQL 数据库与用户 基础操作

数据库基础操作包括数据模型的实现、添加数据、查询数据、视图应用、创建日志规则等。我这里是在Ubuntu系统学习的数据库管理。Windows平台与Linux平台在命令上几乎无差异&#xff0c;只是说在 Windows 上虽然也能运行良好&#xff0c;但在性能、稳定性、功能扩展等方面&#x…...

Nginx中部署多个前端项目

1&#xff0c;准备前端项目 tlias系统的前端资源 外卖项目的前端资源 2&#xff0c;nginx里面的html文件夹中新建&#xff0c;tlias和sky两个文件夹。 切记这是在nginx/html下创建的 mkdir sky mkdir tlias 把tlias和sky的资源都放到对应的文件夹中 3&#xff0c;编辑配置ngi…...

人力资源管理HR系统的需求设计和实现

该作者的原创文章目录&#xff1a; 生产制造执行MES系统的需求设计和实现 企业后勤管理系统的需求设计和实现 行政办公管理系统的需求设计和实现 人力资源管理HR系统的需求设计和实现 企业财务管理系统的需求设计和实现 董事会办公管理系统的需求设计和实现 公司组织架构…...

2025年美赛B题-结合Logistic阻滞增长模型和SIR传染病模型研究旅游可持续性-成品论文

模型设计思路与创新点&#xff1a; 建模的时候应该先确定我们需要建立什么类的模型&#xff1f;优化类还是统计类&#xff1f;这个题需要大量的数据分析&#xff0c;因此我们可以建立一个统计学模型。 统计学建模思路&#xff1a;观察规律&#xff0c;建立模型&#xff0c;参…...

【太阳——几何计算】

题目 代码 #include <bits/stdc.h> using namespace std; using PII pair<int, int>; using ll long long; const int N 1e5 10; set<PII> s; bool st[N]; struct node {int x, y, id; } arr[2 * N]; int main() {int n, X, Y;cin >> n >> …...

嵌入式MCU面试笔记2

目录 串口通信 概论 原理 配置 HAL库代码 1. 初始化函数 2. 数据发送和接收函数 3. 中断和DMA函数 4. 中断服务函数 串口通信 概论 我们知道&#xff0c;通信桥接了两个设备之间的交流。一个经典的例子就是使用串口通信交换上位机和单片机之间的数据。 比较常见的串…...

云原生时代,如何构建高效分布式监控系统

文章目录 一.监控现状二.Thanos原理分析SidecarQuerierStoreCompactor 三.Sidecar or ReceiverThanos Receiver工作原理 四.分布式运维架构 一.监控现状 Prometheus是CNCF基金会管理的一个开源监控项目&#xff0c;由于其良好的架构设计和完善的生态&#xff0c;迅速成为了监控…...

mysql从全备文件中提取单库或单表进行恢复——筑梦之路

前提条件 与业务确认涉及业务、数据库IP、数据误删除时间点、数据删除涉及的SCHEMA、数据表&#xff0c;确认该数据库为MySQLdump备份方式&#xff0c;备份策略为每日凌晨1点进行数据库全备份&#xff0c;备份保留7天&#xff0c;业务误删除数据时间点为当日10点左右&#xff0…...

渗透测试技法之口令安全

一、口令安全威胁 口令泄露途径 代码与文件存储不当&#xff1a;在软件开发和系统维护过程中&#xff0c;开发者可能会将口令以明文形式存储在代码文件、配置文件或注释中。例如&#xff0c;在开源代码托管平台 GitHub 上&#xff0c;一些开发者由于疏忽&#xff0c;将包含数据…...

火语言RPA--配置文件读取

&#x1f6a9;【组件功能】&#xff1a;读取配置文件信息以字典类型输出。 配置预览 配置说明 要读取的文件 支持T或# 读取配置文件的路径及名称&#xff0c;绝对路径。 配置文件类型 INI或XML两种选项供选择。 编码 写入配置文件的编码&#xff0c;以列表方式供选择&am…...

电子应用设计方案104:智能家庭AI弹簧床系统设计

智能家庭 AI 弹簧床系统设计 一、引言 智能家庭 AI 弹簧床系统旨在为用户提供更加舒适、个性化的睡眠体验&#xff0c;通过结合人工智能技术和先进的床垫设计&#xff0c;实时监测和调整睡眠环境&#xff0c;以满足不同用户的需求。 二、系统概述 1. 系统目标 - 自动适应用户…...

基于paddleocr的表单关键信息抽取

全流程如下&#xff1a; 数据集 XFUND数据集是微软提出的一个用于KIE任务的多语言数据集&#xff0c;共包含七个数据集&#xff0c;每个数据集包含149张训练集和50张验证集分别为&#xff1a; ZH(中文)、JA(日语)、ES(西班牙)、FR(法语)、IT(意大利)、DE(德语)、PT(葡萄牙)&a…...

爬虫基础之爬取某基金网站+数据分析

声明: 本案例仅供学习参考使用&#xff0c;任何不法的活动均与本作者无关 网站:天天基金网(1234567.com.cn) --首批独立基金销售机构-- 东方财富网旗下基金平台! 本案例所需要的模块: 1.requests 2.re(内置) 3.pandas 4.pyecharts 其他均需要 pip install 模块名 爬取步骤: …...

深入理解动态规划(dp)--(提前要对dfs有了解)

前言&#xff1a;对于动态规划&#xff1a;该算法思维是在dfs基础上演化发展来的&#xff0c;所以我不想讲的是看到一个题怎样直接用动态规划来解决&#xff0c;而是说先用dfs搜索&#xff0c;一步步优化&#xff0c;这个过程叫做动态规划。&#xff08;该文章教你怎样一步步的…...

(1)STM32 USB设备开发-基础知识

开篇感谢&#xff1a; 【经验分享】STM32 USB相关知识扫盲 - STM32团队 ST意法半导体中文论坛 单片机学习记录_桃成蹊2.0的博客-CSDN博客 USB_不吃鱼的猫丿的博客-CSDN博客 1、USB鼠标_哔哩哔哩_bilibili usb_冰糖葫的博客-CSDN博客 USB_lqonlylove的博客-CSDN博客 USB …...

基于STM32单片机设计的宠物喂食监控系统

1. 项目开发背景 随着宠物数量的增加&#xff0c;尤其是人们对宠物的养护需求日益增多&#xff0c;传统的人工喂养和管理方式难以满足现代养宠生活的需求。人们越来越希望通过智能化手段提高宠物养护的质量和效率&#xff0c;特别是对于宠物喂食、饮水、温湿度控制等方面的智能…...

MATLAB绘图:随机彩色圆点图

这段代码在MATLAB中生成并绘制了500个随机位置和颜色的散点图。通过随机生成的x和y坐标以及颜色&#xff0c;用户可以直观地观察到随机点的分布。这种可视化方式在数据分析、统计学和随机过程的演示中具有广泛的应用。 文章目录 运行结果代码代码讲解 运行结果 代码 clc; clea…...

重定向与缓冲区

4种重定向 我们有如下的代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <string.h>#define FILE_NAME "log.txt"int main() {close(1)…...

【Elasticsearch】index:false

在 Elasticsearch 中&#xff0c;index 参数用于控制是否对某个字段建立索引。当设置 index: false 时&#xff0c;意味着该字段不会被编入倒排索引中&#xff0c;因此不能直接用于搜索查询。然而&#xff0c;这并不意味着该字段完全不可访问或没有其他用途。以下是关于 index:…...

Golang Gin系列-8:单元测试与调试技术

在本章中&#xff0c;我们将探讨如何为Gin应用程序编写单元测试&#xff0c;使用有效的调试技术&#xff0c;以及优化性能。这包括设置测试环境、为处理程序和中间件编写测试、使用日志记录、使用调试工具以及分析应用程序以提高性能。 为Gin应用程序编写单元测试 设置测试环境…...

九、CSS工程化方案

一、PostCSS介绍 二、PostCSS插件的使用 项目安装 - npm install postcss-cli 全局安装 - npm install postcss-cli -g postcss-cli地址&#xff1a;GitHub - postcss/postcss-cli: CLI for postcss postcss地址&#xff1a;GitHub - postcss/postcss: Transforming styles…...

YOLOv11改进,YOLOv11检测头融合DSConv(动态蛇形卷积),并添加小目标检测层(四头检测),适合目标检测、分割等任务

前言 精确分割拓扑管状结构例如血管和道路,对各个领域至关重要,可确保下游任务的准确性和效率。然而,许多因素使任务变得复杂,包括细小脆弱的局部结构和复杂多变的全局形态。在这项工作中,注意到管状结构的特殊特征,并利用这一知识来引导 DSCNet 在三个阶段同时增强感知…...

大数据治理实战指南:数据质量、合规与治理架构

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 引言 随着企业数字化转型的加速&#xff0c;大数据已成为驱动业务决策的核心资产。然而&#xff0c;数据治理的缺失或不完善&…...

SQL Server 建立每日自动log备份的维护计划

SQLServer数据库可以使用维护计划完成数据库的自动备份&#xff0c;下面以在SQL Server 2012为例说明具体配置方法。 1.启动SQL Server Management Studio&#xff0c;在【对象资源管理器】窗格中选择数据库实例&#xff0c;然后依次选择【管理】→【维护计划】选项&#xff0…...

three.js+WebGL踩坑经验合集(4.2):为什么不在可视范围内的3D点投影到2D的结果这么不可靠

上一篇&#xff0c;笔者留下了一个问题&#xff0c;three.js内置的THREE.Vector3.project方法算出来的结果对于超出屏幕可见范围的点来说错得相当离谱。 three.jsWebGL踩坑经验合集(4.1):THREE.Line2的射线检测问题&#xff08;注意本篇说的是Line2&#xff0c;同样也不是阈值…...