文档章节

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

raqsoft
 raqsoft
发布于 2018/12/13 10:52
字数 1317
阅读 188
收藏 1

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

1png

地球人都知道,报表工具一般都有导出和打印的功能,不仅可以将图形在页面上显示,还可以导出到 WORD、PDF 等文件中提高逼格,或者直接打印出来以供参考。So,每个 baby 都希望被集成的 Echarts 图形也可以,也可以和报表工具本身的那些美腻图形一样被导出打印。

但是,没那么简单!Echarts 图形是由 Javascript 亲自在前端网页上绘制的,需要从浏览器中截取图形才能导出和打印,而报表工具的导出功能是在后台实现的。噢?这就麻烦啦,还需要把浏览器画出来的图形取下来再啃吃啃吃传递给后台服务器。而且,万一报表有很多页呢,万一页面上不全部显示呢,那导出时还没呈现的图就无法截取了;打印也是类似地,一般报表工具的打印是用 Applet、FLASH 或导出成 PDF 等方式,都不 care 浏览器的,没法执行 Javascript 画图命令的。 那么问题来了,到底怎么才能实现 Echarts 图形的导出与打印呢?

当当当当,润乾报表来了,用新版本直接搞定,而且还是那个白菜价哈,5000 一套

实现方案是这样滴:

第一步:部署环境

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下载。

echarts打印导出

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> 

// 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 name="echartsJSUrlPrefix" value="http://localhost:6868/demo/raqsoft"/> 

第二步:制作包含 Echarts 图形的报表

echarts打印导出

第三步:导出与打印

现在点击报表呈现界面上方的菜单栏按钮就可以进行导出和打印操作了。

echarts打印导出

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

echarts打印导出

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

echarts打印导出

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

echarts打印导出

嗯,就这么简单。

© 著作权归作者所有

raqsoft
粉丝 0
博文 219
码字总数 356953
作品 0
郑州
私信 提问
echarts搞定各种地图(想怎么画就怎么画)

echarts提供了全国各省市及区县的js和json文件,但是并没有细化到区域内各街道范围,有时候项目中又有这种需求,领导给予重任,我们又不能轻易拒绝,只能是硬着头皮上了。 今天我们以北京市西...

Mr_ZhangQian
2018/09/20
0
0
ECharts整合HT for Web的网络拓扑图应用

ECharts图形组件在1.0发布的时候我就已经有所关注,今天在做项目的时候遇到了图标的需求,在HT for Web上也有图形组件的功能,但是在尝试了下具体实现后,发现HT for Web的图形组件是以矢量的...

xhload3d
2015/03/16
3.6K
0
ECharts 简单的使用过程,完美的图形展示

最近开发项目时要做图形报表,网上找了些东西,还是觉得ECharts靠谱,具备诸多优点,功能强大,图表完美,兼容性也比较好,基于html5动画渲染。 官网的demo中是写得比较全了,但很多用不到的...

kevin小当家
2015/08/07
635
0
pyEcharts安装及使用指南

pyEcharts安装及使用指南 ECharts是一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的Canvas类库ZRender,提供直观、生动、可交互、可高...

---dgw博客
2019/11/07
0
0
D3.js与echart.js的应用场景

什么是D3? D3.js的全称是Data-Driven Documents,其实就是一个数据驱动的文档的js库,简而言之就是一个数据可视化的库。那什么是数据可视化呢?举个例子: 给出一组数据 [10,80,40,100,30...

Nomad_Lau
2019/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

How to find table in a database with HeidiSQL

In this article I want to show you how you can find table by name with HeidiSQL. Find table by typing One of the options to find table is to having focus in the object explorer ......

Ciet
7分钟前
2
0
基于SWIG跨平台开发的C++编码规范

1、数组定义 使用数组不建议采用指针方式eg double *,或者 double test[4] 直接采用std::vector或list即可。对于固定长度的数组定义为一个结构体 double test[4]instead ofstruct Vec...

洋碱
9分钟前
2
0
用Markdown编程之布局

基本就是用Markdown的布局方式。 \:是转义符号,最高优先级。 行首+# :用于空间布局,1-6分别标明:模式根、子模式、子模式内。 行首+> :用于标注和通信,1个标明标注,2个标明分类,3个标...

dwcz
16分钟前
3
0
SpringBoot定时器多线程解决方案

@Scheduled 作用:spring定时器(定时执行一次或定时轮询执行一段代码) 使用场景:注解在方法上 参数说明:常用参数 @Scheduled 参数说明 String cron:cron表达式定义了方法执行的时间规则(网...

whoisliang
17分钟前
4
0
3.01、Spring AOP的理解

注:转 https://mp.weixin.qq.com/s/PsgTLn8cdTxdd542XgVkUA 什么是AOP AOP(Aspect-Oriented Programming), 即 面向切面编程 , 它与 OOP( Object-Oriented Programming, 面向对象编程) 相辅相......

追忆2025
23分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部