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

最新推荐文章于 2023-11-07 17:36:30 发布

康_宝

最新推荐文章于 2023-11-07 17:36:30 发布

阅读量8.3k

点赞数 2

本文链接：https://blog.csdn.net/SHEN525758203/article/details/48653715

版权

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

1.项目工程截图如下：

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

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ECharts 生成报表 并保存图片</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="<%=basePath %>js/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '<%=basePath %>js/echarts/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[5, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                setTimeout(exportImage, 2000);
                function exportImage(){
	                var data = "a="+encodeURIComponent(myChart.getDataURL("png"));
				    var xmlhttp;
				    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
				        xmlhttp = new XMLHttpRequest();
				    } else { // code for IE6, IE5
				        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				    }
				    xmlhttp.open("POST","<%=path%>/servlet/saveImage",true);
				    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				    xmlhttp.onreadystatechange = function() {
				        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				            alert("保存成功");
				        }
				    }
				    xmlhttp.send(data);
			    }
			    
            }
        );
    </script>
</body>
</html>

3.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
    <servlet-name>saveImage</servlet-name>
    <servlet-class>com.servlet.SaveImage</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>saveImage</servlet-name>
    <url-pattern>/servlet/saveImage</url-pattern>
  </servlet-mapping>
</web-app>

4.SaveImage.java

package com.servlet;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.word.WordUtil;

import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;

public class SaveImage extends HttpServlet {
	private static final long serialVersionUID = -1915463532411657451L;
	 
    public void init() throws ServletException {  
       
    } 
    protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
    	
    }
 
    protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
    	String a = request.getParameter("a");
        try {
            String[] url = a.split(",");
            String u = url[1];
            // Base64解码
            byte[] b = new BASE64Decoder().decodeBuffer(u);
            WordUtil wordUtil = new WordUtil();
            String fileStr = wordUtil.saveFile(); 
            // 生成图片
            OutputStream out = new FileOutputStream(new File(fileStr+"\\test.png"));
            out.write(b);
            out.flush();
            out.close();
            
            //数据模拟，如果是真实编写，可以建service层，dao层进行数据的获取
            Map<String, Object> dataMap = new HashMap<String, Object>();
            dataMap = getData();
            //生产word
            wordUtil.createWord("2.ftl", fileStr+"\\test.doc", dataMap);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public Map<String, Object> getData() {
    	Map<String, Object> dataMap = new HashMap<String, Object>();
    	WordUtil wordUtil = new WordUtil();
    	String fileStr = wordUtil.saveFile();
    	
    	dataMap.put("image", getImageStr(fileStr+"\\test.png"));
		List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();
		for (int i = 0; i < 2; i++) {
			Map<String,Object> map = new HashMap<String,Object>();
			map.put("xuhao", i);
			map.put("neirong", "内容"+i);
			list.add(map);
			
		}
		dataMap.put("list", list);
		dataMap.put("info", "测试");
		return dataMap;
    }
    public String getImageStr(String imgFile) {
		InputStream in = null;
		byte[] data = null;
		try {
			in = new FileInputStream(imgFile);
			data = new byte[in.available()];
			in.read(data);
			in.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		BASE64Encoder encoder = new BASE64Encoder();
		return encoder.encode(data);
	}
}

5.WordUtil.java

package com.word;

import java.io.BufferedWriter;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStreamWriter;
import java.io.Writer;
import java.util.Map;

import sun.misc.BASE64Encoder;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;

public class WordUtil {
	private Configuration configuration = null;

	public WordUtil() {
		configuration = new Configuration();
		configuration.setDefaultEncoding("utf-8");

	}

	public void createWord(String templetName, String filePathName, Map<String, Object> dataMap) {
		configuration.setClassForTemplateLoading(this.getClass(), "/com/word"); // FTL文件所存在的位置
		Template t = null;
		try {
			// 获取模版文件
			t = configuration.getTemplate(templetName);
		} catch (IOException e) {
			e.printStackTrace();
		}
		// 生成文件的路径和名称
		File outFile = new File(filePathName);
		Writer out = null;
		try {
			out = new BufferedWriter(new OutputStreamWriter(
					new FileOutputStream(outFile)));
		} catch (FileNotFoundException e1) {
			e1.printStackTrace();
		}

		try {
			t.process(dataMap, out);
		} catch (TemplateException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	public String getImageStr(String imgFile) {
		InputStream in = null;
		byte[] data = null;
		try {
			in = new FileInputStream(imgFile);
			data = new byte[in.available()];
			in.read(data);
			in.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
		BASE64Encoder encoder = new BASE64Encoder();
		return encoder.encode(data);
	}
	public String saveFile() {
		String nowpath = System.getProperty("user.dir");
		String path = nowpath.replace("bin", "webapps");
		path += "\\"+"TestWeb"+"\\"+"word";
		File tmp = new File(path);
		if (!tmp.exists()) {
			tmp.mkdirs();
		}
		return path;
	}
}

6.模版的制作：

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