需求:导出当前页面全部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, "下载成功"));
}
本文介绍如何利用Java的POI库,结合JavaScript的echarts.getDataURL方法,将网页上的所有Echarts图表转换成图片并一次性下载。通过获取图表的Base64编码,解码后写入IO流生成图片。
348

被折叠的 条评论
为什么被折叠?



