如何才能导出和打印 Echarts 图形

【摘要】

Echarts，江湖人称一个纯 Javascript 的图表库，图形种类星罗棋布且个个颜值爆表，能够轻松驾驭 PC 和移动设备，与绝大部分浏览器均可称兄道弟，并且已然众多拥趸，还有很多报表对它采起了嫁接技术。
这么棒的图标库如何能在报表工具里导出和打印呢？Echarts 图形是由 Javascript 亲自在前端网页上绘制的，须要从浏览器中截取图形才能导出和打印，而报表工具的导出功能是在后台实现的。因此这就有必定难度了，快去乾学院看个究竟：如何才能导出和打印 Echarts 图形？！

地球人都知道，报表工具通常都有导出和打印的功能，不只能够将图形在页面上显示，还能够导出到 WORD、PDF 等文件中提升逼格，或者直接打印出来以供参考。So，每一个 baby 都但愿被集成的 Echarts 图形也能够，也能够和报表工具自己的那些美腻图形同样被导出打印。

可是，没那么简单！Echarts 图形是由 Javascript 亲自在前端网页上绘制的，须要从浏览器中截取图形才能导出和打印，而报表工具的导出功能是在后台实现的。噢？这就麻烦啦，还须要把浏览器画出来的图形取下来再啃吃啃吃传递给后台服务器。并且，万一报表有不少页呢，万一页面上不所有显示呢，那导出时还没呈现的图就没法截取了；打印也是相似地，通常报表工具的打印是用 Applet、FLASH 或导出成 PDF 等方式，都不 care 浏览器的，无法执行 Javascript 画图命令的。

那么问题来了，到底怎么才能实现 Echarts 图形的导出与打印呢？

当当当当，润乾报表来了，用新版本直接搞定，并且仍是那个白菜价哈，10000 一套！

实现方案是这样滴：

第一步：部署环境

1，在服务器端安装 SlimerJS 和 Firefox。

SlimerJS 是服务器端的 JavaScriptAPI 工具。也就是没有界面的可编程操做的浏览器。这样，润乾报表就能够用 Javascript脚本操纵网页，实现对页面图形的、网络监控等一系列操做了。

因为 SlimerJS 基于火狐的 Gecko 内核，所以使用 SlimerJS 时还须要安装与它匹配的 FireFox 浏览器版本。而后在报表服务器端能够利用 SlimerJS 返回的 API 程序，把网页中画出的 Echarts 统计图转换成一张图片，而后加载到报表单元格里进行打印、导出。

目前 SlimerJS 只能支持 Firefox 38-52 或者更低版本，因此不要下载安装 Firefox 最新版本。

SlimerJS 已经被加入润乾报表安装包中，放在润乾报表【安装根目录】\report\web\webapps\demo\raqsoft\slimerjs-0.10.3.zip；

也能够从 SlimerJS 官方网站https://slimerjs.org/download.html下载。

2，添加环境变量，设置变量名为 SLIMERJSLAUNCHER，变量值为 firefox 的安装路径。

3，WEB 应用配置

在 WEB-INF/raqsoftConfig.xml 中增长了两项配置。

// slimerjsDir 配置SlimerJS的安装目录。未配置此项，应用就不具有打印和导出Echarts的功能
<property name="slimerjsDir" value="e:\\\\\slimerjs-0.10.3"></property>

<property name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"></property> 

// slimerjsDir 配置SlimerJS的安装目录。未配置此项，应用就不具有打印和导出Echarts的功能
<property name="slimerjsDir" value="e:\\\slimerjs-0.10.3"></property>

<property name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"></property>

第二步：制做包含 Echarts 图形的报表

第三步：导出与打印

如今点击报表呈现界面上方的菜单栏按钮就能够进行导出和打印操做了。

导出：润乾报表可将带有统计图的报表文件输出为彻底不失真的 Excel 文件、PDF 文件、WORD 文件。

打印：润乾报表可将带有统计图的报表文件进行 Applet 打印、Flash 打印、PDF 打印。

明白人都看出来了吧，这个办法也适用于其余类型的 Javascript 图形，润乾报表目前已集成了多种第三方开源图形包，包括：echarts、chart.js、D3 等等。导出与打印的使用方法和上述的 Echarts 图形是同样同样地，在下图所示的 JavaScript 代码区域中直接写入所使用的图表脚本便可。

嗯，就这么简单。