java导出含echarts图的页面为word文档（包括前端js和后端两种写法）
总结为两种方法，一种是后端使用freemarker，一种是前端使用js插件。两种方法各有利弊。前端的比较简单，但是格式容易出现问题。后端的比较稳定，但是较前端来说更为繁琐。一般更加倾向于后端的写法。
一、后端使用freemarker
1、导入maven依赖
org.freemarker
freemarker
2.3.28
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 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 export(String title,String imgStink1) {
Map map = new HashMap<>();
String base64 = imgStink1.replaceAll(" ", "+");
// 数据格式为data:image/png;base64,iVBORw0KGgoAA... 在"base64,"之后的才是图片信息
String[] arr = base64.split("base64,");
String image = arr[1];
//添加模板数据
Map 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文件
js文件网盘地址：
链接：https://pan.baidu.com/s/1TtrJObbLPq6Mq3hQBd7UcQ
提取码：f7c4
2、html页面
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 = $('
');
$(charts[i]).html(img);
}
}
//
var interval = setInterval(function() {
if(true) {
clearInterval(interval);
//导出word
clone.wordExport("word文档");
}
}, 200)
})