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

于 2020-07-20 16:08:54 发布
阅读量691 收藏
点赞数
分类专栏： 润乾报表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/raqsoft/article/details/107465762
版权
本文介绍了如何在报表工具中导出和打印Echarts图形。通过部署SlimerJS和Firefox，利用Javascript操纵网页，将Echarts统计图转换为图片并进行打印、导出。润乾报表提供了一套解决方案，支持Echarts及其他JavaScript图形的导出与打印，适用于Excel、PDF、Word等多种格式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【摘要】

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

 

echarts打印导出

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

但是，没那么简单！Echarts 图形是由 Javascript 亲自在前端网页上绘制的，需要从浏览器中截取图形才能导出和打印，而报表工具的导出功能是在后台实现的。噢？这就麻烦啦，还需要把浏览器画出来的图形取下来再啃吃啃吃传递给后台服务器。而且，万一报表有很多页呢，万一页面上不全部显示呢，

最低0.47元/天 解锁文章
博客
给 BIRT 的 SQL 数据集传多值参数
02-03 642
但预览结果看不到数据，原因在于JDBC因为“预防SQL注入”的安全问题，禁止了这种多值参数的传值方式。arg1相当于第一个问号，然后看结果，能查出数据来了。
博客
SQL 多字段条件查询
02-02 1157
SPL语言从理论模型上做了大量的这类创新，能极大的提高描述计算的能力，可以想象掌握了 SPL 语言的你，一个人维护的。=A2.select(pos(~.array().concat(","),"北京 ")!（可以理解为 JAVA 里的数组，只是这个数组比较广义，元素可以是任意数据类型）；还可以依次类推，~[-1] 是前一条记录,~[3] 是当前记录后面的第三条记录;=A2.select((~.销售额 -~[1]. 销售额 )>100000)pos(~.array().concat(","),"北京 ")
博客
SQL 分组条件深入剖析
01-19 2404
才导致自然而然的解题思路，能说的出，想得明白，但就是写不出相应的计算机语言。这一系列设计上的缺陷，造成了 SQL 的编写、维护、性能调优都成倍的增加工作量。集算器的 SPL 语言从根源上弃用了 SQL 背后的关系代数理论，发明新的离散数据集理论解决程序员描述计算的困难。追根溯源，上面 SQL 反映出来的问题，它缺少单纯的分组动作，不能显式的表达每个小分组，进而对每个小分组的更细致操作就无法直观表达。1、 按设备分组，找到每个设备下Ready的个数c1；2、 按设备分组，找到每个设备下所有状态的个数c2；
博客
多步骤复杂 SQL 优化实例
01-18 865
稍微复杂点的查询需求，写SQL就会是个烧脑的过程，除了证明我们人脑很聪明，逻辑思维能力强之外，剩余的就全是缺点，每个人经常用不同于其他人思路的方式绕行到同一个结果上，个性化这么强的编程方式，导致编写SQL、阅读SQL、调试SQL都很困难，维护成本也大大增高。在程序员编程描述计算这件事上，集算器 SPL 语言通过创新的数学理论模型《离散数据集》，大大改善《关系代数》（SQL背后的数学模型）在描述计算时的困难。简单的说是对有序计算更彻底的集合运算提倡分步等多方面创新，达到。
博客
集算器读写 json
01-17 254
在 json 文件中有上述内容，欲将其中的 results 取出并输出成新的 json 文件。A2：将 A1 的 results 字段导出成 json 字符串。A1: 读取 json 文件成字符串，导入为序表。A3：输出 json 串到文件中。
博客
解析 json，整理分散数据入库
01-16 834
根据 B5.SERVICES 记录里的字段数量循环，每个字段的名字可以在 C7 获得，每个字段的值可在 C8 取到。到此我们可以获得开篇所述“GROUPNAME”值、”SERVICES”中的键编号和“SERVICES”的值。“GROUPNAME”值、”SERVICES”中的键编号对应了数据库表 _groups 的 Groupname 和 ID。“LIST”中包含多个子孙记录，主要目标是”GROUPNAME”、”SERVICES”。“SERVICES”每个值对应数据库表 Services 中的一条记录。
博客
用集算器比较字符串相似性
01-13 525
1、有 1001 个数字串（每个数字串长度不等，都是 0~9 之内），每一个数字串都和另外 1000 个中找出相同数最多和不同数最多的数字串（等于 1001 个数字数字串都要找一次）如果只有第 1 行数字串含有 1，而第 1001 行数字串没有，算是不同数有 1 个；D7：计算 A4 与 diff 的差为 same 的值，循环并总是存下最大值，循环 2 结束。B5：循环 2，遇到成员 1 时候跳过，取成员 2 与成员 1 比较数字字符。B4：循环 1 的变量，初始为 0，记录比较的结果不同数与相同数。
博客
行转列，动态列枚举分组
01-12 450
Mongodb 不直接支持行转列，枚举分组做起来也很麻烦，要把数据读出来再用 Java、Php 等编程语言来实现；以下例子不使用 MongoDB 展现，如果使用 MongoDB 需要用 SPL 的 mongo_open()函数连接数据库，用 mongo_shell() 函数查询原始数据结构。B8、C8：根据 subs 循环，将 A4 中单个学校各科的学生成绩统计出来并按顺序拼接成序列。A5、B5、A6：生成结果表，结构是 school、sub1_5、sub1_4…sub1_1、sub2_5、sub2_4…
博客
MongoDB 导出数据成 csv
01-11 481
将 MongoDB 中的多层数据导出为结构化二维数据，实现这种算法要考虑大数据的处理，结构化数据计算，用 python 实现存在一定难度。
博客
动态 json 转化序表
01-10 851
A1：将 json 文件读成文本，导入成序表。可以看出 A1 此时相当于按照 custName 分组的目标结果表。A2：用对 A1 用 news 函数解析出 custCars 序表，合并到 A1。
博客
mongodb 中做 join 的方法
01-09 998
用 Mongodb 是不支持 join 查询的, 要多次查询很不方便。可以考虑配合 mongodb 使用的本身有计算能力的工具，比如使用 SPL。通过 employee 文档和 seller 文档查询 employee.state 为 California 的 sales orders。A4：选出满足条件的结果，订单 1、3 都属于来自 California 的雇员 1。
博客
查找满足条件的子记录并合并
01-06 268
问题是，要将 mongodb 中的一系列字符串记录按照逗号分割的首个数字值筛选。A4：将每个字符串成员转成序列，取第一个子成员，根据其选择数据。A3：找到需要计算的数据序列。
博客
筛选用户权限子集记录
01-05 456
A4：对照 A2 每条记录的 au 是不是 A3 的子集，如果是就查出来。
博客
mongodb 分组子文档合并
01-04 648
A4：每组数据的 acls 列内数据合并成一个序列，作为 readUser 保存。A3：数据根据 name 分组。
博客
对序表记录固定排序
01-03 553
A2：使用 align 函数把 A1 按照排序依据进行排序 / 对齐。[300,200,100,400] 可以是外部参数（假设命名为 list），A2 的代码则可以改为 A1.align@s(list,PRODUCT_ID)集算器提供 JDBC 接口，可以像数据库一样使用，
博客
组内每隔 5 行加一个分隔线
12-30 919
BIRT 可通过 JDBC 访问集算器，可以像数据库一样使用，参考。：在组内每隔 5 行设一个标签。
博客
文本中按规则分组区段随机抽样
12-29 407
A1:读入文件，第一行作为列名，并设置SessionDate、Start和End的数据类型，最后将SessionDate和Start拼成完整日期DateStart。A2:将A1按Easting,Northing分组，循环每一组。循环体即缩进的B2-D4，可用A2来引用循环变量。类似地，B3的循环体是C3-D4。C4-D4:如果C3过滤的结果不空，则随机取记录存入B2，并将该记录追加到D4。C3:第1组(B2==null)数据直接返回，否则过滤出与B2间隔大于6小时的记录。B3:循环C3每组数据。
博客
拆串后结构化，其中按行对齐
12-28 449
直观的办法是两个文件按行JOIN起来，用计算列就能获得sku。A1：读取文本文件的内容，将每一行作为一个成员返回成序列。A2：读取文本文件的内容，将每一行作为一个成员返回成序列。A3：拆出A2中的sku，并和A1进行连接。这段代码可以方便地集成进Java（参考。
博客
动态列合并更新
12-27 903
提问者需要将两表的一些列进行合并，将 B 表的一些列更新到 A 表。题目中已经给出了 MERGE 语句的写法，难点在于他需要合并的列数是动态的。A2、A3：查询 A 表、B 表，设置 id 为序表主键。A4：按 id 合并两表去重，保留 B 中的记录。A2：查询 B 表中要更新到 A 表的字段。
博客
记录内值排序
12-26 797
需求是把源表中每行数据中的数据排序，重新填到改行中。A3：根据 A2 每条记录转换成数组重排，再填回去。A1: 连接数据库。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值