欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用EasyExcel完整的springboot +vue前后端导出并下载excel表格

程序员文章站 2022-03-01 19:47:51
...

写在前面

仅作记录,如能帮助尚在迷途的小伙伴,不胜荣幸。
这两三天好好搞了一下这个利用easyexcel导出并下载excel表格的事情。也是感受颇多,本着前人栽树后人乘凉的人道主义精神,赶紧码下这一篇文章,顺带加深自己的记忆。

正文

1. springboot后端引入easyexcel及使用

1.1 引入依赖
<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>easyexcel</artifactId>
</dependency>
1.2 接口serviceImpl方法

xxxServiceImpl.java

public void exportExcelData(String wo_id, HttpServletResponse response) throws BusinessException {

    // 这里注意 有同学反应使用swagger 会导致各种问题,请直接用浏览器或者用postman
    try {
        // 模板文件
        //此处getResourceAsStream 用于获取服务器打包后的Excel模板文件流;
        //如果采用getPath方法获取文件地址本地ieda环境可以获取到,上传到服务器后会失效。采用流可以都生效,具体原因暂未仔细查看。有兴趣的童鞋可以自己去尝试!
        //InputStream resourceAsStream = this.getClass().getClassLoader().getResourceAsStream("templates/excelTemplate.xls");
        // 获取表头数据
        if (wo_id == null || wo_id.isEmpty()) {
            throw new BusinessException(BusinessCodeEnum.PARAMETER_ERROR, "工单id获取为空!");
        }
        // 下面2行这是我自己的业务,不用管
        CkdPoInfo ckdPoInfo = ckdPoInfoMapper.selectByPrimaryKey(wo_id);
        String work_order = ckdPoInfo.getWork_order();

        List<ExportExcelData> excelDataList = getData(wo_id);  // 从数据库获取excel表体数据
        WriteCellStyle headWriteCellStyle = new WriteCellStyle();
        //设置头居中
        headWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
        //内容策略
        WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
        //设置 水平居中
        contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.LEFT);
        HorizontalCellStyleStrategy horizontalCellStyleStrategy = new HorizontalCellStyleStrategy(headWriteCellStyle, contentWriteCellStyle); //由于自定义了合并策略,所以此处默认合并策略并未使用
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
        response.setCharacterEncoding("utf-8");
        // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
        String fileName = URLEncoder.encode(work_order+"报表导出测试", "UTF-8").replaceAll("\\+", "%20");
//            response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
        response.addHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
        response.addHeader("Access-Control-Expose-Headers", "Content-disposition");
        // 自定义的合并策略,重要
        Map<String, List<RowRangeDto>> srategyMap = ExcelUtil.addMergeStrategy(excelDataList);

        // 这里需要设置不关闭流;
        EasyExcel.write(response.getOutputStream(), ExportExcelData.class).autoCloseStream(Boolean.FALSE)
                // 注册合并策略
                .registerWriteHandler(new BizMergeStrategy(srategyMap)) // 这里调用自定义的合并策略
                .registerWriteHandler(ExcelUtil.CellStyleStrategy()) // 调用自定义的工具类
                .sheet("xxx信息表")
                .doWrite(excelDataList); // 写入获取的list数据集合
    } catch (Exception e) {
        // 重置response
        response.reset();
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");
//            Map<String, String> map = MapUtils.newHashMap();
//            map.put("status", "failure");
//            map.put("message", "文件下载失败" + e.getMessage());
//            try {
//                response.getWriter().println(JSON.toJSONString(map));
//            } catch (IOException ex) {
//                ex.printStackTrace();
//            }
        e.printStackTrace();
        throw new BusinessException(BusinessCodeEnum.PARAMETER_ERROR, "导出excel失败!");
    }
}
  • 以上try_catch语句调用easyexcel写文件流我写在了serviceImpl的类方法里,也可以把这段直接写在controller里。个人所有业务层代码都放在service里,controller层只负责调用service层。
  • wo_id是我需要传的参数,这里根据个人实际情况,可传其他也可不传。
  • excelDataList就是我封装的获取我数据库数据的list集合,getData()是具体实现方法;
  • getData()不同场景实现都不同,这里就不再贴出有关它的实现
  • 自定义合并策略、自定义ExcelUtil工具类下面会放,不急。
1.3 提供一个对list集合去重的方法(根据相同key,去除重复,合并value值)
public List<CkdMaterialPackage> getNewList(List<CkdMaterialPackage> oldList) {

   List<CkdMaterialPackage> newList = new ArrayList<>();
   HashMap<NewCkdMtrPackage, CkdMaterialPackage> tempMap = new HashMap<NewCkdMtrPackage, CkdMaterialPackage>();
   // 去掉重复key
   for (CkdMaterialPackage ckdMaterialPackage : oldList) {
       String odm_pn = ckdMaterialPackage.getOdm_pn();  // 料号充当键值名
       String exporter_pn = ckdMaterialPackage.getExporter_pn();
       String importer_pn = ckdMaterialPackage.getImporter_pn();

       NewCkdMtrPackage newCkdMtrPackage = new NewCkdMtrPackage();  // 作为map的key值
       // 给属性赋值,以下3个整体构成的类对象作为key
       newCkdMtrPackage.setOdm_pn(odm_pn);
       newCkdMtrPackage.setExporter_pn(exporter_pn);
       newCkdMtrPackage.setImporter_pn(importer_pn);
		// 
       if (tempMap.containsKey(newCkdMtrPackage)) {

           // 合并相同料号的value
           ckdMaterialPackage.setQuantity(tempMap.get(newCkdMtrPackage).getQuantity() + ckdMaterialPackage.getQuantity());
           // hashmap不允许key重复,当有key重复时,前面key对应的value值会被覆盖
           tempMap.put(newCkdMtrPackage, ckdMaterialPackage);
       } else {
           tempMap.put(newCkdMtrPackage, ckdMaterialPackage);
       }
   }

   for (Map.Entry<NewCkdMtrPackage, CkdMaterialPackage> entry : tempMap.entrySet()) {
       newList.add(entry.getValue());
   }

   return newList;
}
  • 该方法就是传入一个原始的数据list,然后返回一个去重合并后的list
  • List<CkdMaterialPackage> oldList中 CkdMaterialPackage是我自己的数据库表实体类,换成你自己的
  • NewCkdMtrPackage这个是专门定义的实体类,可以理解为里面的属性整体充当key;举个例子,一个list集合里包含 name,sex,height,score几个元素,我想要合并重复的name,sex,height,且将score求和。就是说我合并的列不止一列。那么把这些重复的封装成一个类,整体作为key来执行。
1.4 BizMergeStrategy合并策略类
public class BizMergeStrategy extends AbstractMergeStrategy {

    private Map<String, List<RowRangeDto>> strategyMap; // RowRangeDto 行起始结束范围类
    private Sheet sheet;

    public BizMergeStrategy(Map<String, List<RowRangeDto>> strategyMap) {
        this.strategyMap = strategyMap;
    }

    @Override
    protected void merge(org.apache.poi.ss.usermodel.Sheet sheet, Cell cell, Head head, Integer integer) {
        this.sheet = sheet;
        if (cell.getRowIndex() == 1 && cell.getColumnIndex() == 0) {
            /**
             * 保证每个cell被合并一次,如果不加上面的判断,因为是一个cell一个cell操作的,
             * 例如合并A2:A3,当cell为A2时,合并A2,A3,但是当cell为A3时,又是合并A2,A3,
             * 但此时A2,A3已经是合并的单元格了
             */
            for (Map.Entry<String, List<RowRangeDto>> entry : strategyMap.entrySet()) {
                Integer columnIndex = Integer.valueOf(entry.getKey());
                entry.getValue().forEach(rowRange -> {
                    //添加一个合并请求
                    sheet.addMergedRegionUnsafe(new CellRangeAddress(rowRange.getStart(),
                            rowRange.getEnd(), columnIndex, columnIndex));
                });
            }
        }
    }

}
  • RowRangeDto
/**
 * 行分段的起始位置和结束位置dto类
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class RowRangeDto {

    private int start;
    private int end;
}
1.5 自定义ExcelUtil工具类
public class ExcelUtil{

    public static Map<String, List<RowRangeDto>> addMergeStrategy(List<ExportExcelData> excelDataList) {
        Map<String, List<RowRangeDto>> strategyMap = new HashMap<>();
        ExportExcelData preExcelData = null;
        for (int i = 0; i < excelDataList.size(); i++) {
            ExportExcelData currExcelData = excelDataList.get(i);
            if (preExcelData != null) {
                //从第二行开始判断是否需要合并
                if (currExcelData.getPallet_number().equals(preExcelData.getPallet_number())) {
                    //如果栈板号一样,则可合并栈板号、栈板毛重、栈板尺寸 3列
                    fillStrategyMap(strategyMap, "0", i);
                    fillStrategyMap(strategyMap, "1", i);
                    fillStrategyMap(strategyMap, "2", i);
                    //如果栈板号一样,并且卡通箱号一样,则可合并卡通箱号、单箱毛重、单箱尺寸 3列
                    if (currExcelData.getCarton_number().equals(preExcelData.getCarton_number())) {
                        fillStrategyMap(strategyMap, "3", i);
                        fillStrategyMap(strategyMap, "4", i);
                        fillStrategyMap(strategyMap, "5", i);
//                        //如果栈板号、卡通箱号一样,并且物料料号也一样,则可合并物料料号一列  物料信息查询时已合并
//                        if (currExcelData.getCoopOrg().equals(preExcelDto.getCoopOrg())) {
//                            fillStrategyMap(strategyMap, "2", i);
//                        }
                    }
                }
            }
            preExcelData = currExcelData;
        }
        return strategyMap;
    }


    private static void fillStrategyMap(Map<String, List<RowRangeDto>> strategyMap, String key, int index) {
        List<RowRangeDto> rowRangeDtoList = strategyMap.get(key) == null ? new ArrayList<>() : strategyMap.get(key);
        boolean flag = false;
        for (RowRangeDto dto : rowRangeDtoList) {
            //分段list中是否有end索引是上一行索引的,如果有,则索引+1
            if (dto.getEnd() == index) {
                dto.setEnd(index + 1);
                flag = true;
            }
        }
        //如果没有,则新增分段
        if (!flag) {
            rowRangeDtoList.add(new RowRangeDto(index, index + 1));
        }
        strategyMap.put(key, rowRangeDtoList);
    }

    public static HorizontalCellStyleStrategy CellStyleStrategy(){
        WriteCellStyle headWriteCellStyle = new WriteCellStyle();
        //设置背景颜色
        headWriteCellStyle.setFillForegroundColor(IndexedColors.WHITE.getIndex());
        //设置头字体
        WriteFont headWriteFont = new WriteFont();
        headWriteFont.setFontHeightInPoints((short)13);
        headWriteFont.setBold(true);
        headWriteCellStyle.setWriteFont(headWriteFont);
        //设置头居中
        headWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
        //内容策略
        WriteCellStyle contentWriteCellStyle = new WriteCellStyle();
        //设置 水平居中
        contentWriteCellStyle.setHorizontalAlignment(HorizontalAlignment.CENTER);
        contentWriteCellStyle.setVerticalAlignment(VerticalAlignment.CENTER);
        HorizontalCellStyleStrategy horizontalCellStyleStrategy = new HorizontalCellStyleStrategy(headWriteCellStyle, contentWriteCellStyle);
        return horizontalCellStyleStrategy;
    }
}

Controller方法:

/**
     * 导出并下载excel报表
     * @param wo_id
     * @param response
     * @throws BusinessException
     */
    @GetMapping("/downloadExcel")
    public void exportExcelData(
            @RequestParam(value = "wo_id") String wo_id,
            HttpServletResponse response
    ) throws BusinessException {
        // 获取报表数据
        ckdPoInfoService.exportExcelData(wo_id, response);
    }

以上是全部的后端接口及方法。

2. vue前端调用后台下载excel接口实现点击按钮完成下载

利用EasyExcel完整的springboot +vue前后端导出并下载excel表格

2.1 上图对应vue代码
<span v-if="(scope.row.status&63)===60">
        <el-popconfirm   // 气泡框
            style="margin-left:20px;"
            @confirm="export_excel(scope.row.wo_id)"
            title="导出报关单?"
        >
            <el-button type="text" slot="reference" size="small" icon="el-icon-document-copy">导出报关单</el-button>
        </el-popconfirm>
</span>
2.2 export_excel() 方法
export_excel(wo_id){
		  //scope.row.wo_id
		  console.log("wo_id = "+wo_id);
		  const url = this.BASE_API_URL + 'springbootApi/downloadExcel?wo_id='+wo_id;
		  axios.get(url, 
		  	{
		  		responseType: 'blob'        <!--响应类型必须设为二进制文件流-->
		  	})
		  .then((res) => {
		    if (!res) return
		
		    console.log("res data = "+res.data);
		    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'}) // 文件类型
		    console.log(res.headers['content-disposition']); // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx") 设置的文件名;
		    //以=分割取数组[1]元素为文件名
		    let filename = window.decodeURI(res.headers['content-disposition'].split('=')[1])
		    let url = window.URL.createObjectURL(blob);  // 创建下载链接
		    let aLink = document.createElement("a");    // 赋值给a标签的href属性
		    aLink.style.display = "none";
		    aLink.href = url;
		    aLink.setAttribute("download", filename);
		    document.body.appendChild(aLink);   // 将a标签挂载上去
		    aLink.click();          // a标签click事件
		    document.body.removeChild(aLink);  // 移除a标签
		    window.URL.revokeObjectURL(url);   // 销毁下载链接
		
		    return this.$message.success("导出报关单成功");
		  }).catch(function (error) {
		    console.log(error);
		  })
}

3. vue多种方式实现调用后台接口下载excel (本小节借鉴他人总结)

方式一:直接通过a标签

<a href="/images/logo.jpg" download="logo" />

优点:简单方便。
缺点:这种下载方式只支持Firefox和Chrome不支持IE和Safari,兼容性不够好。

方式二: 通过window.location

window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'

其实就是类似我直接在浏览器url地址栏输入接口地址,回车下载。
优点:简单方便。
缺点:只能进行get请求,当有token校验的时候不方便。

方式三:axios请求后台接口 (目录2就是基于此)

4. 总结碰到的一些问题,避免小伙伴踩坑

① 首先后端接口写好后,我直接浏览器输入api接口去调用测试:

http://localhost:8989/xxx/downloadExcel?wo_id=33b948460598420eb533d62930c9

结果弹出下载好的文件并保存框,证明后端接口可用;测试时可以前后端分开编写和测试。

② 我定义下载逻辑用的是easyexcel,但是上传文件逻辑前人用的是 excelkit,然后poi版本是3.1,但是我easyexcel内包含4.0版本的poi,所以导致上传文件逻辑一些方法报错。
解决办法:pom.xml依赖里手动添加发生冲突的jar包更高版本即可。
③ 后端设置好header里定义好了下载的excel表格名称,但是vue前端并没有获取到:

// 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
  String fileName = URLEncoder.encode(work_order+"报表导出测试", "UTF-8").replaceAll("\\+", "%20");
//            response.setHeader("Content-disposition", "attachment;filename*=utf-8''" + fileName + ".xlsx");
  response.addHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
  //response.addHeader("Access-Control-Expose-Headers", "Content-disposition"); 此时还没有哦
console.log(res.headers['content-disposition']);  // 这里控制台输出是undefined

查资料得知必须后台在设置请求头时将 content-disposition 加入到 Access-Control-Expose-Headers里,前端才能获取到。
即后台加一段代码:

response.addHeader("Access-Control-Expose-Headers", "Content-disposition");

然后vue就能获取到文件名了。


参考文章:
1. Vue项目利用axios请求接口下载excel(附前后端代码)
2. vue中axios实现二进制流文件下载
3. 老哥写的很棒
4. 这位大佬设置模板填充的,可以看看,还有打压缩包下载,留个传送门
5. 这个帮我最大的忙
6. github源码easyexcel地址
7. 使用easy excel导出复杂表头的excel
8. 感觉有用的就放在这里了

分割线====

  1. 这里乱入一个easypoi的官方文档
  2. 使用EasyPoi完成复杂一对多excel表格导出功能