POI导出echarts统计报表到Excel

一、前台

1.创建echarts统计图相关

//基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('taskTotal'));//项目统计

//项目统计指定图表的配置项和数据
var initOption = {
    title: {
        text: '月度计划项目统计图',
        x:'center',
        y:'top',//标题位置
        textAlign:'center'
    },
    tooltip: {
        trigger: 'axis'//鼠标移上图标触发轴
    },
    legend: {//图例;
        data:['计划完成值','实际完成值'],
        x:'center',
        y:'bottom'//图例位置
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true//坐标轴标签不会溢出容器
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,//左右无留白;
        name:'月份',//横轴名称
        data: []
    },
    yAxis: {
        type: 'value',
        name:'数量'//纵轴名称
    },
    series: [
        {	
        	name:'计划完成值',
            type:'line',
            stack: '总量2',
            symbol: 'circle',     //设定为实心点
            symbolSize: 10,   //设定实心点的大小
            itemStyle : {  
                normal : { 
                    color:'#0099ff' ,//折线点颜色
                    lineStyle:{  
                        color:'#0099ff' ,//折线条颜色
                        width:2,
                        type:'dashed'  //'dotted'虚线 'solid'实线 
                    }  
                }
            },
            data:[]
        },
        {
        	name:'实际完成值',
            type:'line',
            stack: '总量1',
            symbol: 'circle',     //设定为实心点
            symbolSize: 10,   //设定实心点的大小
            itemStyle : {  
                normal : {  
                    lineStyle:{  
                        color:'red',
                        width:2 
                    }  
                }
            },
            data:[]
        }
    ]
};

以上的taskTotal是一个预先准备好id=“taskTotal”的dom，即一个有明确宽高的div区域。

2.给统计图赋值

//项目统计
function taskTotal(unitNames,startDate,endDate){
	$.ajax({
		url :webCfg.servePath +"/reportForm/showTotalForm",
		type: "POST",
		dataType : "JSON",
		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
		data: {"unitNames":encodeURI(unitNames),"startDate":startDate,"endDate":endDate},
		cache : false,
		beforeSend : function(XHR) {
        },
		success : function(result) {
			//请求成功时处理
			var data =result;
			if (typeof(data.xAxis) == "undefined"||typeof(data.series) == "undefined"){
				initOption.xAxis.data = [];//x轴
				initOption.series[0].data = [];
				initOption.series[1].data = [];
			}else{
				//initOption.legend.data = data.legend;
				initOption.xAxis.data = data.xAxis;//x轴
				var serieslist = data.series;
				for (var i = 0; i < serieslist.length; i++) {//循环放入数据
					initOption.series[i].data = serieslist[i];
				}
			}
			myChart.setOption(initOption, true);
			var common=$("#taskTotal").parent();//该表单的父节点
			//页面表单回显
			common.find("input[name='startTime']").val(data.echoes.startTime);
			common.find("input[name='endTime']").val(data.echoes.endTime);
			common.find("input[name='unitNames']").val(data.echoes.unitNames);
			//给报表表格添加内容;
			var html ="";
			if(data.xAxis!= null && typeof data.xAxis !== "undefined" && data.xAxis.length>0){
				for(var i=0;i<data.xAxis.length;i++){
                    html+="<tr>";
                    html+="<td width='6%'>"+(i+1)+"</td>";
                    html+="<td>"+data.xAxis[i]+"</td>";
                    html+="<td>"+data.xAxis[i]+"</td>";
                    html+="<td>"+(data.series[0])[i]+"</td>";
                    html+="<td>"+(data.series[1])[i]+"</td>";
                    html+="</tr>";
                }
			}else{
  			    html ="<tr><td colspan='99' style='text-align:center'>查询数据为空</td></tr>";
  			}
			common.find("tbody").empty();
			common.find("tbody").append(html);
		},
		complete : function() {
		//请求完成的处理
		},
		error : function(e) {
			//请求出错处理
			alert(e);
		}
	});
}

赋值数据通过请求后台得到，这里省略(按需要补充)。

3.js以post方式提交统计报表数据

//点击导出按钮获取到导出Excel的相关数据
function btnExcel() {
	var picBaseCode=myChart.getDataURL();
	//获取报表上存在的条件
	var unitNames=nodeCommon.find("input[name='unitNames']").val();
	var	startDate=nodeCommon.find("input[name='startTime']").val();
	var	endDate=nodeCommon.find("input[name='endTime']").val();
	var	status=nodeCommon.find("input[name='status']").val();
	var	delayNum=nodeCommon.find("input[name='delayNum']").val();
	//调用方法请求后台;
	reportExcel(index+1,picBaseCode,unitNames,startDate,endDate,status,delayNum);
}

//封装待导出Excel的参数
function reportExcel(reportType,picBaseCode,unitNames,startDate,endDate,status,delayNum){
	var url=webCfg.servePath +"/reportForm/reportExcel";
    var params = {
    	"reportType":reportType,
    	"picBaseCode":picBaseCode,
    	"unitNames":encodeURI(unitNames),
    	"startDate":startDate,
    	"endDate":endDate,
    	"status":encodeURI(status),
    	"delayNum":encodeURI(delayNum)        
    };

    httpPost(url, params);
}

//发送POST请求跳转到指定页面
function httpPost(URL, PARAMS) {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.method = "post";
    temp.style.display = "none";

    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = x;
        opt.value = PARAMS[x];
        temp.appendChild(opt);
    }

    document.body.appendChild(temp);
    temp.submit();

    return temp;
}

二、后台

    /**
     * 导出报表
     *
     * @return
     */
    @RequestMapping(value = "/reportExcel", method = RequestMethod.POST)
    public Object getReportExcel(HttpServletRequest request, HttpServletResponse             response) throws Exception {
        fileName = "项目统计表.xlsx";
        OutputStream os=response.getOutputStream();
        setFileName(request, response, fileName);//设置导出文件标题及编码
        // 第一步，创建一个HSSFWorkbook，对应一个Excel文件
        // 创建Excel工作薄
        Workbook book = null;
        try {
            book = new XSSFWorkbook();//excell2007
        } catch (Exception ex) {
            book = new HSSFWorkbook();//excell2003
        }

        // 第二步，在workbook中添加一个sheet,对应Excel文件中的sheet
        Sheet sheet = book.createSheet(fileName);

        //调用方法获取统计报表内的表格数据(此处省略，需自行补充，同前台echarts统计图数据源)
        @SuppressWarnings("unchecked")
        Map<String, Object> result = (Map<String, Object>) taskTotalForm(request);
        String[] xAxis = (String[]) result.get("xAxis");
        @SuppressWarnings("unchecked")
        List<Integer[]> series = (List<Integer[]>) result.get("series");

        // 第三步,设置标题和表头;
        Row row = sheet.createRow(0);// 创建第一行,设置表的标题;
        row.setHeightInPoints(36);//设置行的高度是34个点
        Cell cell = row.createCell(0);
        cell.setCellValue(headTitle);
        sheet.addMergedRegion(new CellRangeAddress(0, 0, 0, cols - 1));//第一行跨表所有列;
        // 第二行为表头行
        String title = "";
        Row row1 = sheet.createRow(1);// 创建第2行
        row1.setHeightInPoints(22);//设置表头行的高度是20个点
        for (int i = 0; i < 4; i++) {
            Cell cell = row1.createCell(i);
            cell.setCellType(HSSFCell.CELL_TYPE_STRING);
            if (i == 0) {
                title = "月份";
            }
            if (i == 1) {
                title = "时间节点";
            }
            if (i == 2) {
                title = "计划完成项";
            }
            if (i == 3) {
                title = "实际完成项";
            }
            cell.setCellValue(title);
        }
        int start = 2;
        //根据各一级任务的分解任务数循环向单元格填充数据;
        for (int i = 0; i < xAxis.length; i++) {
            Row row = sheet.createRow(start + i);
            Cell cell0 = row.createCell(0);
            Cell cell1 = row.createCell(1);
            Cell cell2 = row.createCell(2);
            Cell cell3 = row.createCell(3);
            cell0.setCellValue(xAxis[i]);
            cell1.setCellValue(xAxis[i]);
            cell2.setCellValue(series.get(0)[i]);
            cell3.setCellValue(series.get(1)[i]);
        }
        //生成统计图图片
        String imgUrl = request.getParameter("picBaseCode");
        if (!imgUrl.isEmpty()) {
            String[] imgUrlArr = imgUrl.split("base64,");//拆分base64编码后部分
            byte[] buffer = new BASE64Decoder().decodeBuffer(imgUrlArr[1]);
            //获取项目运行目录的路径:以下是request.getRealPath()的代替方法
            String picPath = request.getSession().getServletContext().getRealPath(
                    "static/app/appkmbgszh/images" + fileName + ".png");
            File file = new File(picPath);//图片文件
            try {
                //生成图片
                OutputStream out = new FileOutputStream(file);//图片输出流
                out.write(buffer);
                out.flush();//清空流
                out.close();//关闭流
                // 将图片写入流中
                ByteArrayOutputStream outStream = new ByteArrayOutputStream();
                BufferedImage bufferImg = ImageIO.read(file);
                ImageIO.write(bufferImg, "PNG", outStream);
                // 利用HSSFPatriarch或XSSFDrawing将图片写入EXCEL
                Drawing patri = sheet.createDrawingPatriarch();
                //偏移量  这个有点恶心， 这个单位直接以万 计， 10000以下 基本设了等于没设。原因不明 ，操作2003 的 HSSF 是正常的比例  
                ClientAnchor anchor = new XSSFClientAnchor(30 * 10000, 0, 100, 100, 5, 1, 18, 22);
                patri.createPicture(anchor, book.addPicture(outStream.toByteArray(), XSSFWorkbook.PICTURE_TYPE_PNG));

                // 写入数据 把相应的Excel 工作簿存盘
                book.write(os);
                book.close();
                os.close();
            } catch (Exception ex) {
                ex.printStackTrace();
            }
            if (file.exists()) {
                file.delete();//删除图片
            }
        }
    }


    /**
     * 设置导出文件名,并处理编码问题;
     * @param request
     * @param response
     * @param name
     * @throws UnsupportedEncodingException
     */
    public void setFileName(HttpServletRequest request, HttpServletResponse response, String name)
            throws UnsupportedEncodingException {
        String agent = request.getHeader("USER-AGENT");
        if (null != agent && -1 != agent.indexOf("MSIE") || null != agent && -1 != agent.indexOf("Trident")) {// IE
            name = java.net.URLEncoder.encode(name, "UTF8");

        } else if (null != agent && -1 != agent.indexOf("Mozilla")) {// 火狐,chrome等
            name = new String(name.getBytes("UTF-8"), "iso-8859-1");
        }
        response.setHeader("Content-disposition", "attachment; filename=" + name);
    }

三、说明

关于HSSFClientAnchor(dx1,dy1,dx2,dy2,col1,row1,col2,row2)的参数，有必要在这里说明一下：
    dx1：起始单元格的x偏移量，如例子中的255表示直线起始位置距A1单元格左侧的距离；
    dy1：起始单元格的y偏移量，如例子中的125表示直线起始位置距A1单元格上侧的距离；
    dx2：终止单元格的x偏移量，如例子中的1023表示直线起始位置距C3单元格左侧的距离；
    dy2：终止单元格的y偏移量，如例子中的150表示直线起始位置距C3单元格上侧的距离；
    col1：起始单元格列序号，从0开始计算；
    row1：起始单元格行序号，从0开始计算，如例子中col1=0,row1=0就表示起始单元格为A1；
    col2：终止单元格列序号，从0开始计算；
    row2：终止单元格行序号，从0开始计算，如例子中col2=2,row2=2就表示起始单元格为C3；