SpringBoot+Vue实现Excel文档导入和导出

1.准备工作

1.1.前端程序

在前端首先加上批量导出的按钮,如下

<el-button size="small" type="warning" plain @click="exportData">
批量导出
</el-button>

 在添加了点击事件之后,在methods中要与之对应的添加上exportData的方法,其中multipleSelection是复选框中勾选后用户的id,下面的代码逻辑为,当我没有勾选复选框的时候(也就是multipleSelection的长度为0时)就执行导出功能

//批量导出exportData(){//没有选择行的时候全部导出,或者根据搜索条件导出if(!this.multipleSelection.length){}},

 1.2.后端程序

前端基本架构写好了,接下来我们开始写后端的接口,如下 

  • 接口的参数有两个,一个是用户的名字,一个是response对象(为了获取输出流,将Excel写回浏览器)
  • 借助hutool工具包提供的ExcelUtil类获取一个ExcelWrite对象(别忘了导入hutool的jar包)
<!--hutool工具包-->
<dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.7.16</version>
</dependency>
  • 执行查询所有用户,将结果添加到write对象中
  • 在获取了输出流之后,将write对象写到流里
     /*** 批量导出* @param name*/@GetMapping("/export")public void exportData(@RequestParam(required = false) String name, HttpServletResponse response) throws IOException {ExcelWriter writer = ExcelUtil.getWriter(true);List<User> list = new ArrayList<>();//第一种:全部导出(当name为空的时候执行,也就是说前端没有勾选复选框时,全部导出)if(StringUtils.isBlank(name)){//查询所有用户list = userService.list();}writer.write(list,true);//获取输出流ServletOutputStream outputStream = response.getOutputStream();//将excel写入到输出流里,并设置用完流之后就关闭writer.flush(outputStream,true);}

2.完善工作

这个时候,后端的程序也基本写好了,现在返回前端来写请求,我的请求之中添加了token,因为之前添加过jwt验证,如果没有token的话,就不能访问,但是之前在axios的请求头中都添加了token,而这个请求是js中的,所以要自己手动在请求路径中添加一个token(而之前后端程序中写了,如果请求头里没有token,那么后台会自己在请求路径中寻找token)

  //批量导出exportData(){//没有选择行的时候全部导出,或者根据搜索条件导出if(!this.multipleSelection.length){window.open('http://localhost:8082/user/export?token='+this.user.token)}},

3.测试

前后端框架基本写好了,接下来进行测试,启动前后端工程后,点击批量导出

可以看到,报了500的错误,那就表明是后台代码写的有问题,返回后端查看,发现控制台报了以下错误

这个错误比较经典,在对Excel进行处理的时候我们必须引入一个叫POI-OOXML的依赖,如下:

 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency>

接下来,进行测试,发现下载的文件是zip类型的,这与Excel表格格式后缀xlsx不符,所以我们还要在后台添加导出的文件格式

response.setContentType("application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8");
response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode("用户信息表","UTF-8")+".xlsx");
  • setContentType设置了HTTP响应的Content-Typeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet,这表示响应的内容是一个Excel文件,即OpenXML格式的电子表格。charset=utf-8指定了字符编码为UTF-8。
  • setHeader设置了HTTP响应的Content-Disposition头,其值为attachment,表示响应的内容是附件,浏览器会提示用户下载该文件。filename=后面跟的是附件的默认文件名,这里通过URLEncoder.encode方法对"用户信息表"进行了URL编码,以确保文件名中的非ASCII字符在HTTP头中正确传输。编码后的字符串加上.xlsx后缀,构成了完整的文件名。

4.第二次测试

加上了响应格式之后,我们再来一次测试,如下:

可以看到,该文件名字已经被修改成“用户信息表”,并且格式也不是之前的.zip,而是Excel的格式,打开文件,如下:

可以看到表头对应的是实体类的字段名,那么如何将表头换成中文呢?

只需要在实体类的字段上加上@Alias注解并设置别名即可(注意:这个@Alias注解是hutool包下的,不是mybatis包下的),如下: 

 加上注解之后,再进行测试,Excel表头就会被修改成指定的名称

到目前为止,Excel导出的功能就完成了,但是还要修改一下业务逻辑

  • 当我不进行模糊查询的时候,点击批量导出,则要导出全部的数据
  • 当我进行模糊查询的时候,点击批量导出,则要导出查询出来的全部数据

所以我要给代码修改一下逻辑,如下:

LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
wrapper.like(StringUtils.isNotBlank(name),User::getName,name);list = userService.list(wrapper);

添加一个模糊查询,并设置一个条件,只有当name的值不为空,才会进行模糊查询,否则就不会添加模糊查询的条件,这样就完成了上面提出的业务要求

 5.完善后的前后端代码

@GetMapping("/export")public void exportData(@RequestParam(required = false) String name, HttpServletResponse response) throws IOException {ExcelWriter writer = ExcelUtil.getWriter(true);List<User> list = new ArrayList<>();//第一种:全部导出(当name为空的时候执行,也就是说前端没有勾选复选框时,全部导出)LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();wrapper.like(StringUtils.isNotBlank(name),User::getName,name);//if(StringUtils.isBlank(name)){//查询所有用户list = userService.list(wrapper);//}writer.write(list,true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode("用户信息表","UTF-8")+".xlsx");//获取输出流ServletOutputStream outputStream = response.getOutputStream();//将excel写入到输出流里,并设置用完流之后就关闭writer.flush(outputStream,true);//关闭writewriter.close();}

前端添加的代码是要给请求添加一个name属性,这样后台才能接收到name,如下:

 //批量导出exportData(){//没有选择行的时候全部导出,或者根据搜索条件导出if(!this.multipleSelection.length){window.open('http://localhost:8082/user/export?token='+this.user.token+'&name='+this.name)}},

 测试如下:

首先查询姓王的用户,查询结果如下:

 然后再导出,结果如下:

自此,初步功能已经完善

6.勾选复选框之后进行导出

之前完成的是,不勾选复选框,然后进行全部数据的导出,和进行模糊搜索之后,将搜索出的数据进行全部导出 

整体思路

  • 要想勾选复选框之后对指定的数据进行导出,那么在勾选复选框之后就要把该用户的id传给后端,由于可以选择多个用户,那么前端传的数据应该是一个数组类型,但是GET方法传不了数组,所以我们可以将其转换成字符串类型,然后后端用String类型接收,然后再将字符串转换成List集合进行查询(为什么要转换成集合,因为mybatis-plus中的条件构造器in需要一个list类型的参数) 

在前端添加id的请求参数,如下,第一行程序意思是,将前端复选框勾选的用户的id数组转换成字符串,并且以逗号分隔,类似于"1","2","3"

let idStr = this.multipleSelection.join(',');
window.open('http://localhost:8082/user/export?token='+this.user.token+'&ids=' + idStr)

 后端用String类型的参数即可接收,如下:

  @RequestParam(required = false) String ids

 接下来的工作就是将字符串类型的参数转换成list集合,并将其添加到条件查询器里,如下:

//将字符串按逗号分割成数组
String[] id = ids.split(",");
//使用Stream API 将字符串数组转换为整数集合
List<Integer> userId = Arrays.stream(id).map(Integer::valueOf).collect(Collectors.toList());
wrapper.in(StringUtils.isNotBlank(ids),User::getId,userId);

全部代码

后端:

    /*** 批量导出* @param name*/@GetMapping("/export")public void exportData(@RequestParam(required = false) String name,@RequestParam(required = false) String ids,HttpServletResponse response) throws IOException {ExcelWriter writer = ExcelUtil.getWriter(true);List<User> list = new ArrayList<>();//第一种:全部导出(当name为空的时候执行,也就是说前端没有勾选复选框时,全部导出)LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();//如果ids不为空(也就是我勾选了复选框),就执行将传进来的ids字符串转换成数组类型的操作然后导出勾选的用户数据,否则就执行全部导出if(StringUtils.isNotBlank(ids)){//将字符串按逗号分割成数组String[] id = ids.split(",");// 使用 Stream API 将字符串数组转换为整数集合List<Integer> userId = Arrays.stream(id).map(Integer::valueOf).collect(Collectors.toList());wrapper.in(StringUtils.isNotBlank(ids),User::getId,userId);}else {wrapper.like(StringUtils.isNotBlank(name),User::getName,name);}list = userService.list(wrapper);writer.write(list,true);response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8");response.setHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode("用户信息表","UTF-8")+".xlsx");//获取输出流ServletOutputStream outputStream = response.getOutputStream();//将excel写入到输出流里,并设置用完流之后就关闭writer.flush(outputStream,true);//关闭writewriter.close();}

前端: 

//批量导出exportData(){//没有选择行的时候全部导出,或者根据搜索条件导出if(!this.multipleSelection.length){window.open('http://localhost:8082/user/export?token='+this.user.token+'&name=' + this.name)}else {//不加","也可以,join默认会加上let idStr = this.multipleSelection.join(',');window.open('http://localhost:8082/user/export?token='+this.user.token+'&ids=' + idStr)}},

7.批量导入功能实现

  • 由于Excel文件导入和文件上传本质一样,所以后端接口的参数也要一个MultipartFile
  • 同样的,Excel文件导入也要借助ExcelUtil,其中的getReader方法需要一个Input流作为参数,而MultipartFile类型能获取InputStream
  • 获取到reader之后,readAll方法将Excel文件中的数据读取为一个User对象的列表。User.class是Java反射中用来指定类的。
  • 获取到Excel表中的User类型的数据集合,再调用mybatisplus中的方法,将数据写入数据库
  • 其中这个ServiceException是自定义的异常

后端: 

    @PostMapping("/import")public Result importData(MultipartFile file) throws IOException {try {//获取inputStream流InputStream inputStream  = file.getInputStream();ExcelReader reader = ExcelUtil.getReader(inputStream);List<User> userList = reader.readAll(User.class);userService.saveBatch(userList);} catch (Exception e) {throw new ServiceException("文件上传失败");}return Result.success();}

前端: 

 来看看上传文件的前端代码,如下:

  • 文件上传是一个特定的代码,其中Element-UI规定了以下格式,其中有几个属性需要了解
  • action 后面跟请求路径
  • :headers  后面跟要在这个请求的请求头里添加的东西
  • :show-file-list  表示文件上传成功后要不要显示上传成功的文件的列表,false表示关闭,true表示开启
  • :on-success  后面跟文件上传成功之后的事件,handleImport事件如下:
    //批量导入handleImport(res,file,fileList){console.log(res)this.load(1)if (res.code === '200'){this.$message.success("上传成功")}else {this.$message.error(res.msg)}},
<el-uploadstyle="display: inline-block;margin-left: 10px"action="http://localhost:8082/user/import":headers="{token:user.token}":show-file-list="false":on-success="handleImport"><el-button size="small" plain type="primary">文件导入</el-button>
</el-upload>

 到此为止,该模块的功能全部实现>_<

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

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

相关文章

c#引用dll报错cs8370功能“本地函数特性“在c#7.3中不可用

cs8370:功能"本地函数特性"在c#7.3中不可用 解决方法&#xff1a; 代码放在form类里面

SJ703安全帽防静电测试仪

一、仪器用途 专门检测安全帽防静电性能。 二、仪器特征 1、携带使用轻便、量程宽广、读数准确&#xff0c;耐震性强等卓越优点 2、超上限时显示‘1’提示和低于下限时声响报警。 3、电池欠压时显示欠压符号“←”提示。 4、交流或直流&#xff08;电池&#xff09;供电任…

Java17 --- RabbitMQ之插件使用

目录 一、Federation插件 1.1、运行两个rabbitmq实例 1.2、启用插件 1.3、在下游端点添加上游端点 1.4、创建策略 1.6、测试 二、联邦队列 2.1、创建策略 2.2、创建交换机与队列 2.2.1、创建52000的队列与交换机 2.2.2、创建62000的队列 三、Shovel 3.1、启…

Echats-wordcloud 文字云图的踩坑点【Unknown series wordCloud】

在词云渲染时遇到渲染不出来的问题&#xff1a; 原因分析&#xff1a; 1、echart和wordcloud版本不匹配&#xff08;我的是匹配的&#xff09; 解决方案&#xff1a; 1、echart和wordcloud版本要匹配&#xff1a; echart4x 使用wordcloud1x版本 echart5x 使用wordcloud2x版本…

Echarts图表: 矩形树图都有哪些配置项,一文告诉你

Hello&#xff0c;本期和大家分享矩形树图的配置项&#xff0c;欢迎评论区和贝格前端工场互动交流。 一、矩形树图是什么 矩形树图是ECharts中的一种图表类型&#xff0c;用于展示树形结构的数据。矩形树图通过矩形的大小和位置来表示树形结构中节点的层次关系和数据的大小。…

实例化游戏物体的实例(生成游戏物体)

一、实例1&#xff1a;实例化 1、准备工作&#xff1a;制备预制体&#xff0c;命名。如Circle 2、Create Empty&#xff0c;名字自取。如&#xff1a;CirclePrefab 3、给CirclePrefab添加Test.cs public GameObject CirclePrefab; // 预制体变量&#xff0c;用于存储Circle预…

基于matlab的MTCNN(多任务卷积神经网络)人脸检测算法

关键词&#xff1a;Matlab&#xff1b;深度学习&#xff1b;多任务卷积神经网络&#xff1b;人脸检测&#xff1b; 背景 在不受约束的环境中&#xff0c;由于个体姿势的多样性、光照条件的变化以及潜在的遮挡问题&#xff0c;人脸检测和对齐任务面临诸多挑战。近期的研究表明…

Elasticsearch搜索引擎(高级篇)

3.1 查询语法 | 《ElasticSearch入门到实战》电子书 (chaosopen.cn) day09-Elasticsearch02 - 飞书云文档 (feishu.cn) 目录 第一章 DSL查询 1.1 基本语法 1.2 叶子查询 全文检索查询 精确查询 1.3 复合查询 算分函数查询 bool查询 1.4 排序 1.5 分页 基础分页 深度分…

numpy的基本操作

1.常用方法创建array print(np.array([1, 2, 3], dtype"f4"))# 32位浮点型 print(np.array([1.5, 2.2, 3]))# 默认浮点型 print(np.array([1, 2, 3, 4, 5], ndmin3))# 3维数组 print(np.array([range(i, i 5) for i in [1, 2, 3]]))# print(np.zeros(shape[5, …

从开源EPR产品Odoo学习

前言 一个先进、敏捷、经济高效、可快速扩展的Odoo免费开源企业信息化解决方案,让企业获得适应未来发展的长期创新和增长能力。 Odoo 的免费开源模式 让我们可利用无数开发人员和业务专家,在短短数年内,打造数百款应用。凭借强大的技术基础,Odoo 的框架是非常独特且优秀的…

LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码

LIMS&#xff08;实验室&#xff09;信息管理系统源码、有哪些应用领域&#xff1f;采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码 LIMS实验室信息管理系统&#xff0c;是一种基于计算机硬件和数据库技术&#xff0c;集多个功能模块为一体的信息管理系统。该系统主…

前后端分离对于后端来说,是利好还是利弊呢?

前后端分离已经成为前端开发的主流模式&#xff0c;这种模式极大的解放了后端&#xff0c;让后端人员不再即当爹又当妈了&#xff0c;那么这种模式对于后端来说是利好还是利弊呢&#xff0c;如何趋利避害呢&#xff0c;贝格前端工场为大家分享一下。 一、什么前后端分离的开发…

Redis的一点入门了解

Redis NoSql概述 1、单机MySQL的时代 90年代&#xff0c;一个网站的访问量一般不会太大&#xff0c;单个数据库完全足够应付&#xff0c;技术上更多的会去使用静态页面html&#xff0c;对此服务器压根没多少压力&#xff1b; 但即使在这样的情况下&#xff0c;也会存在着一些…

【Linux】程序地址空间之动态库的加载

我们先进行一个整体轮廓的了解&#xff0c;随后在深入理解细节。 在动态库加载之前还要说一下程序的加载&#xff0c;因为理解了程序的加载对动态库会有更深的理解。 轮廓&#xff1a; 首先&#xff0c;不管是程序还是动态库刚开始都是在磁盘中的&#xff0c;想要执行对应的可…

IT入门知识博客文章大纲第一部分《IT基础知识》(1/10)

目录 IT入门知识博客文章大纲第一部分《IT基础知识》&#xff08;1/10&#xff09; 1.引言 2.第一部分&#xff1a;IT基础知识 2.1 计算机硬件 CPU&#xff1a;计算机的心脏 内存&#xff1a;数据的临时居所 存储设备&#xff1a;数据的长期仓库 输入输出设备&#xff1…

PostgreSQL基础(十四):PostgreSQL的数据迁移

文章目录 PostgreSQL的数据迁移 PostgreSQL的数据迁移 PostgreSQL做数据迁移的插件非常多&#xff0c;可以从MySQL迁移到PostgreSQL也可以基于其他数据源迁移到PostgreSQL。 这种迁移的插件很多&#xff0c;这里只说一个&#xff0c;pgloader&#xff08;非常方便&#xff0…

Coursera耶鲁大学金融课程:Financial Markets 笔记Week 01

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econ…

SQL Server Management Studio (SSMS) 20.1 - 微软数据库管理工具

SQL Server Management Studio (SSMS) 20.1 - 微软数据库管理工具 请访问原文链接&#xff1a;https://sysin.org/blog/ssms/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sysin.org 笔者注&#xff1a;SQL Server 2014 及之前版本内置…

基于负相关误差函数的4集成BP神经网络matlab建模与仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ...............................................................…

植物大战僵尸杂交版 v2.0.88 mac版 Plants vs. Zombies 杂交版下载

特别注意&#xff1a;该游戏最低系统要求为macOS Sonoma 14.X&#xff0c;低于此系统版本的请勿下载&#xff01; 游戏介绍 植物大战僵尸杂交版是由B站UP主“潜艇伟伟迷”制作的一款结合了《植物大战僵尸》原有元素与创新玩法的游戏。这款游戏以其独特的“杂交”植物概念在B站…