springboot+vue使用easyExcel实现导出功能

您所在的位置：网站首页 › vue导出excel完整代码 › springboot+vue使用easyExcel实现导出功能

springboot+vue使用easyExcel实现导出功能

2023-10-16 23:51| 来源: 网络整理| 查看: 265

之前使用easyExcel写的一个excel导出的功能，这里做一下简单的记录 1.添加 Alibaba easyExcel 依赖

2.2.6 com.alibaba easyexcel ${easyexcel.version}

2.编写导出工具类 ExcelUtils 添加以下导出方法：

/** * excel导出 * @param response http响应对象 * @param list 导出的list内容数据 * @param clazz 导出的类型 * @param fileNamePre 文件名（不含后缀） * @param sheetName sheet名 * @throws IOException IO异常 */ public static void exportExcel(HttpServletResponse response, List list, Class clazz, String fileNamePre,String sheetName) throws IOException { // 导出时候会出现中文无法识别问题，需要转码 String fileName = new String(fileNamePre.getBytes("gb2312"),"ISO8859-1"); response.setContentType("application/vnd.ms-excel"); response.setCharacterEncoding("utf-8"); response.setHeader("Content-Disposition","attachment;filename=" + fileName + ExcelTypeEnum.XLSX.getValue()); // 调用工具类 EasyExcel.write(response.getOutputStream(),clazz) .sheet(sheetName) .doWrite(list); }

3.在控制层调用导出

@ApiOperation(value = "用户信息导出", notes = "用户信息导出") @PostMapping(value = "/export") public void exportXls(@RequestBody UserRequireVo requireVo, HttpServletResponse response){ // 这里的业务数据根据自己的业务场景去做查询 List list = userService.getExcelList(getQueryWrapper(requireVo)); try { ExcelUtil.exportExcel(response,list,UserDto.class,"用户信息","用户信息"); } catch (IOException e) { e.printStackTrace(); } }

4.实体类添加相关注解

@Data @ContentRowHeight(20) // 内容单元格高度 @HeadRowHeight(25) // 标题单元格高度 public class UserDto { @ExcelIgnore //忽略导出的字段 @ApiModelProperty(value = "id") private String id; @ColumnWidth(10) // 单列单元格宽度(该注解也可以加在类上，即声明所有单元格的宽度) @ExcelProperty(value = "用户名",index = 0) // 属性设置(标题名如果有公共标题可以使用大括号来赋值即{一级标题，二级标题},坐标顺序) @ApiModelProperty(value = "用户名") private String username; @ColumnWidth(10) @ExcelProperty(value = "昵称",index = 1) @ApiModelProperty(value = "昵称") private String nickname; @ColumnWidth(20) @ExcelProperty(value = "邮箱",index = 2) @ApiModelProperty(value = "邮箱") private String email; @ColumnWidth(20) @ExcelProperty(value = "联系电话",index = 3) @ApiModelProperty(value = "联系电话") private String phoneNumber; @ColumnWidth(10) @ExcelProperty(value = "性别",index = 4) @ApiModelProperty(value = "性别") private String sex; @ColumnWidth(15) @ExcelProperty(value = "出生日期",index = 5) @ApiModelProperty(value = "出生日期") @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8") private Date birth; @ColumnWidth(15) @ExcelProperty(value = "部门名称",index = 6) @ApiModelProperty(value = "部门名称") private String name; }

5.在vue中添加公共的导出js方法

// 列表信息导出(这里面有三个参数分别是查询条件，后端导出接口地址，文件名) export const exportExcel=(requireVo,excelUrl,fileName) => { return request({ method: 'post', url: excelUrl, responseType: 'blob', data: requireVo }).then(function (response) { let blob = new Blob([response.data]) let downloadElement = document.createElement('a'); let href = window.URL.createObjectURL(blob); //创建下载的链接 downloadElement.href = href; downloadElement.download = fileName; //下载后文件名 document.body.appendChild(downloadElement); downloadElement.click(); //点击下载 document.body.removeChild(downloadElement); //下载完成移除元素 window.URL.revokeObjectURL(href); //释放掉blob对象 }).catch(function (error) { this.$message.error(error) }); }

6.在对应页面调用导出方法

// 添加导出按钮并声明导出方法导出 // 导入excel公共导出方法 import { exportExcel } from '@/api/common' // 调用导出方法 exportData(){ exportExcel(this.requireVo,'/system/user/export','用户信息.xlsx') }

【本文地址】

springboot+vue使用easyExcel实现导出功能

springboot+vue使用easyExcel实现导出功能

今日新闻

推荐新闻