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

前端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.lryc.cn/news/526776.html

相关文章:

  • 基于ESP32的桌面小屏幕实战[6]:环境搭建和软件基础
  • 接口(完)
  • 数据结构——实验七·排序
  • JVM堆空间
  • 【详细】SSH公私钥认证与渗透测试攻击场景
  • 常见的多媒体框架(FFmpeg GStreamer DirectShow AVFoundation OpenMax)
  • C++异步future
  • Oracle 12c 中的 CDB和PDB的启动和关闭
  • Vue组件开发-使用 html2canvas 和 jspdf 库实现PDF文件导出 设置页面大小及方向
  • chrome插件:网页图片高清下载
  • 汽车定速巡航
  • CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据)
  • WPF基础 | WPF 布局系统深度剖析:从 Grid 到 StackPanel
  • 14-6-2C++STL的list
  • 【AI论文】Sigma:对查询、键和值进行差分缩放,以实现高效语言模型
  • 私域流量池构建与转化策略:以开源链动2+1模式AI智能名片S2B2C商城小程序为例
  • vofa++使用方法
  • LogicFlow 一款流程图编辑框架
  • HTML<kbd>标签
  • PyQt6医疗多模态大语言模型(MLLM)实用系统框架构建初探(上.文章部分)
  • 150 Linux 网络编程6 ,从socket 到 epoll整理。listen函数参数再研究
  • 深入浅出 SQLSugar:快速掌握高效 .NET ORM 框架
  • ESP8266 NodeMCU与WS2812灯带:实现多种花样变换
  • MacOS安装Docker battery-historian
  • Linux的基本指令(上)
  • 【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】1.1 从零搭建NumPy环境:安装指南与初体验
  • ASP .NET Core 学习(.NET9)部署(一)windows
  • 百日计划(2025年1月22日-4月30日,以完成ue4.0 shader抄写为目标)
  • AIGC视频生成模型:慕尼黑大学、NVIDIA等的Video LDMs模型
  • 类与对象(中)