React+后端实现导出Excle表格的功能

news2024/11/19 21:20:05

最近在做一个基于React+antd前端框架的Excel导出功能,我主要在后端做了处理,这个功能完成后,便总结成一篇技术分享文章,感兴趣的小伙伴可以参考该分享来做导出excle表格功能,以下步骤同样适用于vue框架,或者JSP页面的实现。

在做这类导出文件的功能,其实,在后端进行处理,会更容易些,虽然前端也可以进行处理,但还是建议后端来做,因为很多导出工具类基本都是很好用。

根据以下步骤,可以很容易就实现导出Excel表格数据的功能。

一、开发导出图标

按钮代码:

1 <Button type="primary" onClick={this.excelPort} >导出</Button>

二、按钮this.excelToPort的导出方法

1 excelPort = () => {
2     location.href="/test/export.do"
3 }

三、建立Excel的Entity类(以下类可以直接复制用,无需做修改):

需要写一个接受前端传来表格文件到后端类——Excel Bean

1 package com.test;
 2 
 3 import lombok.Getter;
 4 import lombok.Setter;
 5 import org.apache.poi.xssf.usermodel.XSSFCellStyle;
 6 
 7 @Getter
 8 @Setter
 9 public class ExcelBean {
10     private String headTextName; //列头(标题)名
11     private String propertyName; //对应字段名
12     private Integer cols; //合并单元格数
13     private XSSFCellStyle cellStyle;
14 
15     public ExcelBean(String headTextName, String propertyName, Integer cols) {
16         super();
17         this.headTextName = headTextName;
18         this.propertyName = propertyName;
19         this.cols = cols;
20     }
21 
22 }

表格每一行的属性字段映射到数据库里的User Bean

 1 package com.bqs.data.dcm.bean;
 2 
 3 import lombok.Getter;
 4 import lombok.Setter;
 5 
 6 @Getter
 7 @Setter
 8 public class User {
 9     private String id; 
10     private String name; 
11     private Integer age;
12     private String sex;
13     
14 }

四、建立Excel的工具类(无需修改可直接复制用)

  1 package com.test;
  2 
  3 import java.beans.IntrospectionException;
  4 import java.lang.reflect.InvocationTargetException;
  5 import java.text.SimpleDateFormat;
  6 import java.util.ArrayList;
  7 import java.util.Date;
  8 import java.util.List;
  9 import java.util.Map;
 10 
 11 import com.test.ExcelBean;
 12 import org.apache.poi.ss.util.CellRangeAddress;
 13 import org.apache.poi.xssf.usermodel.XSSFCell;
 14 import org.apache.poi.xssf.usermodel.XSSFCellStyle;
 15 import org.apache.poi.xssf.usermodel.XSSFFont;
 16 import org.apache.poi.xssf.usermodel.XSSFRow;
 17 import org.apache.poi.xssf.usermodel.XSSFSheet;
 18 import org.apache.poi.xssf.usermodel.XSSFWorkbook;
 19 
 20 /**
 21  * @author 朱季谦
 22  * @version 
 23  */
 24 public class ExportUtil {
 25 
 26     /**
 27      * 导出Excel表
 28      * @param clazz 数据源model类型
 29      * @param objs excel标题以及对应的model字段
 30      * @param map 标题行数以及cell字体样式
 31      * @param sheetName 工作簿名称
 32      * @return
 33      *
 34      */
 35     public static XSSFWorkbook createExcelFile(
 36             Class<?> clazz,
 37             List<Map<String,Object>> objs,
 38             Map<Integer,List<ExcelBean>> map,
 39             String sheetName) throws IllegalAccessException, IllegalArgumentException, InvocationTargetException, IntrospectionException{
 40         //创建新的工作簿
 41         XSSFWorkbook workbook = new XSSFWorkbook();
 42         //创建工作表
 43         XSSFSheet sheet = workbook.createSheet(sheetName);
 44         //设置excel的字体样式以及标题与内容的创建
 45         createFont(workbook);//字体样式
 46         createTableHeader(sheet,map);//创建标题
 47         createTableRows(sheet,map,objs,clazz);//创建内容
 48         System.out.println(workbook);
 49         return workbook;
 50     }
 51     private static XSSFCellStyle fontStyle;
 52     private static XSSFCellStyle fontStyle2;
 53     private static void createFont(XSSFWorkbook workbook) {
 54         //表头
 55         fontStyle = workbook.createCellStyle();
 56         XSSFFont font1 = workbook.createFont();
 57         font1.setBoldweight(XSSFFont.BOLDWEIGHT_BOLD);
 58         font1.setFontName("黑体");
 59         font1.setFontHeightInPoints((short) 12);//字体大小
 60         fontStyle.setFont(font1);
 61         fontStyle.setBorderBottom(XSSFCellStyle.BORDER_THIN);//下边框
 62         fontStyle.setBorderLeft(XSSFCellStyle.BORDER_THIN);//左边框
 63         fontStyle.setBorderTop(XSSFCellStyle.BORDER_THIN);//右边框
 64         fontStyle.setBorderRight(XSSFCellStyle.BORDER_THIN);//右边框
 65         fontStyle.setAlignment(XSSFCellStyle.ALIGN_CENTER);//居中
 66         //内容
 67         fontStyle2 = workbook.createCellStyle();
 68         XSSFFont font2 = workbook.createFont();
 69         font2.setFontName("宋体");
 70         font2.setFontHeightInPoints((short)10);
 71         fontStyle2.setFont(font2);
 72         fontStyle2.setBorderBottom(XSSFCellStyle.BORDER_THIN);//下边框
 73         fontStyle2.setBorderLeft(XSSFCellStyle.BORDER_THIN);//左边框
 74         fontStyle2.setBorderTop(XSSFCellStyle.BORDER_THIN);//右边框
 75         fontStyle2.setBorderRight(XSSFCellStyle.BORDER_THIN);//右边框
 76         fontStyle2.setAlignment(XSSFCellStyle.ALIGN_CENTER);//居中
 77     }
 78 
 79 
 80 
 81     /**
 82      * 根据ExcelMapping 生成列头(多行列头)
 83      * @param sheet 工作簿
 84      * @param map 每行每个单元格对应的列头信息
 85      */
 86     private static void createTableHeader(
 87             XSSFSheet sheet,
 88             Map<Integer, List<ExcelBean>> map) {
 89         int startIndex = 0;//cell起始位置
 90         int endIndex = 0;//cell终止位置
 91         for(Map.Entry<Integer,List<ExcelBean>> entry: map.entrySet()){
 92             XSSFRow row = sheet.createRow(entry.getKey()); //创建行
 93             List<ExcelBean> excels = entry.getValue();
 94             for(int x=0;x<excels.size();x++){
 95                 //合并单元格
 96                 if(excels.get(x).getCols()>1){
 97                     if(x==0){
 98                         endIndex += excels.get(x).getCols()-1;
 99                         //合并单元格CellRangeAddress构造参数依次表示起始行,截至行,起始列, 截至列
100                         sheet.addMergedRegion(new CellRangeAddress(0, 0, startIndex, endIndex));
101                         startIndex += excels.get(x).getCols();
102                     }else{
103                         endIndex += excels.get(x).getCols();
104                         sheet.addMergedRegion(new CellRangeAddress(0, 0, startIndex, endIndex));
105                         startIndex += excels.get(x).getCols();
106                     }
107                     XSSFCell cell = row.createCell(startIndex-excels.get(x).getCols());
108                     //设置内容
109                     cell.setCellValue(excels.get(x).getHeadTextName());
110                     if(excels.get(x).getCellStyle() != null){
111                         //设置格式
112                         cell.setCellStyle(excels.get(x).getCellStyle());
113                     }
114                     cell.setCellStyle(fontStyle);
115                 }else{
116                     XSSFCell cell = row.createCell(x);
117                     //设置内容
118                     cell.setCellValue(excels.get(x).getHeadTextName());
119                     if(excels.get(x).getCellStyle() != null){
120                         //设置格式
121                         cell.setCellStyle(excels.get(x).getCellStyle());
122                     }
123                     cell.setCellStyle(fontStyle);
124                 }
125             }
126         }
127     }
128 
129 
130     /**
131      * 为excel表中循环添加数据
132      * @param sheet
133      * @param map  字段名
134      * @param objs 查询的数据
135      * @param clazz 无用
136      */
137     private static void createTableRows(
138             XSSFSheet sheet,
139             Map<Integer,List<ExcelBean>> map,
140             List<Map<String,Object>> objs,
141             Class<?> clazz)
142             throws IntrospectionException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {
143         int rowindex = map.size();
144         int maxkey = 0;
145         List<ExcelBean> ems = new ArrayList<>();
146         for(Map.Entry<Integer,List<ExcelBean>> entry : map.entrySet()){
147             if(entry.getKey() > maxkey){
148                 maxkey = entry.getKey();
149             }
150         }
151         ems = map.get(maxkey);
152         List<Integer> widths = new ArrayList<Integer>(ems.size());
153         for(Map<String,Object> obj : objs){
154             XSSFRow row = sheet.createRow(rowindex);
155             for(int i=0;i<ems.size();i++){
156                 ExcelBean em = (ExcelBean)ems.get(i);
157                 String propertyName = em.getPropertyName();
158                 Object value = obj.get(propertyName);
159                 XSSFCell cell = row.createCell(i);
160                 String cellValue = "";
161                 if("valid".equals(propertyName)){
162                     cellValue = value.equals(1)?"启用":"禁用";
163                 }else if(value==null){
164                     cellValue = "";
165                 }else if(value instanceof Date){
166                     cellValue = new SimpleDateFormat("yyyy-MM-dd").format(value);
167                 }else{
168                     cellValue = value.toString();
169                 }
170                 cell.setCellValue(cellValue);
171                 cell.setCellType(XSSFCell.CELL_TYPE_STRING);
172                 cell.setCellStyle(fontStyle2);
173                 sheet.autoSizeColumn(i);
174             }
175             rowindex++;
176         }
177 
178         //设置列宽
179         for(int index=0;index<widths.size();index++){
180             Integer width = widths.get(index);
181             width = width<2500?2500:width+300;
182             width = width>10000?10000+300:width+300;
183             sheet.setColumnWidth(index, width);
184         }
185     }
186 }

五、导出Excel的controller类

 1    /**
 2      * 导出excle表格
 3      */
 4     @RequestMapping(value = "/export")
 5     public void exportTotal( HttpServletResponse response ) throws Exception{
 6         response.reset(); //清除buffer缓存
 7         //Map<String,Object> map=new HashMap<String,Object>();
 8         // 指定下载的文件名
 9         response.setContentType("application/vnd.ms-excel;charset=UTF-8");
10         String excleName="统计表格"+".xlsx";
11         response.setHeader("Content-Disposition","attachment;filename="+new String(excleName.getBytes(),"iso-8859-1"));
12         //导出Excel对象
13         XSSFWorkbook workbook = sysExportExcelInfo.exportExcel();
14         OutputStream output;
15         try {
16             output = response.getOutputStream();
17             BufferedOutputStream bufferedOutput = new BufferedOutputStream(output);
18             bufferedOutput.flush();
19             workbook.write(bufferedOutput);
20             bufferedOutput.close();
21 
22         } catch (IOException e) {
23             e.printStackTrace();
24         }
25     }

六、导出Excel的service类

 1   public XSSFWorkbook exportExcel() throws Exception{
 2         //获取dao导出的list集合
 3         List<User> list=userService.exportUser();
 4        
 5         List<Map<String,Object>> listMap=ListBeanToListMap(list);
 6 
 7         List<ExcelBean> excel = new ArrayList<>();
 8         Map<Integer,List<ExcelBean>> map = new LinkedHashMap<>();
 9         //设置标题栏
10         excel.add(new ExcelBean("序号","id",0));
11         excel.add(new ExcelBean("名字","name",0));
12         excel.add(new ExcelBean("年龄","age",0));
13         
14            map.put(0,excel);
15         String sheetName = "统计表格";
16         //调用ExcelUtil方法
17         XSSFWorkbook xssfWorkbook = ExportUtil.createExcelFile(DcmDemand.class, listMap, map, sheetName);
18         System.out.println(xssfWorkbook);
19         return xssfWorkbook;
20     }  

注意:整块导出Excel代码,主要需要改动只是这一行代码:List<User> list=userService.exportUser(),这是调用dao层获取以列表list获得数据的查询。

下面三行代码里的“序号”,“名字”,“年龄”根据User属性来定义的,它将作为表格表头呈现在导出的表格里。这里的User表映射到数据库表t_user表,你需要导出User里哪些字段的数据,就以这样格式excel.add(new ExcelBean("序号","id",0))加到下面代码里:

1 excel.add(new ExcelBean("序号","id",0));
2 excel.add(new ExcelBean("名字","name",0));
3 excel.add(new ExcelBean("年龄","age",0));

其中,以上代码需要把list<String>转换成List<Map<String,Object>>形式,转换方法如下,因为创建表格时需要这样List<Map<String,Object>>格式类型数据:

 1  public static List<Map<String, Object>> ListBeanToListMap(List<User> list) throws NoSuchMethodException,
 2             SecurityException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {
 3         List<Map<String, Object>> listmap = new ArrayList<Map<String, Object>>();
 4 
 5         for (Object ob : list) {
 6 
 7             listmap.add(beanToMap(ob));
 8         }
 9         return listmap;
10     }

按照以上代码步骤,可以实现在React+antd前端实现导出这样的Excel表格功能:

若有什么不明白的,可以评论留言,我会尽量解答。

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

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

相关文章

要做好解决方案工程师,这些核心技能是必须要掌握的。

要做好解决方案工程师&#xff0c;以下是一些比较中肯的建议&#xff1a; 1、了解客户需求&#xff1a;解决方案工程师需要深入了解客户的需求和挑战&#xff0c;以便为他们提供定制化的解决方案。通过与客户交流、调研市场趋势等方式&#xff0c;了解客户的业务需求和目标&…

汽车级低压差稳压器LDO LM317BD2TR4G原理、参数及应用

LM317BD2TR4G主要功能特性分析 &#xff1a; LM317BD2TR4G 低漏 (LDO) 线性电压稳压器是一款可调 3 端子正向 LDO 电压器&#xff0c;能够在 1.2 V 至 37 V 的输出电压范围内提供 1.5 A 以上的电流。此电压稳压器使用非常简便&#xff0c;仅需两个外部电阻即可设置输出电压。另…

iptables详解:链、表、表链关系、规则的基本使用

目录 防火墙基本概念 什么是防火墙&#xff1f; Netfilter与iptables的关系 链的概念 表的概念 表链关系 规则的概念 查询规则 添加规则 删除iptables中的记录 修改规则 更详细的命令&#xff08;5链4表&#xff09; 防火墙基本概念 什么是防火墙&#xff1f; 在…

【腾讯云云上实验室-向量数据库】探索腾讯云向量数据库:全方位管理与高效利用多维向量数据的引领者

目录 前言1 腾讯云向量数据库介绍2 向量数据库信息及设置2.1 向量数据库实例信息2.2 实例监控2.3 密钥管理2.4 安全组2.5 Embedding2.6 可视化界面 3 可视化界面4 Embedding4.1 embedding_coll精确查询4.2 unenabled_embedding_coll精确查询 5 数据库5.1 创建数据库5.2 插入数据…

带你精通chrony服务器

华子目录 为什么会出现Chrony&#xff1f;Linux的两个时钟NTP介绍Chrony介绍安装与配置安装Chrony配置文件分析实验1实验2chronyc命令查看时间服务器chronyc sources输出分析其他命令 常见时区 为什么会出现Chrony&#xff1f; 由于IT系统中&#xff0c;准确的计时非常重要&am…

C++标准模板(STL)- 类型支持 (类型关系,检查两个类型是否相同,std::is_same)

类型特性 类型特性 类型特性定义一个编译时基于模板的结构&#xff0c;以查询或修改类型的属性。 试图特化定义于 <type_traits> 头文件的模板导致未定义行为&#xff0c;除了 std::common_type 可依照其所描述特化。 定义于<type_traits>头文件的模板可以用不完…

Python中,我们可以使用pandas和numpy库对Excel数据进行预处理,包括读取数据、数据清洗、异常值剔除等

文章目录 一、什么是数据预处理二、对excel数据进行详细的数据预处理操作总结 一、什么是数据预处理 数据预处理是一种对数据进行清洗、整理、转换等操作的过程&#xff0c;旨在提高数据质量&#xff0c;使其适应模型的需求&#xff0c;从而改进数据挖掘或机器学习的结果。 数…

Maven依赖管理项目构建工具(保姆级教学---下篇)

对于Maven依赖管理项目构建工具的介绍&#xff0c;我们将其分为上篇和下篇。如果您对文章感兴趣&#xff0c;您可以在此链接中找到上篇详细内容&#xff1a; Maven依赖管理项目构建工具&#xff08;保姆级教学上篇&#xff09;-CSDN博客 一、Maven依赖传递和依赖冲突 1. …

Portraiture2024PS/LR专用智能磨皮插件,AI算法美颜,提高P图效率

ps皮肤美白磨皮滤镜有吗&#xff1f;ps本身无自带美白磨皮滤镜&#xff0c;虽然部分滤镜有磨皮、提亮功能&#xff0c;但往往需要搭配蒙版、通道功能使用。但ps可安装第三方软件&#xff0c;比如常用的磨皮插件portraiture3&#xff0c;那么&#xff0c;磨皮插件portraiture3怎…

Kotlin 知识体系

Kotlin 知识体系 1、Kotlin 文档2、Kotlin 基础3、桌面应用程序4、Android 与 iOS 应用程序 1、Kotlin 文档 Kotlin 是一门现代但已成熟的编程语言&#xff0c;旨在让开发人员更幸福快乐。 它简洁、安全、可与 Java 及其他语言互操作&#xff0c;并提供了多种方式在多个平台间复…

Python (十二) 模块、包

模块 模块是以 .py后缀的文件&#xff0c;包含所有定义的函数和变量的文件。 模块可以被别的程序引入&#xff0c;以使用该模块中的函数等功能&#xff0c;如python 标准库、第三方模块等。 导入模块用关键词-import,from ...import 引入python标准库math模块 import math #调用…

Alien Skin Exposure2024胶片滤镜中文免费版插件

Exposure是一个在你的照片上实现完整个人看法的终极工具。它是一个完整、强大、多才多艺的照片编辑器和组织者&#xff0c;并且带有你在市场上任何软件中都找不到的独特功能。 Alien Skin Exposure是我处理图片主要的一款软件。Exposure整体界面非常直观&#xff0c;而且操作易…

Linux使用ifconifg命令,没有显示ens33

Linux使用ifconifg命令&#xff0c;没有显示ens33 1.问题2.步骤2.1 查看虚拟机的组件是否启动了2.2 修改网络配置文件 ONBOOT修改为yes2.3 重启网络2.4 修改网络服务配置 3.解决 1.问题 打开虚拟机准备使用xshell连接时发现连接失败&#xff0c;在机器上查看ip发现ens33不现实…

使用 Filebeat+Easysearch+Console 打造日志管理平台

近年来&#xff0c;日志管理平台越来越流行。使用日志管理平台可以实时地、统一地、方便地管理和查看日志&#xff0c;挖掘日志数据价值&#xff0c;驱动运维、运营&#xff0c;提升服务管理效率。 方案架构 Beats 是轻量级采集器&#xff0c;包括 Filebeat、Metricbeat 等。E…

【数据结构(二)】队列(2)

文章目录 1. 队列的应用场景和介绍1.1. 队列的一个使用场景1.2. 队列介绍 2. 数组模拟队列2.1. 思路分析2.2. 代码实现 3. 数组模拟环形队列3.1. 思路分析3.2. 代码实现 1. 队列的应用场景和介绍 1.1. 队列的一个使用场景 银行排队的案例&#xff1a; 1.2. 队列介绍 队列是一…

数据采集与大数据架构分享

实现场景 要实现亿级数据的长期收集更新&#xff0c;并对采集后的数据进行整理和加工&#xff0c;用于人工智能的训练数据素材集。 数据采集 java支持的爬虫框架还是有很多的&#xff0c;如&#xff1a;webMagic、Spider、Jsoup等添加链接描述 pipeline处理管道 数据并发开发…

Dubbo的优雅下线原理分析

文/朱季谦 Dubbo如何实现优雅下线&#xff1f; 这个问题困扰了我一阵&#xff0c;既然有优雅下线这种说法&#xff0c;那么&#xff0c;是否有非优雅下线的说法呢&#xff1f; 这&#xff0c;还真有。 可以从linux进程关闭说起&#xff0c;其实&#xff0c;我们经常使用到杀…

(C++)字符串相加

愿所有美好如期而遇 题目链接&#xff1a;415. 字符串相加 - 力扣&#xff08;LeetCode&#xff09; 思路 我们看到字符串长度可能到达一万&#xff0c;而且不允许使用处理大整数的库&#xff0c;也就是说&#xff0c;转成整数相加后再转成字符串是不可行的。 那么我们就让…

在VS Code中使用VIM

文章目录 安装和基本使用设置 安装和基本使用 VIM是VS Code的强大对手&#xff0c;其简化版本VI是Linux内置的文本编辑器&#xff0c;堪称VS Code问世之前最流行的编辑器&#xff0c;也是VS Code问世之后&#xff0c;我仍在使用的编辑器。 对VIM无法割舍的原因有二&#xff0…

Java Swing算术我最棒

内容要求 1) 本次程序设计是专门针对 Java 课程的,要求使用 Java 语言进行具有一定代码量的程序开发。程序的设计要结合一定的算法&#xff0c;在进行代码编写前要能够设计好自己的算法。 本次程序设计涉及到 Java 的基本语法&#xff0c;即课堂上所介绍的变量、条件语句、循…