使用POI一次性下载全部echarts图表

最新推荐文章于 2025-05-16 14:37:39 发布

MinMax_CC

最新推荐文章于 2025-05-16 14:37:39 发布

阅读量958

点赞数

文章标签： java javascript jquery

本文链接：https://blog.youkuaiyun.com/MaxVelika/article/details/104861567

版权

本文介绍如何利用Java的POI库，结合JavaScript的echarts.getDataURL方法，将网页上的所有Echarts图表转换成图片并一次性下载。通过获取图表的Base64编码，解码后写入IO流生成图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：导出当前页面全部echarts图表

原理：通过echarts.getDataURL获取获取当前图片的base64编码，经过解码以后放入流中生成的图片。

1. 获取图片编码；

2. 接口调用；

3. 解码，放入IO流，生成图片；

附部分代码：

js:

//获取图表数据
function loadChartData() {
    var chart1 = echarts.init(document.getElementById('car_map'));
    var chart2 = echarts.init(document.getElementById('carWorkoutPct'));
    var chart3 = echarts.init(document.getElementById('carCountAndMileage'));

    var images = [];
    images.push(chart1.getDataURL());
    images.push(chart2.getDataURL());
    images.push(chart3.getDataURL());

    return images;
}

//图表下载
function exportsCharts() {
    var images = loadChartData();

    var url = apiPrefix + "/downloadRunWholeCharts";
    var form = $("<form></form>").attr("action", url).attr("method", "post");
    form.append($("<input></input>").attr("type", "hidden").attr("name", "images").attr("value", images));
    form.appendTo('body').submit().remove();
}

java代码：

@RequestMapping(value = "/downloadRunWholeCharts", method = {RequestMethod.GET, RequestMethod.POST}, produces = "application/json;charset=UTF-8")
public void downloadConditionCharts(HttpServletRequest req, HttpServletResponse res, @RequestParam List<String> images) {
    ServletOutputStream out = null;
    try {
        String fileName = "整体分析结果-" + DateUtil.format(new Date(), "yyyyMMddHHmmss") + ".xlsx";
        String sheetName = "整体分析结果";
        BigExcelWriter writer = ExcelUtil.getBigWriter(req.getRealPath("/files") + "/" + fileName, sheetName);

        Drawing patriarch = writer.getSheet().createDrawingPatriarch();
        short startRow = 0;
        int endRow = 40;
        for (int i = 0; i < images.size(); i++) {
            if (i % 2 == 1) {
                continue;
            }
            ByteArrayOutputStream byteArrayOut = new ByteArrayOutputStream();
            BufferedImage bufferImg = null;

            String requestRealPath = req.getRealPath("/files") + "/";
            String imagePath = convertImagePath(images.get(i) + "," + images.get(i + 1), requestRealPath, System.currentTimeMillis() + "", "png");// Base64 转 Png
            if (!StringUtils.isEmpty(imagePath)) {
                File jpgFile = convertImagePngToJpg(new File(imagePath));// PNG 图片转Jpg
                bufferImg = ImageIO.read(jpgFile);
                ImageIO.write(bufferImg, "jpg", byteArrayOut);
                if (i != 0) {
                    startRow = (short) (endRow + 5);
                    endRow = startRow + 40;
                }
                XSSFClientAnchor anchor1 = new XSSFClientAnchor(0, 0, 255, 255, (short) 1, startRow, (short) 20, endRow);
                anchor1.setAnchorType(ClientAnchor.AnchorType.DONT_MOVE_AND_RESIZE);
                patriarch.createPicture(anchor1, writer.getWorkbook().addPicture(byteArrayOut.toByteArray(), HSSFWorkbook.PICTURE_TYPE_JPEG));
            }
        }
        out = res.getOutputStream();
        res.reset();// 清空输出流
        res.setContentType("application/vnd.ms-excel;charset=utf-8");
        //response.setContentType("multipart/form-data;charset=UTF-8");也可以明确的设置一下UTF-8，测试中不设置也可以。
        res.setHeader("Content-Disposition", "attachment; fileName=" + fileName + ";filename*=utf-8''" + URLEncoder.encode(fileName, "UTF-8"));
        res.addHeader("Pargam", "no-cache");
        res.addHeader("Cache-Control", "no-cache");
        writer.flush(out, false);
        IoUtil.close(out);
    } catch (IOException e) {
        logger.error("分析结果图表下载发生异常" + e.getMessage());
    } finally {
        IoUtil.close(out);
    }
    logger.info("分析结果图表下载结束");
    //return JsonUtils.toJson(new ResponseMap(200, "下载成功"));
}