使用freemarker將echarts圖片儲存到word中

影流2000發表於2018-04-03

使用freemarker將echarts圖片儲存到word中

在某已領域的業務中,經常需要對一類資料進行統計,生成echarts圖表並且附帶相應的描述材料匯出:

  • 將echarts儲存到本地

  • java讀取圖片進行base64編碼

  • 製作freemarker模板

  • 填充freemarker模板

  • 下載word


將echarts儲存到本地

使用js傳送相應的請求:

                //讓圖片先載入一會兒
                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);  
                }  

            }  
        );  

java端程式碼如下:

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();  

java讀取圖片進行base64編碼

將檔案轉換為byte陣列在進行base64編碼,程式碼如下

 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);  
    }  

製作freemarker模板

製作freemarker模板很簡單,注意word的版本:
將word文件進行排版,圖片,文字等進行排版固定, 使用office將word另存為xml檔案,開啟xml檔案使用${*}將文字和圖片替換,儲存xml,將字尾修改為ftl。
這樣我們的模板就做好了,接下來呼叫工具類將內容填充到模板中,程式碼如下:

public class TemplateTool {

    private Configuration configuration = null;

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

    // 引數:模板路徑、模板名稱、生成檔案路徑、要加入的資料map
    public void createFile(String temPath, String temName, String filePath, Map dataMap){
        configuration.setClassForTemplateLoading(this.getClass(), temPath);
        Template tl = null;

        try{
            tl = configuration.getTemplate(temName);
        }catch (IOException e){
            e.printStackTrace();
        }

        File outFile = new File(filePath);
        Writer out = null;
        try{
            out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(outFile)));
        }catch(FileNotFoundException e1){
            e1.printStackTrace();
        }

        try{
            tl.process(dataMap, out, ObjectWrapper.BEANS_WRAPPER);
            out.flush();
            out.close();
        }catch (TemplateException e){
            e.printStackTrace();
        }catch (IOException e){
            e.printStackTrace();
        }
    }

到這裡,圖文並茂的word已經生成好了,接下來只要提供檔案下載就實現功能了。

相關文章