需求:
1、分析报告中,使用 Highcharts 生产图表
2、导出分析报告到Word中,包括图表导出
难点/盲点分析:
1、前端的 Highcharts 是如何导出到图片的?需求:
1、分析报告中,使用 Highcharts 生产图表
2、导出分析报告到Word中,包括图表导出
难点/盲点分析:
1、前端的 Highcharts 是如何导出到图片的?2、前端如何获取 svg 提交到后台的图片?
解决方法:java 有相关的 包 可以实现
3、当界面有多张图片的时候,如何显示?
解决方法:图标渲染时或者提交的时候,通过调用 Highcharts 的getSvg() 获取各个图表的svg保存到隐藏域
以上也可以算是总结吧!我也是一步一步的分析出来的! 下面是我还原我的步骤:
我们首先分析 Highcharts 默认的导出功能的原理;是如何实现;
看下面的 exporting.js 导出js :
代码一:
w.exporting = { type: "image/png", url: "http://export.highcharts.com/", width: 800, buttons: {
代码二:
e.post = function(a, b) { var c, d; d = j("form", { method: "post", action: a, enctype: "multipart/form-data" }, { display: "none" }, i.body);
注意代码一 url :http://export.highcharts.com/ 和 代码二
由此,我们可以看出, Highcharts 的导出 js 是通过后台生产的图片;
验证:
结论: Highcharts 的导出 js 是通过模拟html请求,发送 SVG 到后台生成的图片
测试实现:
Svg转PNG的工具类:
package com.topinfo.qyaqsc.common; import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import org.apache.batik.transcoder.TranscoderException; import org.apache.batik.transcoder.TranscoderInput; import org.apache.batik.transcoder.TranscoderOutput; import org.apache.batik.transcoder.image.PNGTranscoder; /** *@Description: 将svg转换为png格式的图片 *@Author:杨攀 *@Since:2013-11-4下午01:36:30 */ public class SvgPngConverter { /** *@Description: 将svg字符串转换为png *@Author:杨攀 *@Since: 2013-11-4下午01:36:54 *@param svgCode svg代码 *@param pngFilePath 保存的路径 *@throws IOException io异常 *@throws TranscoderException svg代码异常 */ public static void convertToPng(String svgCode,String pngFilePath) throws IOException,TranscoderException{ File file = new File (pngFilePath); FileOutputStream outputStream = null; try { file.createNewFile (); outputStream = new FileOutputStream (file); convertToPng (svgCode, outputStream); } finally { if (outputStream != null) { try { outputStream.close (); } catch (IOException e) { e.printStackTrace (); } } } } /** *@Description: 将svgCode转换成png文件,直接输出到流中 *@Author:杨攀 *@Since: 2013-11-4下午01:37:56 *@param svgCode svg代码 *@param outputStream 输出流 *@throws TranscoderException 异常 *@throws IOException io异常 */ public static void convertToPng(String svgCode,OutputStream outputStream) throws TranscoderException,IOException{ try { byte[] bytes = svgCode.getBytes ("UTF-8"); PNGTranscoder t = new PNGTranscoder (); TranscoderInput input = new TranscoderInput (new ByteArrayInputStream (bytes)); TranscoderOutput output = new TranscoderOutput (outputStream); t.transcode (input, output); outputStream.flush (); } finally { if (outputStream != null) { try { outputStream.close (); } catch (IOException e) { e.printStackTrace (); } } } } }
测试工具类:
public static void main(String[] args) throws Exception{ String svg = "<svg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" width=\"600\" height=\"400\" version=\"1.1\"><desc>Created with Highcharts 3.0.7</desc><defs><clipPath id=\"highcharts-7\"><rect fill=\"none\" x=\"1\" y=\"0\" width=\"288\" height=\"513\" /></clipPath></defs><rect fill=\"#ffffff\" x=\"0\" y=\"0\" width=\"600\" height=\"400\" rx=\"0\" ry=\"0\" /><g class=\"highcharts-grid\" /><g class=\"highcharts-grid\" ><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 123.5 59 L 123.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 169.5 59 L 169.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 216.5 59 L 216.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 263.5 59 L 263.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 309.5 59 L 309.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 356.5 59 L 356.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 402.5 59 L 402.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 449.5 59 L 449.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 496.5 59 L 496.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 542.5 59 L 542.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 590.5 59 L 590.5 348\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0c0c0\" stroke-width=\"1\" d=\"M 76.5 59 L 76.5 348\" /></g><g class=\"highcharts-axis\" ><path opacity=\"1\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"1\" d=\"M 77 260.5 L 72 260.5\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"1\" d=\"M 77 175.5 L 72 175.5\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"1\" d=\"M 77 90.5 L 72 90.5\" /><path opacity=\"1\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"1\" d=\"M 77 345.5 L 72 345.5\" /><text visibility=\"visible\" style=\"color: rgb(77, 117, 158); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: bold; fill: #4d759e;\" text-anchor=\"middle\" transform=\"translate(0) rotate(270 28.38 203.5)\" x=\"28.38\" y=\"203.5\" ><tspan x=\"28.38\">Altitude</tspan></text><path visibility=\"visible\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"1\" d=\"M 76.5 59 L 76.5 348\" /></g><g class=\"highcharts-axis\" ><text visibility=\"visible\" style=\"color: rgb(77, 117, 158); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 12px; font-weight: bold; fill: #4d759e;\" text-anchor=\"middle\" transform=\"translate(0)\" x=\"333.5\" y=\"379\" ><tspan x=\"333.5\">Temperature</tspan></text><path visibility=\"visible\" fill=\"none\" stroke=\"#c0d0e0\" stroke-width=\"2\" d=\"M 77 348 L 590 348\" /></g><g class=\"highcharts-series-group\" ><g class=\"highcharts-series\" visibility=\"visible\" clip-path=\"url(#highcharts-7)\" transform=\"translate(590 348) rotate(90) scale(-1 1) scale(1)\" width=\"513\" height=\"289\"><path fill=\"none\" stroke=\"#2f7ed8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M 2.72642 23.3182 C 2.72642 23.3182 23.1745 296.141 36.8066 326.455 C 50.4387 356.768 57.2547 356.768 70.8868 356.768 C 84.5189 356.768 91.3349 342.218 104.967 310.132 C 118.599 278.046 125.415 237.379 139.047 196.339 C 152.679 155.299 159.495 104.932 173.127 104.932 C 186.759 104.932 193.575 172.834 207.208 222.455 C 220.84 272.077 227.656 307.52 241.288 353.037 C 254.92 398.554 275.368 450.041 275.368 450.041\" /><path class=\" highcharts-tracker\" visibility=\"visible\" fill=\"none\" stroke=\"rgb(192, 192, 192)\" stroke-linejoin=\"round\" stroke-opacity=\"0.0001\" stroke-width=\"22\" d=\"M -7.27358 23.3182 L 2.72642 23.3182 C 2.72642 23.3182 23.1745 296.141 36.8066 326.455 C 50.4387 356.768 57.2547 356.768 70.8868 356.768 C 84.5189 356.768 91.3349 342.218 104.967 310.132 C 118.599 278.046 125.415 237.379 139.047 196.339 C 152.679 155.299 159.495 104.932 173.127 104.932 C 186.759 104.932 193.575 172.834 207.208 222.455 C 220.84 272.077 227.656 307.52 241.288 353.037 C 254.92 398.554 275.368 450.041 275.368 450.041 L 285.368 450.041\" /></g><g class=\"highcharts-markers highcharts-tracker\" visibility=\"visible\" clip-path=\"none\" transform=\"translate(590 348) rotate(90) scale(-1 1) scale(1)\" width=\"513\" height=\"289\"><path fill=\"#2f7ed8\" d=\"M 275 446.041 C 280.328 446.041 280.328 454.041 275 454.041 C 269.672 454.041 269.672 446.041 275 446.041 Z\" /><path fill=\"#2f7ed8\" d=\"M 241 349.037 C 246.328 349.037 246.328 357.037 241 357.037 C 235.672 357.037 235.672 349.037 241 349.037 Z\" /><path fill=\"#2f7ed8\" d=\"M 207 218.455 C 212.328 218.455 212.328 226.455 207 226.455 C 201.672 226.455 201.672 218.455 207 218.455 Z\" /><path fill=\"#2f7ed8\" d=\"M 173 100.932 C 178.328 100.932 178.328 108.932 173 108.932 C 167.672 108.932 167.672 100.932 173 100.932 Z\" /><path fill=\"#2f7ed8\" d=\"M 139 192.339 C 144.328 192.339 144.328 200.339 139 200.339 C 133.672 200.339 133.672 192.339 139 192.339 Z\" /><path fill=\"#2f7ed8\" d=\"M 104 306.132 C 109.328 306.132 109.328 314.132 104 314.132 C 98.672 314.132 98.672 306.132 104 306.132 Z\" /><path fill=\"#2f7ed8\" d=\"M 70 352.768 C 75.328 352.768 75.328 360.768 70 360.768 C 64.672 360.768 64.672 352.768 70 352.768 Z\" /><path fill=\"#2f7ed8\" d=\"M 36 322.455 C 41.328 322.455 41.328 330.455 36 330.455 C 30.672 330.455 30.672 322.455 36 322.455 Z\" /><path fill=\"#2f7ed8\" d=\"M 2 19.3182 C 7.328 19.3182 7.328 27.3182 2 27.3182 C -3.328 27.3182 -3.328 19.3182 2 19.3182 Z\" /></g></g><text class=\"highcharts-title\" style=\"color: rgb(39, 75, 109); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 16px; fill: #274b6d;\" text-anchor=\"middle\" x=\"300\" y=\"25\" ><tspan x=\"300\">Atmosphere Temperature by Altitude</tspan></text><text class=\"highcharts-subtitle\" style=\"color: rgb(77, 117, 158); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 12px; fill: #4d759e;\" text-anchor=\"middle\" x=\"300\" y=\"40\" ><tspan x=\"300\">According to the Standard Atmosphere Model</tspan></text><g class=\"highcharts-axis-labels\" ><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"end\" x=\"69\" y=\"350.2736\"><tspan x=\"69\">0km</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"end\" x=\"69\" y=\"265.0731\"><tspan x=\"69\">25km</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"end\" x=\"69\" y=\"179.8726\"><tspan x=\"69\">50km</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"end\" x=\"69\" y=\"94.6722\"><tspan x=\"69\">75km</tspan></text></g><g class=\"highcharts-axis-labels\" ><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"77\" y=\"362\"><tspan x=\"77\">-90掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"123.6364\" y=\"362\"><tspan x=\"123.6364\">-80掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"170.2727\" y=\"362\"><tspan x=\"170.2727\">-70掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"216.9091\" y=\"362\"><tspan x=\"216.9091\">-60掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"263.5455\" y=\"362\"><tspan x=\"263.5455\">-50掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"310.1818\" y=\"362\"><tspan x=\"310.1818\">-40掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"356.8182\" y=\"362\"><tspan x=\"356.8182\">-30掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"403.4546\" y=\"362\"><tspan x=\"403.4546\">-20掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"450.0909\" y=\"362\"><tspan x=\"450.0909\">-10掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"496.7273\" y=\"362\"><tspan x=\"496.7273\">0掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"543.3637\" y=\"362\"><tspan x=\"543.3637\">10掳</tspan></text><text style=\"color: rgb(102, 102, 102); line-height: 14px; font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 11px; cursor: default; fill: #666;\" opacity=\"1\" text-anchor=\"middle\" x=\"590\" y=\"362\"><tspan x=\"590\">20掳</tspan></text></g><g class=\"highcharts-tooltip\" style=\"padding: 0px; white-space: nowrap; cursor: default;\" transform=\"translate(0 -999)\" ><rect fill=\"none\" fill-opacity=\"0.85\" stroke=\"black\" stroke-opacity=\"0.05\" stroke-width=\"5\" transform=\"translate(1 1)\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" rx=\"3\" ry=\"3\" /><rect fill=\"none\" fill-opacity=\"0.85\" stroke=\"black\" stroke-opacity=\"0.1\" stroke-width=\"3\" transform=\"translate(1 1)\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" rx=\"3\" ry=\"3\" /><rect fill=\"none\" fill-opacity=\"0.85\" stroke=\"black\" stroke-opacity=\"0.15\" stroke-width=\"1\" transform=\"translate(1 1)\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" rx=\"3\" ry=\"3\" /><rect fill=\"rgb(255, 255, 255)\" fill-opacity=\"0.85\" x=\"0.5\" y=\"0.5\" width=\"16\" height=\"16\" rx=\"3\" ry=\"3\" /><text style=\"color: rgb(51, 51, 51); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 12px; fill: #333333;\" x=\"8\" y=\"21\" /></g><text style=\"color: rgb(144, 144, 144); font-family: 'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif; font-size: 9px; cursor: pointer; fill: #909090;\" text-anchor=\"end\" x=\"590\" y=\"395\" ><tspan x=\"590\">Highcharts.com</tspan></text></svg>"; SvgPngConverter.convertToPng (svg, "E:\\xxx.png"); }
经过测试,成功的将 SVG 转换为 图片;
自己实现:
1、修改代码一片段的 url:为我们自己的 action
2、在action方法中,把svg转成图片
private String filename; private String type; private String width; private String scale; private String svg; //省略 get set 方法
/** *@Description: 分析报告 导出 *@Author:杨攀 *@Since: 2013-11-4下午02:59:37 *@return */ public String exportWord(){ HttpServletResponse response = ServletActionContext.getResponse (); HttpServletRequest request = ServletActionContext.getRequest (); ServletOutputStream outputStream = null; try { // 设置字符集 request.setCharacterEncoding ("UTF-8"); // html输出 键 值 Content-Type image/png;charset=utf-8 response.setContentType ("image/png;charset=UTF-8"); //键 值 Content-Disposition attachment; filename=chart.png response.addHeader ("Content-Disposition", "attachment; filename=\"" + filename + ".png\""); response.setCharacterEncoding ("UTF-8"); outputStream = response.getOutputStream (); if(StringUtils.isNotBlank (svg)){ SvgPngConverter.convertToPng (svg, outputStream); } } catch (Exception e) { } return null; }
经过测试,成功的将 SVG 转换为 图片,
那么剩下来就简单了,只需要把图片插入 word 模板 即可。
回顾:
一开始写的Svg转换图片测试有问题,后面经过google查询才解决问题:
网址:https://issues.apache.org/bugzilla/show_bug.cgi?id=44682
我开始百度,一直没解决,后面改成google,立刻就发现了问题所在。还是 google 给力
原来是 maven 依赖错误导致的。
最后:使用这个方法需要引用batic相关的包,maven pom文件如下:
<!-- svg 生产 图片 --> <dependency> <groupId>org.apache.xmlgraphics</groupId> <artifactId>batik-codec</artifactId> <version>1.7</version> </dependency>
第一步好了, 顺利解决! O(∩_∩)O哈哈~.............................
导出到 word 的原理总结:
1、通过 Highcharts 的 getSvg() 方法获取到 每个图表的 svg 等参数放到隐藏域
2、提交到后台,根据svg生产图片输出到 word 中
补充:
Highcharts API:
http://api.highcharts.com/highcharts#Chart
根据API 中可以找到 getSvg() 方法
获取svg的方法示例:
$('#button').click(function() { var chart = $('#container').highcharts() svg = chart.getSVG() .replace(/</g, '\n<') // make it slightly more readable .replace(/>/g, '>'); document.body.innerHTML = '<pre>'+ svg +'</pre>'; });
相关推荐
本压缩包包含的是支持Highcharts导出到Word功能的最新版jar包。 首先,`jar包`是Java Archive的缩写,它是Java平台的一种归档文件格式,用于集合多个类文件和其他资源。在本场景中,这些jar包包含了实现Highcharts...
在这个场景中,“使用Itext将highcharts导出到word文档的demo”是一个实用的技术解决方案。Itext是一个Java库,主要用于创建和修改PDF文档,但它也可以用于创建其他类型的文档,包括Word文档。Highcharts则是一个...
在本文中,我们将探讨如何将Highcharts图表导出到Word文档。Highcharts是一款强大的JavaScript库,用于创建各种交互式图表,而将这些图表集成到Word文档中可以方便报告和分析的分享。以下是实现这一功能的关键步骤和...
可以导出highcharts报表,word、pdf都可以,简单的Demo
资源名称:Highcharts使用说明 中文WORD版内容简介:Highcharts是一个跨浏览器的Javascript图表控件,支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能,只需要...
"Jquery导出word、pdf、excel、json、png"是一个jQuery插件,它提供了便捷的API和功能,使得开发者能够轻松实现这些导出需求。这个插件的强大之处在于其跨平台和多格式支持,不仅涵盖了常见的办公文档格式,还支持...
上传内容包括 1,将java后台获取的数据写入...2,将图片导入word文档并导出(注意:导出图片在word模板上需要先随便找张图片先放入指定位置,另存为xml之后打开,将先前放入的图片xml删掉,做个标识符(例如:${abc}))
vs2010 MVC3 使用Highchart导出word文件
标题提到的"Java通过IText导出word和pdf所有jar",意味着这个压缩包可能包含了一系列必要的Java库,这些库用于通过IText库导出PDF以及可能通过其他库(如Apache POI)导出Word文档。"包括spring相关jar"表明这个包还...
easyUI+HighCharts+Aspose.cells+Aspose.word+Aspose.Pdf+WebService等的实例应用,easyui包括异步树加载,嵌套表格等,highcharts包括本地导出图片(仅限jpg)柱状,线状图例等,aspose.word、excel、pdf等使用的...
在IT行业中,纯前端Word带图表导出是一个重要的技术需求,尤其在数据分析、报告生成以及文档分享等场景中。这个话题主要涉及到JavaScript(JS)编程,因为“js”标签表明了我们将使用JavaScript来实现这一功能。本文...
视频详细讲解,需要的小伙伴自行网盘下载,链接见附件,永久有效...l POI操作word l OpenCV框架导出csv文件 l easyPOI操作 第四天 l PDF简介 l Jacob l JasperReport 第五天 l JfreeCharts l HighCharts l ECharts
4. **FreeMarker渲染**: FreeMarker在处理时会将Base64编码的字符串插入到模板的指定位置,生成包含Base64编码图片的Word文档。 5. **解码并显示图片**: 当Word文档打开时,它会自动解析Base64编码并显示相应的图像...
界面部分采用较新的技术,包括MVC4,最新版本的EasyUI,以及以及Uploadify文件上传组件、LODOP打印组件、CKEditor富文本编辑控件、Tags-Input标签录入控件、HighCharts图表展示控件、Word/Excel文档导出组件、zTree...
5. 报表整合:JEECG集成了Excel简易导出工具和Highcharts图形报表,方便开发者快速生成各种报表,包括PDF、Excel和Word格式。 6. 工作流设计器:JEECG集成了jbpm工作流设计器,允许开发者在页面配置流程转向,从而...
7. **报表与工作流整合**:集成简易报表工具和Highcharts图形报表,支持PDF、Excel、Word等多种格式的报表导出。同时,集成了工作流引擎JBPM,通过页面配置即可完成流程定义,简化了流程开发的复杂度。 8. **兼容性...