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

最近在做一个基于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 @Getter8 @Setter9 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 @Getter7 @Setter8 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      * @return33      *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.mzph.cn/news/158410.shtml

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

相关文章

nginx安装之后修改配置无效

这个问题排查了一晚上&#xff0c;配置怎么改都无效。原本以为错误信息在控制台就能告诉我们&#xff0c;但有些错误信息它都放在日志。查看了日志才发现是没有权限引起的。 这种情况一般是防火墙引起的。可以临时关闭防火墙测试一下 输入如下命令 setenforce 0 如果您使用的…

(vue)前后端配合实现文件预览功能

(vue)前后端配合实现文件预览功能 1.页面&#xff1a; 2.后台返回数据&#xff1a; 3.预览效果&#xff1a; 4.代码&#xff1a; <el-descriptions-item><template slot"label">文件名称</template><el-button type"text" click"…

【开源】基于Vue.js的婚恋交友网站

项目编号&#xff1a; S 057 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S057&#xff0c;文末获取源码。} 项目编号&#xff1a;S057&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 会员管理模块2.3 新…

C语言三位数求解(ZZULIOJ1076:三位数求解)

题目描述 已知xyzyzzn&#xff0c;其中n是一个正整数&#xff0c;x、y、z都是数字&#xff08;0-9&#xff09;&#xff0c;编写一个程序求出x、y、z分别代表什么数字。如果无解&#xff0c;则输出“No Answer”注意&#xff1a;xyz和yzz表示一个三位数&#xff0c;而不是表示x…

Leetcode刷题之有效的括号(C语言版)

Leetcode刷题之有效的括号&#xff08;C语言版&#xff09; 一、题目描述二、题目测试用例三、题目分析四、完整代码 一、题目描述 20、有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是…

LED Driver数码屏应用解决方案

今天给大家介绍的产品是LED Driver&#xff0c;这属于电源管理类芯片&#xff0c;一般分为恒流驱动与恒压驱动&#xff0c;但是常见的就是恒流驱动&#xff0c;能够保持产品在驱动中提供恒定且稳定的电流。 基本概述 TM1629是一种带键盘扫描接口的LED&#xff08;发光二极管显…

Vellum —— 简介

目录 一&#xff0c;介绍 二&#xff0c;原理 三&#xff0c;PBD算法 一&#xff0c;介绍 Vellum是一个解算模拟框架&#xff0c;使用更高级的PBD&#xff08;XPBD&#xff0c;extended position based dynamics&#xff09;&#xff0c;是2nd Order Integration&#xff08…

Java生成一个区域内的经纬度随机点的方式

准备&#xff1a; 1、四个角点&#xff08;四个点确定一个框&#xff09; 2、想要细分程度 &#xff08;这里说的是经纬度&#xff0c;这里没有对经纬度做更细的区分&#xff09; 如&#xff1a;0.000001约等于0.1m&#xff0c;0.00001约等于1m&#xff0c;0.0001约等于10m 。。…

MongoDB——索引(单索引,复合索引,索引创建、使用)

MongoDB索引 官方文档 https://docs.mongodb.com/manual/indexes/#create-an-index 默认索引 _id index Mongodb 在 collection 创建时会默认建立一个基于_id 的唯一性索引作为 document 的 primarykey&#xff0c;这个 index 无法被删除 单个字段索引 单字段索引是 Mongo…

【Skynet 入门实战练习】开发环境搭建 | 运行第一个项目 | debug console 简单使用

文章目录 写在前面开发环境搭建skynet配置文件项目&#xff0c;启动&#xff01; debug console 写在前面 本系列【Skynet 入门实战练习】所有源码同步&#xff1a;https://gitee.com/Cauchy_AQ/skynet_practice 开发环境搭建 skynet skynet 框架地址&#xff1a;https://g…

什么款式的蓝牙耳机跑步不容易掉?推荐几款很不错的运动耳机

​如果你正在寻找一款性能卓越、佩戴舒适的耳机&#xff0c;那么运动耳机绝对是你的不二选择。它们不仅具备出色的音质&#xff0c;还具备防水、防汗、防震等多项特点&#xff0c;让你在运动时更加尽情享受音乐。接下来给大家推荐几款很不错的运动耳机。 1.南卡开放式运动耳机…

南京数字孪生赋能工业制造,加速推进制造业数字化转型

随着南京信息技术的迅猛发展和工业管理的不断演进&#xff0c;传统的工业管理方式已经无法满足企业对高效、智能和可持续发展的需求。针对这一情况&#xff0c;数字孪生技术应运而生&#xff0c;为南京工业管理带来了全新的变革和机遇。以数字孪生为理念&#xff0c;三维可视化…

闪存基本原理

系列文章目录 一、SSD主控 二、PCIe和NVMe控制器前端子系统 文章目录 系列文章目录三、闪存基本原理1.结构2.衍生问题 三、闪存基本原理 闪存是SSD的存储介质&#xff08;NAND Flash&#xff09;&#xff0c;它是一种非易失性存储器&#xff08;Non-volatile memory&#xff0…

centos7 怎么让命令行显示中文(英文->中文)

要让CentOS 7命令行显示中文&#xff0c;您需要确保您的系统支持中文字符集&#xff0c;并在命令行中设置正确的语言环境。以下是设置中文字符集和语言环境的步骤&#xff1a; 首先&#xff0c;确保您的系统已经安装了中文字体。在终端中运行以下命令来查看安装的中文字体&…

开源免费的流程设计器如何选型

大家在开发OA办公自动化、ERP、CRM、BPM、低代码平台等项目的时候&#xff0c;经常用到流程引擎&#xff0c;目前主流的开源流程引擎有activiti、flowable、camunda。这几个开源的流程引擎均基于BPMN2.0国际规范标准&#xff0c;其功能均比较强大&#xff0c;接口也很丰富。但涉…

关键性进展! 小米造车露真容 预计明年上市

大家好,我是极智视界,欢迎关注我的公众号,获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码和资源下载,链接:https://t.zsxq.com/0aiNxERDq 小米在各种不同的产品上都在不断打上自己的品牌,这绝对不止于智能手机,而是有智能…

javaScript 内存管理

1 js 内存机制 内存空间&#xff1a;栈内存&#xff08;stack&#xff09;、堆内存&#xff08;heap&#xff09; 栈内存&#xff1a;所有原始数据类型都存储在栈内存中&#xff0c;如果删除一个栈原始数据&#xff0c;遵循先进后出&#xff1b;如下图&#xff1a;a 最先进栈&…

【剪枝】torch-pruning的基本使用

论文&#xff1a;DepGraph: Towards Any Structural Pruning 工程&#xff1a;https://github.com/VainF/Torch-Pruning 算法和库的使用介绍&#xff1a;CVPR 2023 | DepGraph 通用结构化剪枝 1 TP的简介 该算法介绍了DepGraph 如何建模结构化剪枝中的层依赖&#xff0c;实现任…

英国国家量子计算中心与IBM签署重要协议!英国进入实用量子时代

​&#xff08;图片来源&#xff1a;网络&#xff09; 近日&#xff0c;英国国家量子计算中心&#xff08;NQCC&#xff09;与IBM达成了一项重要协议。根据该协议&#xff0c;NQCC将为英国研究人员提供IBM量子高级计划的云访问权限&#xff0c;其中包括IBM的量子计算系统舰队。…

一文带你拿下MySQL之增删查改(基础)

✏️✏️✏️今天给各位带来的是关于数据库增删查改基础方面的知识。 清风的CSDN博客 &#x1f61b;&#x1f61b;&#x1f61b;希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xff0c;大家一起学习交流&#xff01; 动动你们发财的小手&#xf…