`

echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成word

echarts保存图片生成word 
阅读更多

echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成word。

 

1.项目工程截图如下：

需要echarts包和生成word的freemarker-2.3.8.jar包

2.index.jsp页面中的代码：

[html] view plaincopy
 
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%  
  3. String path = request.getContextPath();  
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
  5. %>  
  6.   
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  8. <html>  
  9.   <head>  
  10.     <base href="<%=basePath%>">  
  11.       
  12.     <title>ECharts 生成报表 并保存图片</title>  
  13.     <meta http-equiv="pragma" content="no-cache">  
  14.     <meta http-equiv="cache-control" content="no-cache">  
  15.     <meta http-equiv="expires" content="0">      
  16.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  17.     <meta http-equiv="description" content="This is my page">  
  18.     <!-- 
  19.     <link rel="stylesheet" type="text/css" href="styles.css"> 
  20.     -->  
  21.   </head>  
  22.     
  23.   <body>  
  24.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  25.     <div id="main" style="height:400px"></div>  
  26.     <!-- ECharts单文件引入 -->  
  27.     <script src="<%=basePath %>js/echarts/build/dist/echarts.js"></script>  
  28.     <script type="text/javascript">  
  29.         // 路径配置  
  30.         require.config({  
  31.             paths: {  
  32.                 echarts: '<%=basePath %>js/echarts/build/dist'  
  33.             }  
  34.         });  
  35.           
  36.         // 使用  
  37.         require(  
  38.             [  
  39.                 'echarts',  
  40.                 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载  
  41.             ],  
  42.             function (ec) {  
  43.                 // 基于准备好的dom，初始化echarts图表  
  44.                 var myChart = ec.init(document.getElementById('main'));   
  45.                   
  46.                 var option = {  
  47.                     tooltip: {  
  48.                         show: true  
  49.                     },  
  50.                     legend: {  
  51.                         data:['销量']  
  52.                     },  
  53.                     xAxis : [  
  54.                         {  
  55.                             type : 'category',  
  56.                             data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]  
  57.                         }  
  58.                     ],  
  59.                     yAxis : [  
  60.                         {  
  61.                             type : 'value'  
  62.                         }  
  63.                     ],  
  64.                     series : [  
  65.                         {  
  66.                             "name":"销量",  
  67.                             "type":"bar",  
  68.                             "data":[5, 20, 40, 10, 10, 20]  
  69.                         }  
  70.                     ]  
  71.                 };  
  72.           
  73.                 // 为echarts对象加载数据   
  74.                 myChart.setOption(option);   
  75.                 setTimeout(exportImage, 2000);  
  76.                 function exportImage(){  
  77.                     var data = "a="+encodeURIComponent(myChart.getDataURL("png"));  
  78.                     var xmlhttp;  
  79.                     if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari  
  80.                         xmlhttp = new XMLHttpRequest();  
  81.                     } else { // code for IE6, IE5  
  82.                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
  83.                     }  
  84.                     xmlhttp.open("POST","<%=path%>/servlet/saveImage",true);  
  85.                     xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
  86.                     xmlhttp.onreadystatechange = function() {  
  87.                         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
  88.                             alert("保存成功");  
  89.                         }  
  90.                     }  
  91.                     xmlhttp.send(data);  
  92.                 }  
  93.                   
  94.             }  
  95.         );  
  96.     </script>  
  97. </body>  
  98. </html>  

3.web.xml

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <display-name></display-name>   
  8.   <welcome-file-list>  
  9.     <welcome-file>index.jsp</welcome-file>  
  10.   </welcome-file-list>  
  11.     
  12.   <servlet>  
  13.     <servlet-name>saveImage</servlet-name>  
  14.     <servlet-class>com.servlet.SaveImage</servlet-class>  
  15.   </servlet>  
  16.   
  17.   <servlet-mapping>  
  18.     <servlet-name>saveImage</servlet-name>  
  19.     <url-pattern>/servlet/saveImage</url-pattern>  
  20.   </servlet-mapping>  
  21. </web-app>  

4.SaveImage.java

[html] view plaincopy
 
  1. package com.servlet;  
  2.   
  3. import java.io.File;  
  4. import java.io.FileInputStream;  
  5. import java.io.FileOutputStream;  
  6. import java.io.IOException;  
  7. import java.io.InputStream;  
  8. import java.io.OutputStream;  
  9. import java.util.ArrayList;  
  10. import java.util.HashMap;  
  11. import java.util.List;  
  12. import java.util.Map;  
  13.   
  14. import javax.servlet.ServletException;  
  15. import javax.servlet.http.HttpServlet;  
  16. import javax.servlet.http.HttpServletRequest;  
  17. import javax.servlet.http.HttpServletResponse;  
  18.   
  19. import com.word.WordUtil;  
  20.   
  21. import sun.misc.BASE64Decoder;  
  22. import sun.misc.BASE64Encoder;  
  23.   
  24. public class SaveImage extends HttpServlet {  
  25.     private static final long serialVersionUID = -1915463532411657451L;  
  26.        
  27.     public void init() throws ServletException {    
  28.          
  29.     }   
  30.     protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {  
  31.           
  32.     }  
  33.    
  34.     protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {  
  35.         String a = request.getParameter("a");  
  36.         try {  
  37.             String[] url = a.split(",");  
  38.             String u = url[1];  
  39.             // Base64解码  
  40.             byte[] b = new BASE64Decoder().decodeBuffer(u);  
  41.             WordUtil wordUtil = new WordUtil();  
  42.             String fileStr = wordUtil.saveFile();   
  43.             // 生成图片  
  44.             OutputStream out = new FileOutputStream(new File(fileStr+"\\test.png"));  
  45.             out.write(b);  
  46.             out.flush();  
  47.             out.close();  
  48.               
  49.             //数据模拟，如果是真实编写，可以建service层，dao层进行数据的获取  
  50.             Map<String, Object> dataMap = new HashMap<String, Object>();  
  51.             dataMap = getData();  
  52.             //生产word  
  53.             wordUtil.createWord("2.ftl", fileStr+"\\test.doc", dataMap);  
  54.         } catch (Exception e) {  
  55.             e.printStackTrace();  
  56.         }  
  57.     }  
  58.       
  59.     public Map<String, Object> getData() {  
  60.         Map<String, Object> dataMap = new HashMap<String, Object>();  
  61.         WordUtil wordUtil = new WordUtil();  
  62.         String fileStr = wordUtil.saveFile();  
  63.           
  64.         dataMap.put("image", getImageStr(fileStr+"\\test.png"));  
  65.         List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();  
  66.         for (int i = 0; i < 2; i++) {  
  67.             Map<String,Object> map = new HashMap<String,Object>();  
  68.             map.put("xuhao", i);  
  69.             map.put("neirong", "内容"+i);  
  70.             list.add(map);  
  71.               
  72.         }  
  73.         dataMap.put("list", list);  
  74.         dataMap.put("info", "测试");  
  75.         return dataMap;  
  76.     }  
  77.     public String getImageStr(String imgFile) {  
  78.         InputStream in = null;  
  79.         byte[] data = null;  
  80.         try {  
  81.             in = new FileInputStream(imgFile);  
  82.             data = new byte[in.available()];  
  83.             in.read(data);  
  84.             in.close();  
  85.         } catch (IOException e) {  
  86.             e.printStackTrace();  
  87.         }  
  88.         BASE64Encoder encoder = new BASE64Encoder();  
  89.         return encoder.encode(data);  
  90.     }  
  91. }  

5.WordUtil.java

[html] view plaincopy
 
  1. package com.word;  
  2.   
  3. import java.io.BufferedWriter;  
  4. import java.io.File;  
  5. import java.io.FileInputStream;  
  6. import java.io.FileNotFoundException;  
  7. import java.io.FileOutputStream;  
  8. import java.io.IOException;  
  9. import java.io.InputStream;  
  10. import java.io.OutputStreamWriter;  
  11. import java.io.Writer;  
  12. import java.util.Map;  
  13.   
  14. import sun.misc.BASE64Encoder;  
  15. import freemarker.template.Configuration;  
  16. import freemarker.template.Template;  
  17. import freemarker.template.TemplateException;  
  18.   
  19. public class WordUtil {  
  20.     private Configuration configuration = null;  
  21.   
  22.     public WordUtil() {  
  23.         configuration = new Configuration();  
  24.         configuration.setDefaultEncoding("utf-8");  
  25.   
  26.     }  
  27.   
  28.     public void createWord(String templetName, String filePathName, Map<String, Object> dataMap) {  
  29.         configuration.setClassForTemplateLoading(this.getClass(), "/com/word"); // FTL文件所存在的位置  
  30.         Template t = null;  
  31.         try {  
  32.             // 获取模版文件  
  33.             t = configuration.getTemplate(templetName);  
  34.         } catch (IOException e) {  
  35.             e.printStackTrace();  
  36.         }  
  37.         // 生成文件的路径和名称  
  38.         File outFile = new File(filePathName);  
  39.         Writer out = null;  
  40.         try {  
  41.             out = new BufferedWriter(new OutputStreamWriter(  
  42.                     new FileOutputStream(outFile)));  
  43.         } catch (FileNotFoundException e1) {  
  44.             e1.printStackTrace();  
  45.         }  
  46.   
  47.         try {  
  48.             t.process(dataMap, out);  
  49.         } catch (TemplateException e) {  
  50.             e.printStackTrace();  
  51.         } catch (IOException e) {  
  52.             e.printStackTrace();  
  53.         }  
  54.     }  
  55.   
  56.     public String getImageStr(String imgFile) {  
  57.         InputStream in = null;  
  58.         byte[] data = null;  
  59.         try {  
  60.             in = new FileInputStream(imgFile);  
  61.             data = new byte[in.available()];  
  62.             in.read(data);  
  63.             in.close();  
  64.         } catch (IOException e) {  
  65.             e.printStackTrace();  
  66.         }  
  67.         BASE64Encoder encoder = new BASE64Encoder();  
  68.         return encoder.encode(data);  
  69.     }  
  70.     public String saveFile() {  
  71.         String nowpath = System.getProperty("user.dir");  
  72.         String path = nowpath.replace("bin", "webapps");  
  73.         path += "\\"+"TestWeb"+"\\"+"word";  
  74.         File tmp = new File(path);  
  75.         if (!tmp.exists()) {  
  76.             tmp.mkdirs();  
  77.         }  
  78.         return path;  
  79.     }  
  80. }  

6.模版的制作：

1).新建word文档，内容如下图：

2).把word文档另存为Word 2003 XML 文档，打开内容，如下图：

在<w:tr>之前<#list list as list>,在</w:tr>之后加</#list>，如果不循环，不需要加。接在把图片生产的一大串字符改成${image},试情况改此文件的编码。

3).把修改好的xml后缀改为ftl。模版做好，放在指定位置即可。跑完程序后，生产如下word:

大功告成!有什么问题，大家一起讨论!

分享到：
| 浏览器缓存问题解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成带图片和循环表格的word

    本项目涉及的关键技术是利用ECharts生成统计图，然后自动保存这些图像到服务器，最后结合Freemarker模板引擎生成包含图片和循环表格的Word文档。 ECharts是一款由百度开发的开源数据可视化库，它提供了丰富的图表...

    freemarker wrod 统计图的生成

    在Word文档中生成统计图是一项常见的需求，尤其在数据分析和报告制作时。本篇文章将深入探讨两种方法，教你如何利用FreeMarker来实现这一功能。 ### 一、生成图片在客户端放入Word文档 1. **生成统计图**: 首先，...

    freemarkerdemo 生成word 插入图片

    在这个"freemarkerdemo生成word插入图片"的示例中，我们主要探讨如何利用Freemarker来创建Word文档，并且将图片集成到这些文档中。这个过程涉及到几个关键的技术点： 1. **Freemarker基础知识**：Freemarker是一个...

    freemarker 生成word,支持一个单元格生成多张图片

    在生成Word文档时，我们使用Apache POI创建一个Word文档对象，接着创建表格并添加行。在每个单元格中，我们利用POI API插入图片，图片数据来自FreeMarker处理后的结果。FreeMarker将图片的二进制数据转换成`...

    Freemarker导出word示例，包括jfreechart图表

    4. 使用JFreeChart生成图表并保存为图片文件。 5. 在生成的Word文档中，确保图表图像正确显示。 最后，压缩包中的"FreemarkerWord"可能包含了以下文件： - 一个或多个Freemarker模板文件（.ftl），定义了Word文档的...

    springmvc采用freemarker动态生成带图片的word

    传统的做法可能是将图片作为二进制流保存到服务器，然后在Word文档中引用这个URL。但这种方式在离线或安全性要求较高的场景下可能不适用。为了解决这个问题，项目采用了将图片转换为Base64编码字符串的方式。 Base...

    java freemarker导出word -包含多张图片导出

    总结，使用Java FreeMarker导出包含多张图片的Word文档，需要结合Apache POI库，创建合适的模板，处理图片数据，并通过FreeMarker将模板与数据合并。这个过程涉及到文件操作、模板引擎的理解以及对Word文档结构的...

    FreeMarker+poi 模板生成word+导入图片

    以上就是FreeMarker与Apache POI结合生成Word文档并插入图片的基本流程。这种组合可以灵活地创建复杂的动态文档，适应各种需求，例如报告生成、批量文档定制等。开发者可以根据具体需求调整模板设计和数据模型，以...

    java通过freemarker模板导出word含图片

    在FreeMarker模板中，你需要使用Apache POI的API将Base64编码的图片插入到Word文档中。这涉及到创建`WPicture`对象，并将它添加到`Drawing`对象中。这个过程比较复杂，通常需要对Word文档的XML结构有深入理解。 总...

    freemarker根据word模板生成word的完整示例

    5. **保存文件**：最后，你需要保存生成的Word文档到本地或服务器上，这可以通过Java的文件操作API完成。 关于标签中的"freemarker"，它强调了Freemarker作为模板引擎的角色；"模板"指的是用于生成Word文档的XML...

    freemarker生成word，pdf转word，pdf插入图片

    freemarker根据模板ftl生成word，pdf格式转word，pdf指定位置插入图片

    FreeMarker生成word文件

    综上所述，FreeMarker生成Word文件涉及到Java编程、模板引擎使用、数据模型构建以及可能的第三方库（如Apache POI）的集成。通过熟练掌握这些知识点，开发者可以创建灵活且动态的Word文档生成系统。

    生成WORD freemarker导出WORD

    通过Java代码，我们可以将业务数据绑定到这些模板上，FreeMarker引擎会自动处理模板和数据的合并，生成Word文档。 使用UTF-8编码是该项目的一个关键点。在处理中文字符时，确保文件编码正确至关重要，否则可能会...

    springboot中使用freemarker动态生成word文档，以及使用POI导出自定义格式Excel

    Springboot项目中: 1. 使用Apache POI 3.9 自定义样式导出Excel文件...2. 使用freemarker动态生成word .doc文档(带图片Word以及复杂格式word) 详细说明见个人博客及 github: https://github.com/DuebassLei/excel-poi

    java利用freemarker生成word.pdf

    在这个步骤中，我们可以学习到如何使用 Freemarker 库来填充数据到模板中，并生成最终的 Word 文档。 在 Demo 中，我们可以看到，首先，我们需要引入 Freemarker 库的相关类，然后创建一个 Configuration 对象，并...

    java-根据word模板生成word-freemarker-完整示例

    然后，使用Freemarker的`Template`类来解析模板并合并数据，最后将生成的Word文档输出到文件系统。 5. **生成Word文档**： Freemarker可以生成多种类型的输出，包括Word文档。生成Word文档时，它会将模板解析为...

    利用FreeMarker生成word文件例子

    ### 使用FreeMarker生成Word文档 1. **配置FreeMarker**：首先，需要在项目中引入FreeMarker的依赖，例如通过Maven或Gradle添加对应的依赖库。然后，配置FreeMarker的环境，包括设置模板目录、缓存策略等。 2. **...

    java 使用 freemarker 导出word 包含 图片和动态的数据表，动态行和动态列

    本篇文章将深入探讨如何使用FreeMarker模板引擎来生成包含图片和动态数据表的Word文档，尤其注重动态行和动态列的处理。 FreeMarker是一个强大的模板语言，用于生成文本输出，如HTML、XML、Word文档等。它与Java...

    Java中使用 FreeMarker 生成pdf盖章合同文件

    Java中使用FreeMarker生成PDF合同文件的过程主要包括配置FreeMarker环境、创建数据模型、解析模板、生成PDF以及添加图片盖章。通过结合FreeMarker的灵活性和Flying Saucer的转换能力，我们可以方便地将动态生成的...

    freemarker模板技术生成复杂word文档---解决了编码问题

    大致的思路是先用office2003或者2007编辑好word的样式，然后另存为xml，将xml翻译为FreeMarker模板，最后用java来解析FreeMarker模板并输出‘.doc’ word文档。经测试这样方式生成的word文档完全符合office标准，...

Magicbox
Global site tag (gtag.js) - Google Analytics