java 导出word 包含echarts图表

需求是导出word，里面有数据统计图表。
要从后端直接导出图表的话，思路是这样的：
　　先通过echarts生成图片，通过phantomjs 截图，将图片暂存在本地，再将图片转换成base64，然后放入word。
 
phantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器。
 
一、准备word模板，转换成xml，需要填入数据的地方用${字段}，需要天出图片的地方可以先随便一张用图片替代，方便之后找到图片插入位置。这里就不多说了
 
二、准备环境、依赖
　1、准备js，需要用到的，放在同一个文件夹下面。自己更改echarts-convert.js的路径
　　
 
 
 　　echarts.min.js 和jquery.js 去官网下载
　　echarts-convert.js的内容如下：
　　

1. (function () {
2.     var system = require('system');
3.     var fs = require('fs');
4.     var config = {
5.         // define the location of js files
6.         //这样写要求这三个js在同一个文件夹下
7.         JQUERY: 'jquery-3.5.1.min.js',
8.         //ESL: 'esl.js',
9.         ECHARTS: 'echarts.min.js',
10.         // default container width and height
11.         DEFAULT_WIDTH: '400',
12.         DEFAULT_HEIGHT: '600'
13.     }, parseParams, render, pick, usage;
15.     usage = function () {
16.         console.log("\nUsage: phantomjs echarts-convert.js -options options -outfile filename -width width -height height"
17.             + "OR"
18.             + "Usage: phantomjs echarts-convert.js -infile URL -outfile filename -width width -height height\n");
19.     };
21.     pick = function () {
22.         var args = arguments, i, arg, length = args.length;
23.         for (i = 0; i < length; i += 1) {
24.             arg = args[i];
25.             if (arg !== undefined && arg !== null && arg !== 'null' && arg != '0') {
26.                 return arg;
27.             }
28.         }
29.     };
31.     parseParams = function () {
32.         var map = {}, i, key;
33.         if (system.args.length < 2) {
34.             usage();
35.             phantom.exit();
36.         }
37.         for (i = 0; i < system.args.length; i += 1) {
38.             if (system.args[i].charAt(0) === '-') {
39.                 key = system.args[i].substr(1, i.length);
40.                 if (key === 'infile') {
41.                     // get string from file
42.                     // force translate the key from infile to options.
43.                     key = 'options';
44.                     try {
45.                         map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');
46.                     } catch (e) {
47.                         console.log('Error: cannot find file, ' + system.args[i + 1]);
48.                         phantom.exit();
49.                     }
50.                 } else {
51.                     map[key] = system.args[i + 1].replace(/^\s+/, '');
52.                 }
53.             }
54.         }
55.         return map;
56.     };
58.     render = function (params) {
59.         var page = require('webpage').create(), createChart;
61.         var bodyMale = config.SVG_MALE;
62.         page.onConsoleMessage = function (msg) {
63.             console.log(msg);
64.         };
66.         page.onAlert = function (msg) {
67.             console.log(msg);
68.         };
70.         createChart = function (inputOption, width, height,config) {
71.             var counter = 0;
72.             function decrementImgCounter() {
73.                 counter -= 1;
74.                 if (counter < 1) {
75.                     console.log(messages.imagesLoaded);
76.                 }
77.             }
79.             function loadScript(varStr, codeStr) {
80.                 var script = $('<script>').attr('type', 'text/javascript');
81.                 script.html('var ' + varStr + ' = ' + codeStr);
82.                 document.getElementsByTagName("head")[0].appendChild(script[0]);
83.                 if (window[varStr] !== undefined) {
84.                     console.log('Echarts.' + varStr + ' has been parsed');
85.                 }
86.             }
88.             function loadImages() {
89.                 var images = $('image'), i, img;
90.                 if (images.length > 0) {
91.                     counter = images.length;
92.                     for (i = 0; i < images.length; i += 1) {
93.                         img = new Image();
94.                         img.onload = img.onerror = decrementImgCounter;
95.                         img.src = images[i].getAttribute('href');
96.                     }
97.                 } else {
98.                     console.log('The images have been loaded');
99.                 }
100.             }
101.             // load opitons
102.             if (inputOption != 'undefined') {
103.                 // parse the options
104.                 loadScript('options', inputOption);
105.                 // disable the animation
106.                 options.animation = false;
107.             }
109.             // we render the image, so we need set background to white.
110.             $(document.body).css('backgroundColor', 'white');
111.             var container = $("").appendTo(document.body);
112.             container.attr('id', 'container');
113.             container.css({
114.                 width: width,
115.                 height: height
116.             });
117.             // render the chart
118.             var myChart = echarts.init(container[0]);
119.             myChart.setOption(options);
120.             // load images
121.             loadImages();
122.             return myChart.getDataURL();
123.         };
125.         // parse the params
126.         page.open("about:blank", function (status) {
127.             // inject the dependency js
128.             page.injectJs(config.ESL);
129.             page.injectJs(config.JQUERY);
130.             page.injectJs(config.ECHARTS);
133.             var width = pick(params.width, config.DEFAULT_WIDTH);
134.             var height = pick(params.height, config.DEFAULT_HEIGHT);
136.             // create the chart
137.             var base64 = page.evaluate(createChart, params.options, width, height,config);
138.             fs.write("base64.txt",base64);
139.             // define the clip-rectangle
140.             page.clipRect = {
141.                 top: 0,
142.                 left: 0,
143.                 width: width,
145.                 height: height
146.             };
147.             // render the image
148.             page.render(params.outfile);
149.             console.log('render complete:' + params.outfile);
150.             // exit
151.             phantom.exit();
152.         });
153.     };
154. // get the args
155.     var params = parseParams();
157. // validate the params
158.     if (params.options === undefined || params.options.length === 0) {
159.         console.log("ERROR: No options or infile found.");
160.         usage();
161.         phantom.exit();
162.     }
163. // set the default out file
164.     if (params.outfile === undefined) {
165.         var tmpDir = fs.workingDirectory + '/tmp';
166.         // exists tmpDir and is it writable?
167.         if (!fs.exists(tmpDir)) {
168.             try {
169.                 fs.makeDirectory(tmpDir);
170.             } catch (e) {
171.                 console.log('ERROR: Cannot make tmp directory');
172.             }
173.         }
174.         params.outfile = tmpDir + "/" + new Date().getTime() + ".png";
175.     }
177. // render the image
178.     render(params);
179. }());

复制代码

 
　　2、安装phantomjs
　　　　网站：https://phantomjs.org/download.html
　　　　选择合适的版本，我下载的是windows的，下载解压
　　　　
 
 
 　　　　配置环境变量：
 
 
 
 
 　　　　
 
 
 　　
　　　　然后测试是否安装成功，在命令行 输入：phantomjs -- version
　　　　
 
 
 　　　　出现版本就表示安装成功了。
　　
　　3、构建echarts数据，就是option
　　　　可以看原文档：https://gitee.com/free/ECharts#https://gitee.com/link?target=http%3A%2F%2Fblog.csdn.net%2Fisea533%2Farticle%2Fdetails%2F43225717
　　　　

1. <dependency>
2.      <groupId>com.github.abel533</groupId>
3.      <artifactId>ECharts</artifactId>
4.      <version>3.0.0.6</version>
5. </dependency>               

复制代码

 
三、生成echarts图表
　　1、构建echarts 的数据option
　　　

1.     /**
2.      * 构建柱状图
3.      * @param cate x轴数据
4.      * @param enterpriseCnt 数据
5.      * @return
6.      */
7.     private static String getOption(List<String> cate, List<Integer> enterpriseCnt){
8.         GsonOption option = new GsonOption();
9.         option.title().setText("测试点位数图片"); // 标题
10.         // 设置图例
11.         option.legend().data("点位数").x("center");
13.         Bar bar = new Bar();
14.         // x轴
15.         CategoryAxis category = new CategoryAxis();
16.         category.data(cate.toArray());
18.         //y 轴
19.         ValueAxis valueAxis = new ValueAxis();
21.         bar.data().addAll(enterpriseCnt); // 数据
23.         option.xAxis(category);  //x轴
24.         option.yAxis(valueAxis);  //y轴
26.         option.series(bar);// 多条柱子放多个bar就行
28.         String optionStr = option.toString().replace(" ", "");
29.         log.info(optionStr);
30.         return optionStr;
31.     }

复制代码

　　2、生成echarts图片
　　

1.     public static String generateEChart(String option, String filepath, String fileName) {
2.         String dataPath = writeOptionToFile(option, filepath); // 将option 数据写磁盘上用文件保存
3.         String path = filepath + fileName+".png"; //生成图片路径
4.         try {
5.             String JSpath = "D:\\data\\tmp\\echarts-convert.js";
6.             String cmd = "phantomjs " + JSpath + " -infile " + dataPath + " -outfile " + path;
7.             log.info(cmd);
8.             Process process = Runtime.getRuntime().exec(cmd);
9.             BufferedReader input = new BufferedReader(new InputStreamReader(process.getInputStream(), "UTF-8"));
10.             String line = "";
11.             while ((line = input.readLine()) != null) {
12.                 log.info(line);
13.             }
14.             input.close();
15.             // 删除json数据
16.             File jsonFile = new File(dataPath);
17.             jsonFile.delete();
18.         } catch (IOException e) {
19.             e.printStackTrace();
20.         }
21.         return path;
22.     }

复制代码

　　

1.     public static String writeOptionToFile(String options, String filepath) {
2.         String dataPath = filepath +"echart.json";
3.         try {
4.             File writename = new File(dataPath);
5.             if (!writename.getParentFile().exists()) {   //文件目录不存在，则先创建，不然会报错
6.                 writename.getParentFile().mkdirs();
7.             }
8.             BufferedWriter out = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(writename), "UTF-8"));
9.             out.write(options);
10.             out.flush();
11.             out.close();
12.         } catch (IOException e) {
13.             e.printStackTrace();
14.         }
15.         return dataPath;
16.     }

复制代码

 
　　先测试一哈：
　　　
　　这个时候在文件夹下可以看到图片啦：
　　
 
 
 
四、导出word
　　准备好数据，图片需要base64编码的，将之前生成的echart图片读入转base64
　　

1.     public static String imageToBase64(String imgPath) {
2.         InputStream in = null;
3.         byte[] data = null;
4.         try {
5.             in = new FileInputStream(imgPath);
6.             data = new byte[in.available()];
7.             in.read(data);
8.             in.close();
9.         } catch(Exception ex) {
10.             ex.printStackTrace();
11.         }
12.         Base64Encoder encoder = new Base64Encoder();
13.         return encoder.encode(data);
14.     }

复制代码

　　
　　然后就是正常word的导出了
　　
 
 　　
　　

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！