前端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();}}
}

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

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

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

相关文章

C++ 标准模板库 (STL, Standard Template Library)

声明&#xff1a;大佬们~这是Tubishu在追寻stl过程中偶然得到了“颢天”大佬的笔记&#xff0c;shushu感觉非常有帮助&#x1f525;又颢天佬未曾来过CSDN&#xff0c;索性在此传达颢天大佬的功德&#x1f9ce; 传送门在此➡️颢天笔记✨✨ C 标准模板库 (STL, Standard Templa…

iOS 集成ffmpeg

前言 本来打算用flutter去实现一个ffmpeg的项目的&#xff0c;不过仔细分析了一下&#xff0c;我后期需要集成OpenGL ES做视频渲染处理&#xff0c;OpenGL ES的使用目前在flutter上面还不是很成熟&#xff0c;所以最后还是选择用原生来开发 ffmpeg集成到iOS工程 iOS对于ffmp…

java读取设置pdf属性信息

pom <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.24</version> </dependency>读取属性 import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdfbox.pdmod…

代码随想录算法【Day31】

Day31 56. 合并区间 class Solution { public://按照左边界&#xff0c;从小到大排序static bool cmp(const vector<int>& a, const vector<int>& b){return a[0] < b[0];} ​vector<vector<int>> merge(vector<vector<int>>…

2013年蓝桥杯第四届CC++大学B组真题及代码

目录 1A&#xff1a;高斯日记&#xff08;日期计算&#xff09; 2B&#xff1a;马虎的算式&#xff08;暴力模拟&#xff09; 3C&#xff1a;第39级台阶&#xff08;dfs或dp&#xff09; 4D&#xff1a;黄金连分数&#xff08;递推大数运算&#xff09; 5E&#xff1a;前缀…

Windows电脑安装USB Redirector并实现内外网跨网USB共享通信访问

文章目录 前言1. 安装下载软件1.1 内网安装使用USB Redirector1.2 下载安装cpolar内网穿透 2. 完成USB Redirector服务端和客户端映射连接3. 设置固定的公网地址 前言 我们每天都在与各种智能设备打交道&#xff0c;从手机到电脑&#xff0c;再到各种外设&#xff0c;它们已经…

React 中hooks之 React.memo 和 useMemo用法总结

1. React.memo 基础 React.memo 是一个高阶组件&#xff08;HOC&#xff09;&#xff0c;用于优化函数组件的性能&#xff0c;通过记忆组件渲染结果来避免不必要的重新渲染。 1.1 基本用法 const MemoizedComponent React.memo(function MyComponent(props) {/* 渲染逻辑 *…

如何用Python将pdf文件转化为高清图片

最近在整理文档&#xff0c;需要将文档进行OCR识别&#xff0c;然后结构化。直接解析pdf文档&#xff0c;行不通&#xff0c;因为文档里面是图片。于是采取先转图片&#xff0c;然后OCR&#xff0c;然后结构化。下面是pdf文档转图片的方法。 import fitz # PyMuPDFdef pdf_to…

Qwen2-VL:在任何分辨率下增强视觉语言模型对世界的感知 (大型视觉模型 核心技术 分享)

摘要 我们推出了Qwen2-VL系列,这是对之前Qwen-VL模型的高级升级,重新定义了视觉处理中的常规预设分辨率方法。Qwen2-VL引入了Naive Dynamic Resolution机制,使模型能够动态地将不同分辨率的图像转换为不同的视觉令牌数量。这种方法允许模型生成更高效和准确的视觉表示,紧密…

工程数学速记手册(下)

工程数学速记手册&#xff08;下&#xff09; 第六部分&#xff1a;概率与统计 概率基础 概率空间与事件 概率空间是概率论中的基本概念&#xff0c;用于描述随机试验的所有可能结果及其概率。一个概率空间可以表示为三元组 ( Ω , F , P ) (\Omega, \mathcal{F}, P) (Ω,…

蓝桥杯3519 填充 | 分类讨论

题目传送门 很简单&#xff0c;遍历一次字符串&#xff0c;将‘?’作为0或1处理&#xff0c;发现00和11统计次数即可。 s str(input()) cnt 0 arr [00, 11, 0?, ?0, 1?, ?1, ??] i0 while i < len(s)-1:if s[i:(i2)] in arr:i 2cnt 1else:i 1 print(cnt)END✨

9.中断系统、EXTI外部中断

中断系统原理 中断 中断系统是管理和执行中断的逻辑结构&#xff0c;外部中断是众多能产生中断的外设之一&#xff0c;所以本节我们就借助外部中断来学习一下中断系统。在以后学习其它外设的时候&#xff0c;也是会经常和中断打交道的。 中断&#xff1a;在主程序运行过程中…

在Docker 容器中安装 Oracle 19c

在 Docker 容器中安装 Oracle 19c 是可行的&#xff0c;但它相较于其他数据库&#xff08;如 MySQL、PostgreSQL 等&#xff09;会复杂一些&#xff0c;因为 Oracle 数据库有一些特定的要求&#xff0c;如操作系统和库的依赖&#xff0c;以及许可证问题。 不过&#xff0c;Ora…

c++----------------------多态

1.多态 1.1多态的概念 多态(polymorphism)的概念&#xff1a;通俗来说&#xff0c;就是多种形态。多态分为编译时多态(静态多态)和运⾏时多 态(动态多态)&#xff0c;这⾥我们重点讲运⾏时多态&#xff0c;编译时多态(静态多态)和运⾏时多态(动态多态)。编译时 多态(静态多态)…

LabVIEW心音心电同步采集与实时播放

开发了一个基于LabVIEW开发的心音心电同步采集与实时播放系统。该系统可以同时采集心音和心电信号&#xff0c;并通过LabVIEW的高级功能实现这些信号的实时显示和播放。系统提升心脏疾病诊断的准确性和效率&#xff0c;使医生能够在观察心音图的同时进行听诊。 ​ 项目背景 心…

Android实战经验篇-玩转Selinux(详解版)

列文章转如下链接&#xff1a; Android Display Graphics系列文章-汇总 Android实战经验篇-系列文章汇总 本文主要包括部分&#xff1a; 一、Selinux概述 1.1 SELinux是什么&#xff1f; 1.2 自主访问控制&#xff08;DAC&#xff09; 1.3 强制访问控制&#xff08;MAC&…

全连接神经网络(前馈神经网络)

目录 一、初步认识全连接神经网络 1、神经元 2、网络结构 3、正向传播算法 二、反向传播算法 1、理解 2、迭代流程 三、构建神经网络模型的基本步骤 四、线性回归神经网络结构 4.1 数据处理 1、数据导入 2、数据归一化处理 3、数据集划分 4、数据形状变换 4.2 模…

MyBatis最佳实践:MyBatis 框架的缓存

缓存的概念&#xff1a; 在内存中临时存储数据&#xff0c;速度快&#xff0c;可以减少数据库的访问次数经常需要查询&#xff0c;不经常修改的数据&#xff0c;不是特别重要的数据都适合存储到缓存中 缓存的级别&#xff1a; 一级缓存(默认开启)&#xff1a;SqlSession 级别 …

(即插即用模块-特征处理部分) 十八、(TIM 2022) TIF Transformer交互融合模块

文章目录 1、Transformer Interactive Fusion2、代码实现 paper&#xff1a;DS-TransUNet: Dual Swin Transformer U-Net for Medical Image Segmentation Code&#xff1a;https://github.com/TianBaoGe/DS-TransUNet 1、Transformer Interactive Fusion 对于一些传统的特征融…

原生HTML集合

一、表格 1、固定表格 <div class"tablebox"><div class"table-container"><table id"myTable" border"0" cellspacing"0" cellpadding"0"><thead><tr></tr></thead>…