文本生成模板java和js怎么写,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, MapbeanParams) {

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 Mapexport(String title,String imgStink1) {

Mapmap = new HashMap<>();

String base64 = imgStink1.replaceAll(" ", "+");

// 数据格式为data:image/png;base64,iVBORw0KGgoAA... 在"base64,"之后的才是图片信息

String[] arr = base64.split("base64,");

String image = arr[1];

//添加模板数据

MapdataMap = 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页面

环境评估报表年表

1、园区臭气监测

表 1.1 臭气数据超标情况汇总柱状图

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)

})