SpringBoot+Vue整合easypoi

分享一波工作中用到的报表统计

这里我用到了模板类型的报表

废话不多说，上代码。

1、引入maven依赖pom.xml

<dependency>
    <groupId>cn.afterturn</groupId>
    <artifactId>easypoi-base</artifactId>
    <version>4.1.3</version>
    <scope>compile</scope>
</dependency>

2、设置excel模板文件(word模板也是一样的，感兴趣可以到官网查看)

3、将模板文件存放到SpringBoot工程resources\export下
4、后端模板数据填充并响应给浏览器

    /**
     * 后端用的post请求
     * @param date json数据类型转换 参数就一个开始时间和一个结束时间
     * @param response 响应
     */
    @PreAuthorize(hasPermi = "system:export:complany")
    @PostMapping("/complany")
    public void complany(DateVo date, HttpServletResponse response) {
        //读取模板文件 第一个参数问模板文件路径  后面的参数为模板的sheet名 也可以设置为左下角的页数的下标
        TemplateExportParams templateExportParams = new TemplateExportParams("export/complany.xls", 0, 1);
        //数据库读取的数据
        List<ComplanyExcelVo> complanyExport = sysExportService.findComplanyExport(date.getBeginTime(), date.getEndTime());
        //计算总和的参数
        Integer sumNewComplanyApplyCount = 0;
        Integer sumAllComplanyApplyCount = 0;
        Integer sumNewComplanyCount = 0;
        Integer sumAllComplanyCount = 0;
        for (ComplanyExcelVo exportVo : complanyExport) {
            //数据库读取的数值会有1.0 2.0的情况 在迭代的时候进行处理
            exportVo.setIndex(exportVo.getIndex().substring(0, exportVo.getIndex().indexOf(".")));
            sumNewComplanyApplyCount += exportVo.getNewComplanyApplyCount();
            sumAllComplanyApplyCount += exportVo.getAllComplanyApplyCount();
            sumNewComplanyCount += exportVo.getNewComplanyCount();
            sumAllComplanyCount += exportVo.getAllComplanyCount();
        }
        //模板的数据来源
        Map<String, Object> map = new HashMap<>(16);
        map.put("beginTime", date.getBeginTime());
        map.put("endTime", date.getEndTime());
        //总计行数
        map.put("sumIndex", complanyExport.size() + 1);
        //新增企业数合计
        map.put("sumNewComplanyApplyCount", sumNewComplanyApplyCount);
        map.put("sumAllComplanyApplyCount", sumAllComplanyApplyCount);
        map.put("sumNewComplanyCount", sumNewComplanyCount);
        map.put("sumAllComplanyCount", sumAllComplanyCount);
        map.put("complanyExport", complanyExport);
        //使用模板和模板数据进行填充得到你想要的excel
        Workbook excel = ExcelExportUtil.exportExcel(templateExportParams, map);
        try {
            response.setCharacterEncoding("UTF-8");
            response.setHeader("content-Type", "application/vnd.ms-excel");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("企业信息汇总.xls", "UTF-8"));
            excel.write(response.getOutputStream());
            excel.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

5、前端处理

<el-button 
	type="success" 
	size="medium" 
	@click="exportComplanyClick">企业汇总报表下载</el-button>

js代码

//按钮的点击事件  导出企业汇总报表
exportComplanyClick() {
    //判断是否选择时间
    if (this.valueData.length < 1) return this.$message.warning('请选择时间！！！');
    //参数提供
    let params = {
        beginTime: this.valueData[0],
        endTime: this.valueData[1]
    };
    /**
     * 调用axios post请求，参数为json格式，响应格式为 blob文件形式
     */
    this.$ajax.post('/system/export/complany', params, {responseType: 'blob'}).then((res) => {
        if (res === undefined) return this.msgError('文件服务异常');
        //创建blob把后端响应的流放入blob
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'});
        let filename = '企业信息汇总.xls';
        // 创建一个超链接，将文件流赋进去，然后实现这个超链接的单击事件
        const elink = document.createElement('a');
        elink.download = filename;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
        this.$message.success('下载成功！！！');
    }).catch(() => {
        this.$message.warning('下载失败！！！');
    });
}

6、响应结果

ok!!!
官网地址附上：http://easypoi.mydoc.io/