最近对echarts的使用很多，并且做了很多有意思的，很无解的需求，本文主要讲述如何实现将echarts输出到word。
- 实现方式：
前端：echarts转base64，将base64传递给后端
后端：接受base64，配置xml文件，将xml传递给前端
前端：接受xml,通过浏览器下载，导出word文档
首先，前端echarts转base64
- echarts的实现原理其实就是通过canvas绘制的，canvas提供了api，可将canvas转换为base64。
前端需要设置echarts的背景色，否则导出的图片为白色背景，在word文件中不易查看数据。
// 找到绘制echarts的canvas节点
let canvas = $('#mychart').find('canvas')[0]
// 调用toDataURL，将canvas转换为base64
let myBase64 = canvas.toDataURL('png')
-----
调用接口，将base64传递给后台。base64的有效长度需要去除前22位，前端/后端都可单独处理
-----
后端接收base64资源，配置xml
- 在项目中添加freemarker的依赖，或者引入jar包
- 使用word做一个需要的文件模版，并将其中需要改变的部分编程变量（图片建议先贴上大小相等的其他图片）
- 制作完成之后，将其另存为xml格式。
- 将转存的 xml 文件使用文本编辑器例如 notepad++ 等打开，将其中红色区域的删除掉，那些是图片的base64编码后的信息，然后替换为一个图片变量，传入新的图片的 base64 编码即可导出你所要的图片，一般来说导出的图片都是由前台 echarts 等工具生成的
- 导出列表的话还需要在 xml 中找到 <w:tr> ，在其前加入 <#list list as list> (注意第一个list 不能变，第二个list 为变量名，第三个list 为别名)，和</w:tr> 后加入 </#list> ，此外需将 name 改成 list.name，gender 改成 list.gender 。
- 复制 xml 粘贴至项目文件中，并将后缀名更改为 .ftl
- 编写导出 Word 工具类
//加载模板(路径)数据，也可使用setServletContextForTemplateLoading()方法放入到web文件夹下
config.setClassForTemplateLoading(this.getClass(), "/templates");
//设置异常处理器 这样的话 即使没有属性也不会出错 如：${list.name}...不会报错
config.setTemplateExceptionHandler(TemplateExceptionHandler.IGNORE_HANDLER);
try {
if(templateName.endsWith(".ftl")) {
templateName = templateName.substring(0,
templateName.indexOf(".ftl"));
}
Template template = config.getTemplate(templateName + ".ftl");
response.setContentType("application/msword");
response.setHeader("Content-disposition", "attachment;filename="+ URLEncoder.encode(fileName, StandardCharsets.UTF_8));
OutputStream outputStream = response.getOutputStream();
Writer out = new BufferedWriter(new OutputStreamWriter(outputStream));
//将模板中的预先的代码替换为数据
template.process(dataMap, out);
log.info("由模板文件：" + templateName + ".ftl" + " 生成Word文件 " + fileName + " 成功！！");
out.flush();
} catch (TemplateNotFoundException e) {
log.info("模板文件未找到");
e.printStackTrace();
} catch (MalformedTemplateNameException e) {
log.info("模板类型不正确");
e.printStackTrace();
} catch (TemplateException e) {
log.info("填充模板时异常");
e.printStackTrace();
} catch (IOException e) {
log.info("IO异常");
e.printStackTrace();
}
}
- 编写简单的Controller方法
/**
* @param image 注意该image参数为前台传过来图片
*/
@PostMapping("/exportWord")
public void exportWord(HttpServletResponse response, @RequestParam("image") MultipartFile image){
ExportWordUtil ewUtil = new ExportWordUtil();
Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", "导出word文档");
Base64.Encoder base64 = Base64.getEncoder();
try {
dataMap.put("image", base64.encodeToString(image.getBytes()));
} catch (Exception e){
}
List<User> userList = new ArrayList<>();
userList.add(new User("张三","男"));
userList.add(new User("李四","男"));
userList.add(new User("王五","女"));
dataMap.put("list", userList);
ewUtil.exportWord(dataMap, "test.ftl", response, "导出word文档");
}
- 启动项目，传入某个图片进行测试，这里选用的是前端传图片的 base64 编码的字符串。
- 读取.ftl文件，返回给前端。
前端接收返回的xml,输出word文档
$.get('../url', function (res){
let xml = res.data // 后端返回的xml。
let blob = new Blob([xml], {
type: `application/msword` //word文档为msword,pdf文档为pdf，msexcel 为excel
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `echarts.doc`; //下载文件的名字+后缀名
link.href = objectUrl;
link.setAttribute("download", fname);
link.click();
})
本文只是叙述了一种比较简易的方式，其实关于echarts转图片或者base64，有echarts自带的api,以及后端配置xml时也有其他方式。后续会补充一些更加简易，正规的方式。如有错误，还望指正，如有不懂，可评论留言，小编一定尽力解答。
