一、后端接口

1、Service层解析Excel数据

接口：DictService

  1. List<ExcelDictDTO> listDictData();

实现：DictServiceImpl

  1. @Override
  2. public List<ExcelDictDTO> listDictData() {
  3.     List<Dict> dictList = baseMapper.selectList(null);
  4.     //创建ExcelDictDTO列表，将Dict列表转换成ExcelDictDTO列表
  5.     ArrayList<ExcelDictDTO> excelDictDTOList = new ArrayList<>(dictList.size());
  6.     dictList.forEach(dict -> {
  7.         ExcelDictDTO excelDictDTO = new ExcelDictDTO();
  8.         BeanUtils.copyProperties(dict, excelDictDTO);
  9.         excelDictDTOList.add(excelDictDTO);
  10.     });
  11.     return excelDictDTOList;
  12. }

2、Controller层接收客户端请求

  1. @ApiOperation("Excel数据的导出")
  2. @GetMapping("/export")
  3. public void export(HttpServletResponse response){
  5.     try {
  6.         // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
  7.         response.setContentType("application/vnd.ms-excel");
  8.         response.setCharacterEncoding("utf-8");
  9.         // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
  10.         String fileName = URLEncoder.encode("mydict", "UTF-8").replaceAll("\\+", "%20");
  11.         response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
  12.         EasyExcel.write(response.getOutputStream(), ExcelDictDTO.class).sheet("数据字典").doWrite(dictService.listDictData());
  13.     } catch (IOException e) {
  14.         //EXPORT_DATA_ERROR(104, "数据导出失败"),
  15.         throw  new BusinessException(ResponseEnum.EXPORT_DATA_ERROR, e);
  16.     }    
  17. }

二、前端调用

1、页面添加导出按钮

  1. <el-button
  2.     @click="exportData"
  3.     type="primary"
  4.     size="mini"
  5.     icon="el-icon-upload2" >导出Excel</el-button>

2、添加导出方法

  1. //Excel数据导出
  2. exportData() {
  3.     window.location.href = this.BASE_API + '/admin/core/dict/export'
  4. }