共计 1965 个字符,预计需要花费 5 分钟才能阅读完成。
【摘要】
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 代码区域中间接写入所应用的图表脚本即可。
嗯,就这么简略。