web页面怎么实现echarts统计图的打印导出

这篇文章主要讲解了“WEB页面怎么实现echarts统计图的打印导出”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“web页面怎么实现echarts统计图的打印导出”吧！

实现 echarts 的打印导出功能是需要前端和后端一起来完成的，也就是需要 echarts 在页面呈现之后，由浏览器截图并把图片传递给后端，后端最后实现打印导出。例如单页 echarts 导出打印的实现可以用 getDataURL() 方法获得图片后进行后续处理。

而当数据是分页展现的时候，页面中是没有将所有的 echarts 统计图进行展现的（比如第 2 页也有 echarts，但是没翻页之前第 2 页是不展现的），浏览器也就无法截图给后端程序；而后端程序在执行打印导出过程中也不能调用 js 进行截图。那么当我们使用单页导出方案时就会出现这样的问题：导出打印的结果中 echarts 会有显示空白的情况。

这时候可以通过使用一些前端自动化测试工具来让所有页中的 echarts 图形进行展现，然后截图给后端。以 slimerjs 插件为例，具体实现思路如下：

1）根据前台页面获取每页 echarts 代码

2）每页 echarts 代码对应生成一个临时文件

3）运行命令获取临时文件

4）启动火狐装载临时文件并展现

5）利用 calcEcharts.js 转化成 base64 码图片

6）java 导出打印 base64 码图片

如果不想通过写代码实现 echarts 的打印导出功能，那么也有懒人方法：使用内置了 echarts 打印导出功能的报表工具，简单两步操作就可以实现：

1）报表工具中复制粘贴 echarts 代码完成统计图制作

2）服务器端配置 slimerjs 加载并安装火狐浏览器

具体操作可以参考 如何才能导出和打印 Echarts 图形？

使用报表工具除了可以快速实现 echarts 的打印导出，还有其他优点，例如：

1) 让 echarts 的取数更加简单，不管是从 sql 库取数，还是从其他文件等其他类型数据源中取数，只需要通过变量赋值就可以完成；

2) 页面组件布局也可以直接通过内置功能实现，更加完美的实现数图结合效果；

3) 使用报表工具内置的 api 接口可以通过几行代码实现把 Echarts 插入 Word 报告中，让报告更加生动清晰；

感谢各位的阅读，以上就是“web页面怎么实现echarts统计图的打印导出”的内容了，经过本文的学习后，相信大家对web页面怎么实现echarts统计图的打印导出这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！