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

前端与后端协同:实现Excel导入导出功能

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

        • **🌟 前言**
  • 前端与后端协同:实现Excel导入导出功能
    • 后端依赖
    • 后端代码
      • 导出Excel
      • 导入Excel
    • 前端请求
      • 导入数据
      • 导出数据
    • 前端调用请求
      • 导入操作
      • 导出操作
    • 注意
    • 结语
    • 🎉 往期精彩回顾

前端与后端协同:实现Excel导入导出功能

在现代Web应用中,Excel文件的导入导出是一个常见的需求。用户希望能够方便地将数据导入到系统中,或者将系统数据导出到Excel文件中。本文将介绍如何在前端和后端之间实现这一功能,示例采用Spring Boot和Vue.js技术栈。

后端依赖

在Spring Boot项目中,我们需要添加EasyExcel依赖来处理Excel文件。EasyExcel是一个简单、省内存的读写Excel的开源工具。

<!-- 导出excel  -->
<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.2.1</version>
</dependency>

后端代码

导出Excel

//@Operation(summary = "导出数据") swagger注解
@PostMapping("exportExcel")
public void exportExcelMenu(HttpServletResponse response) throws IOException {// 设置响应头信息response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");response.setCharacterEncoding("utf-8");// 编码文件名,避免中文乱码String fileName = URLEncoder.encode("轮播图", StandardCharsets.UTF_8).replaceAll("\\+", "%20");// 获取数据列表List<MenuEntity> list = menuService.list();// 设置文件名response.setHeader("Content-disposition", "attachment;filename*=" + fileName + ".xlsx");// 使用EasyExcel写入数据到输出流EasyExcel.write(response.getOutputStream(), MenuEntity.class).sheet("轮播图") // 指定工作表名称.doWrite(list); // 执行写入操作
}

导入Excel

//@Operation(summary = "导入数据") swagger注解
@PostMapping("/importExcel")
public Result importExcelMenu(MultipartFile file) {try {// 获取文件输入流InputStream inputStream = file.getInputStream();// 使用EasyExcel读取Excel数据List<MenuEntity> list = EasyExcel.read(inputStream, MenuEntity.class).sheet() // 读取第一个工作表.headRowNumber(1) // 表头行数.doReadSync(); // 同步读取数据// 处理导入的数据for (MenuEntity entity : list) {menuService.saveOrUpdate(entity);}// 返回成功结果return Result.success("导入成功", sdf.format(new Date()));} catch (IOException exception) {throw new RuntimeException(exception);}
}

前端请求

导入数据

export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {return request.post(`/menuEntity/importExcel`, file);
}

导出数据

export function exportExcelMenu(): Promise<ExportExcelMenuRes> {return request.post(`/menuEntity/exportExcel`, {}, {responseType: 'arraybuffer', // 设置响应类型为二进制流headers: {'Content-Type': 'application/octet-stream'} // 设置请求头});
}

前端调用请求

导入操作

const importChangeExcel = (file) => {// 限制文件类型if (file.raw.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {ElMessage.error('仅支持 .xlsx 格式的文件');return false;}importData.value.append('file', file.raw);
};const GlobalImport = () => {// 执行导入操作api.menu.importExcelMenu(importData.value).then((res: any) => {ElMessage({message: res.message, type: res.success ? 'success' : 'error'});});
};

导出操作

const GlobalExport = () => {// 执行导出操作api.menu.exportExcelMenu().then((res: any) => {// 创建下载链接并触发下载const link = document.createElement('a');const fileName = "菜单表.xlsx";let blob = new Blob([res], {type: 'application/vnd.ms-excel'});link.href = URL.createObjectURL(blob);link.download = fileName;document.body.appendChild(link);link.click();document.body.removeChild(link);});
};

注意

  1. 导入数据的接口中,相当于使用@RequestBody注解获取数据:

    export function importExcelMenu(file: object): Promise<ImportExcelMenuRes> {return request.post(`/menuEntity/importExcel`, file);
    }
    
  2. 导出数据的接口中,需要设置如下请求头:

    {responseType: 'arraybuffer', // 设置响应类型为二进制流headers: {'Content-Type': 'application/octet-stream'} // 设置请求头
    }
    

结语

通过上述示例,我们展示了如何在前端和后端之间实现Excel文件的导入导出功能。后端通过Spring Boot和EasyExcel处理Excel文件,前端通过Vue.js发起请求并处理响应。这样的协同工作使得数据的导入导出变得简单而高效。开发者可以根据实际需求调整和扩展这些代码,以适应不同的业务场景。

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

正则表达式完全指南:语法、用法及JavaScript实例
正则表达式与JSON序列化:去除JavaScript对象中的下划线键名
探索async/await的魔力:简化JavaScript异步编程
JavaScript日期格式化:从原始值到用户友好的字符串
入门教程:Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程

相关文章:

前端与后端协同:实现Excel导入导出功能

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

Docker:探索容器化技术,重塑云计算时代应用交付与管理

一&#xff0c;引言 在云计算时代&#xff0c;随着开发者逐步将应用迁移至云端以减轻硬件管理负担&#xff0c;软件配置与环境一致性问题日益凸显。Docker的横空出世&#xff0c;恰好为软件开发者带来了全新的解决方案&#xff0c;它革新了软件的打包、分发和管理方式&#xff…...

畅捷通T+ KeyInfoList.aspx SQL漏洞复现

0x01 产品简介 畅捷通 T+ 是一款灵动,智慧,时尚的基于互联网时代开发的管理软件,主要针对中小型工贸与商贸企业,尤其适合有异地多组织机构(多工厂,多仓库,多办事处,多经销商)的企业,涵盖了财务,业务,生产等领域的应用,产品应用功能包括:采购管理、库存管理、销售…...

【面经】interrupt()、interrupted()和isInterrupted()的区别与使用

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;面经 ⛺️稳中求进&#xff0c;晒太阳 interrupt方法 如果打断线程正在sleep&#xff0c;wait&#xff0c;join会导致被打断的线程抛出InterruptedException&#xff0c;并清除打断标记。如…...

了解这些技术:Flutter应用顺利登陆iOS平台的步骤与方法

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…...

经济学 劳动市场 医疗经济学

目录 劳动市场 医疗经济学 劳动市场 自愿交换 劳动力的供给&#xff0c;取决于能够胜任这个工作的人的数量&#xff0c;雇主提供的工资必须要能覆盖他的机会成本&#xff0c;他失去的自由世界和他做其他事情能够挣到钱 派生需求&#xff1a;劳动力的需求&#xff0c;取决于…...

vue + koa + Sequelize + 阿里云部署 + 宝塔:宝塔数据库连接

之前文章已经介绍了宝塔上传前后端代码并部署&#xff0c;不清楚的请看这篇文章&#xff1a; vue koa 阿里云部署 宝塔&#xff1a;宝塔前后端部署 下面是宝塔创建数据库&#xff1a; 我用的 koa Sequelize 连接的数据库&#xff0c;Sequelize 非常适合前端使用&#xf…...

华为昇腾认证考试内容有哪些

华为昇腾认证考试的内容主要包括理论知识和实践操作两部分。 在理论知识部分&#xff0c;考生需要掌握昇腾计算的基础知识&#xff0c;包括昇腾计算平台的架构、性能特点、应用场景等。此外&#xff0c;还需要深入理解昇腾AI框架、算子开发、模型优化等相关技术原理和应用方法…...

Spring Boot接收从前端传过来的数据常用方式以及处理的技巧

一、params 传参 参数是会拼接到url后面的请求 场景规范&#xff1a;url后面的key值<3个参数的时候&#xff0c;使用params 传参 支持的请求方式&#xff1a;get&#xff08;正规的是get方式&#xff09;、post 都行 例如&#xff1a; http://localhost:8080/simpleParam?…...

EFCore通用数据操作类

public class ServiceBase : IServiceBase {protected DbContext Context { get; private set; }public ServiceBase(IEFContext eFContext){Context eFContext.CreateDBContext();}public void Commit(){this.Context.SaveChanges(); // 直接保存就行了}public void Delete&l…...

java Web 辅助学习管理系统idea开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 java Web 辅助学习管理系统是一套完善的信息管理系统&#xff0c;结合java 开发技术和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 前段主要技术 bootstr…...

使用Python实现K近邻算法

K近邻&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;是一种简单而有效的分类和回归算法&#xff0c;它通过比较新样本与训练样本的距离来进行预测。在本文中&#xff0c;我们将使用Python来实现一个基本的K近邻算法&#xff0c;并介绍其原理和实现过程。 什…...

Celery的任务流

Celery的任务流 在之前调用任务的时候只是使用delay()和apply_async()方法。但是有时我们并不想简单的执行单个异步任务&#xff0c;比如说需要将某个异步任务的结果作为另一个异步任务的参数或者需要将多个异步任务并行执行&#xff0c;返回一组返回值&#xff0c;为了实现此…...

使用Arcpy进行数据批处理-批量裁剪

时空大数据使我们面临前所未有的机遇和挑战&#xff0c;尤其在地学、遥感或空间技术等专业领域&#xff0c;无疑是一个全新的时代。 伴随着时空大数据的到来&#xff0c;海量数据的处理是一个所有科研工作者都无法忽视的重要问题。传统的数据&#xff08;主要指空间数据&#x…...

【攻防世界】ics-05

php://filter 伪协议查看源码 preg_replace 函数漏洞 1.获取网页源代码。多点点界面&#xff0c;发现点云平台设备维护中心时&#xff0c;页面发生变化。 /?pageindex 输入什么显示什么&#xff0c;有回显。 用php://filter读取网页源代码 ?pagephp://filter/readconvert.…...

VTK的交互器

VTK中鼠标消息是在交互类型对象&#xff08;interactorstyle&#xff09;中响应&#xff0c;因此通过为交互类型对象&#xff08;interactorstyle&#xff09;添加观察者&#xff08;observer&#xff09;来监听相应的消息&#xff0c;当消息触发时&#xff0c;由命令模式执行相…...

ChatGPT(3.5版本)开放无需注册:算力背后的数据之战悄然打响

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

python项目练习——14.学生管理系统

这个项目可以让用户管理学生的信息&#xff0c;包括学生的姓名、年龄、成绩等&#xff0c;并提供添加、编辑、删除、查询等功能。这个项目涉及到数据库操作、用户界面设计、数据验证等方面的技术。 代码示例&#xff1a; import tkinter as tk # 导入 Tkinter 库 import sqli…...

基于SpringBoot的公益慈善平台

一、项目背景介绍&#xff1a; 基于SpringBoot的公益慈善平台是一款致力于为社会所有人带来便利服务的B/S架构的应用程序。随着网络技术的发展&#xff0c;公益慈善网站已经逐渐成为公益行动的主要信息载体。在这个平台上&#xff0c;主要有管理员、捐赠者和志愿者三种角色&…...

Python网络爬虫(一):HTML/CSS/JavaScript介绍

1 HTML语言 1.1 HTML简介 HTML指的是超文本标记语言:HyperText Markup Language,它不是一门编程语言,而是一种标记语言,即一套标记标签。HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的文本文件,可以使用任意的文本编辑器例如记事本打开HTML文件,查看并修改H…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

倒装芯片凸点成型工艺

UBM&#xff08;Under Bump Metallization&#xff09;与Bump&#xff08;焊球&#xff09;形成工艺流程。我们可以将整张流程图分为三大阶段来理解&#xff1a; &#x1f527; 一、UBM&#xff08;Under Bump Metallization&#xff09;工艺流程&#xff08;黄色区域&#xff…...

大数据治理的常见方式

大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法&#xff0c;以下是几种常见的治理方式&#xff1a; 1. 数据质量管理 核心方法&#xff1a; 数据校验&#xff1a;建立数据校验规则&#xff08;格式、范围、一致性等&#xff09;数据清洗&…...