java导出含echarts图的页面为word文档（包括前端js和后端两种写法）

总结为两种方法，一种是后端使用freemarker，一种是前端使用js插件。两种方法各有利弊。前端的比较简单，但是格式容易出现问题。后端的比较稳定，但是较前端来说更为繁琐。一般更加倾向于后端的写法。

一、后端使用freemarker

1、导入maven依赖

        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.28</version>
        </dependency>

2、制作模板文件

首先创建一个doc文档，如下图：

这个文档就是你大致需要生成的样子。图片可以随意，这里这是利用这张图片在这里占个位置。

将该文档保存为2003 xml：

然后用XML文本编辑器打开该文件，这里推荐一个工具Firstobject free XML editor，下载地址：Firstobject free XML editor

 

用工具打开这个文件，可以看到里面的代码很多很乱，不要慌，用ctrl+F找到你需要动态生成的标题或者文字：

将其改为${title}：

接下来改图片占位符,找到结尾为preserve的标签：

将后面的一大堆图片的代码删除，然后改为你图片的占位符：${img}:

将该文件另存为ftl文件：

3、使用getDataURl()方法获取echarts图片base64码，并传给后台

               var stinkEcharts1 = function (data) {
                    option = {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: ['time', 'CH4', 'NH3', 'H2S','VOCs'],
                            source: data
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: [
                            {animation: false,type: 'bar'},
                            {animation: false,type: 'bar'},
                            {animation: false,type: 'bar'},
                            {animation: false,type: 'bar'},
                        ]
                    };
                    var chart = echarts.init(document.getElementById('stink1'),'macarons');
                    chart.setOption(option);
                    imgStink1 = chart.getDataURL();
                }

        $.ajax({
            type: 'post',
            url: "/appcenter/envAssessReport/export1",
            data : {
                title:$("#ty").text(),
                imgStink1:imgStink1,
               
            },
            dataType : "json",
            success : function (data) {
                var map = data.data;
                if (map.num==1){
                    window.location.href='/statics/download/word.docx'
                }else {

                }


            },
        })

4、WordUtil工具类

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter;
import java.io.Writer;
import java.util.Map;
import freemarker.template.Configuration;
import freemarker.template.Template;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

/**
 * @author 
 * @description
 * @Date 2020/4/23 15:13
 **/
@Component
public class WordUtils {
    private static final String FTL_FP = "D:/file/"; //模板路径

    private static Configuration configuration = null;
    static{
        configuration = new Configuration(Configuration.VERSION_2_3_28);
        configuration.setDefaultEncoding("utf-8");//设置默认的编码

    }

    public  Boolean writeWordReport(String wordFilePath,String wordFileName,String templateFileName, Map<String, Object> beanParams) {
        Writer out = null;
        try {
            configuration.setDirectoryForTemplateLoading(new File(FTL_FP));
            Template template = configuration.getTemplate(templateFileName, "UTF-8");

            //获取文件目录，如果不存在则创建
            String filePath = "";
            int index = wordFilePath.lastIndexOf(File.separator);
            if(index != wordFilePath.length()-1){
                filePath = wordFilePath+ File.separator;
            }else {
                filePath = wordFilePath;
            }
            File file1 = new File(filePath);
            if(!file1.exists()){
                file1.mkdirs();
            }

            //输出文件
            File file = new File(filePath+wordFileName);
            FileOutputStream fos = new FileOutputStream(file);
            out = new OutputStreamWriter(fos, "UTF-8");
            template.process(beanParams, out);
            return true;
        } catch (Exception e) {
            e.printStackTrace();
            return false;
        }finally{
            try {
                if(out != null) {
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    /**
     * 字符串转换
     */
    public static String turn(String str){
        String base64 = str.replaceAll(" ", "+");
        String[] arr = base64.split("base64,");
        String image = arr[1];
        return image;

    }
}

5、调用WordUtil.java工具类，生成word文档

public Map<String, Object> export(String title,String imgStink1) {

        Map<String, Object> map = new HashMap<>();
        String base64 = imgStink1.replaceAll(" ", "+");
        // 数据格式为data:image/png;base64,iVBORw0KGgoAA...  在"base64,"之后的才是图片信息
        String[] arr = base64.split("base64,");
        String image = arr[1];


        //添加模板数据
        Map<String,Object> dataMap = new HashMap<>();
        dataMap.put("title",title);
        dataMap.put("imgStink1",WordUtils.turn(imgStink1));
        


        //文件生成路径
        String wordFilePath = "D:/download/";
        //文件生成名称
        String wordFileName = "word.doc";
        //模板文件名称
        String templateFileName = "word (18).ftl";

        //生成word文档
        Boolean result =new WordUtils().writeWordReport(wordFilePath, wordFileName, templateFileName, dataMap);
        if(result){
            map.put("num",1);
        }else {
            map.put("num",0);
        }
        return map;

    }

  以上就是全部代码，敲完就可以下载成word文档了！

   注意：如果生成的图片看上去或圆或扁，可以在下载的doc文档中调整好图片格式，然后重复步骤2，重新生成模板文件，这样生成的图片就是你调整后的样子。

---

二、前端js

1、html页面引入js文件

<script  src="/FileSaver.js"></script>
<script src="/jquery.wordexport.js"></script>

js文件网盘地址：

链接：https://pan.baidu.com/s/1TtrJObbLPq6Mq3hQBd7UcQ 
提取码：f7c4

 

2、html页面

             <div id="main">         
                    <h1 align="center" id="ty">环境评估报表年表</h1>                   
                    <h2>1、园区臭气监测</h2>
                    <h4>表 1.1 臭气数据超标情况汇总柱状图</h4>
                    <div  class="chart" id="stink1"></div>
             </div>

3、js页面代码

$("#export").click(function (event) {

        var clone = $("#main").clone();//现将页面clone，以免格式收到影响
        var charts = clone.find(".chart");
        var flag = charts.length;

        var  count=0;
        for(var i = 0; i < charts.length; i++) {
            var curEchart = echarts.getInstanceByDom(charts[i]);
            if(curEchart) {
                var base = curEchart.getDataURL();
                flag--;
            }
            if(base!=undefined){
                var img = $('<img style="margin:0 auto;" src="' + base + '"/>');
                $(charts[i]).html(img);
            }
        }


        //
        var interval = setInterval(function() {
            if(true) {
                clearInterval(interval);
                //导出word
                clone.wordExport("word文档");
            }
        }, 200)


    })