wordExport导出word时关于echarts图表生成图片的解决方案

一、基本介绍

wordExport是一款基于前端处理生成word的处理方式
在对应页面引入FileSaver.js和jquery.wordexport.js

使用：需生成word的部分.wordExport(文件名,文件样式)

二、echarts相关

一般我们页面存在echarts图表导出word时通常时将其先生成为一张图片，再将其导出，在图表转变图片的这个过程中，经常会出现导出文档中的echarts图片生成不完整的情况，要么直接是一张破图，要么是一张未加载完成的图片，针对这类问题，我的解决方案如下：
1.在echarts图表的区域下放置一个image标签，默认隐藏

2.echarts图表加载完毕后，
a.echarts自带函数finished触发操作；
b.getDataURL()获取图片路径；
c.将图片路径传入后端，保存在本地服务器，返回一个本地路径；
d.给隐藏的img标签赋予src属性；

/**
     * echarts图表保存至本地
     * @param base64Info
     * @param fileType 文件类型（.png）
     * @param request
     * @return
     */
    @RequestMapping("/echartToImg")
    @ResponseBody
    public Result echartToImg(String base64Info, String fileType, HttpServletRequest request){
        //若传入图片路及类型为空，返回错误提示
        if(StringUtils.isBlank(base64Info)&&StringUtils.isBlank(fileType)){
            return Result.error(CodeMsg.NULL_UPLOAD_FILE_ERROR.getMsg());
        }
        try {
            BASE64Decoder decoder = new BASE64Decoder();
            String realPath = request.getSession().getServletContext().getRealPath("/static/image/");
            File dir = new File(realPath);
            if (!dir.isDirectory()) {
                dir.mkdirs();
            }
            String fileName = System.currentTimeMillis()+fileType;
            File saveFile = new File(realPath,fileName);
            String imgUrl = "/static/image/"+fileName;
            FileOutputStream outputStream = new FileOutputStream(saveFile);
            byte[] decoderBytes = decoder.decodeBuffer(base64Info.split(",")[1]);
            outputStream.write(decoderBytes);
            outputStream.close();
            return Result.success(imgUrl);
        } catch (IOException e) {
            return Result.error(CodeMsg.SERVER_ERROR.getMsg());
        }
    }

e.当页面做出导出word的操作时，隐藏所有echarts图表的div，展示所有echarts相关的图片。

这种处理方式能较为稳定的解决echarts图片显示不全的问题。