echarts图表转图片并导出为word文档

最近对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时也有其他方式。后续会补充一些更加简易，正规的方式。如有错误，还望指正，如有不懂，可评论留言，小编一定尽力解答。