echarts图形导出到excel

前台使用的为：extjs+echarts

定义了一个panel

                             {
                                    xtype: 'panel',
                                    name: 'parentChartPanel',
                                    id: 'parentChartPanel',
                                    columnWidth: 0.5,
                                    layout: 'fit',
                                    height: 287
                                }

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成图形

lateGaugePanel = echarts.init(document.getElementById('parentChartPanel'));
        var leakOption = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show : true
            },
            series : [
                {
                    name:'漏报',
                    type:'gauge',
                    detail : {
                        formatter:'{value}%',
                        fontSize:14
                    },
                    min:0,
                    max:10,
                    data:[{
                        value: result.leak,
                        name: '漏报'
                    }]
                }
            ]
        };
        leakGaugePanel.setOption(leakOption, true);

       //获取base64编码
        leakGaugePanelBase64 = leakGaugePanel.getDataURL();

将其传递到后台

                       Ext.Ajax.request({
                                    url: 'exportReportInfo.do?f=*.R0116&ssId=' + ssId,
                                    method: 'POST',
                                    form: 'export',
                                    params: {
                                        leakGaugePanelBase64: leakGaugePanelBase64
                                    },
                                    isUpload: true
                                })

后台接收：

    @RequestMapping(value = "exportReportInfo.do", params = "f=*.R0116")
    public void exportReportInfo(HttpServletResponse response, @RequestParam Map<String, String> map) {
        Map<String, String> infoMap = taskManagerService.getFrequenceAndBatchByTask(map);
      
        reportUpStateService.exportReportInfoNew(response, map, fileName);
    }

传递到后台的base64格式的为：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUsAAAEfCAYAAADIqOR/AAAgAElEQVR4Xu2dCVRUR9bH/9UNyCaCCuIe931BQcEFNUZjTGIUE7MYjSwmk03MOhG/JM4kQmaSiWJmMklkMXtGI2Yxixo1boCi4L7vu6LggohAd32nHoKITffr7tevu+n7

所以需要将“data:image/png;base64,”截取掉 

（ 发送的时候使用URLEncoder.encode编码，接收的时候使用URLDecoder.decode解码，都按指定的编码格式进行编码、解码，可以保证不会出现乱码 ）

 String dataChartString = URLDecoder.decode(map.get("leakGaugePanelBase64").substring(22),"UTF-8");

有一点必须注意：数据中的 "+"会因为传递变为 " "空格。

 dataChartString = dataChartString.replaceAll(" ", "+");

 

            OutputStream  out = response.getOutputStream();
            HSSFWorkbook wb = new HSSFWorkbook();
            HSSFSheet sheet = wb.createSheet(“测试图片导出”);

            //创建绘图
            HSSFPatriarch patriarch = sheet.createDrawingPatriarch();

            BASE64Decoder base64Decoder = new BASE64Decoder();
            ByteArrayOutputStream dataChartStringoutStream = new ByteArrayOutputStream();
            ByteArrayInputStream dataChartStringin = new ByteArrayInputStream( base64Decoder.decodeBuffer(dataChartString));    //将picInfoByte作为输入流；
            BufferedImage dataChartStringbufferImg = ImageIO.read(dataChartStringin);     //将dataChartStringin作为输入流，读取图片存入image中
            ImageIO.write(dataChartStringbufferImg, "png", dataChartStringoutStream); // 利用HSSFPatriarch将图片写入EXCEL

 // 左上角第一列，第几行，右上角第几列，第几行

            HSSFClientAnchor anchor = new HSSFClientAnchor(0, 0, 100, 100, (short) 0, length + 1, (short) 5, length + 12);

            anchor.setAnchorType(3);
            patriarch.createPicture(anchor, wb.addPicture(dataChartStringoutStream.toByteArray(), HSSFWorkbook.PICTURE_TYPE_PNG));

            response.setContentType("application/excel");
            response.addHeader("Content-Disposition", "attachment;filename=" + new String( (fileName+".xls").getBytes("gb2312"), "ISO8859-1" ));
            wb.write(out);

 

最后记得关掉流

 

导出图片