实现 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 报告中，让报告更加生动清晰；

········

关键字

页面 echarts 导出打印

Web 页面 echarts 打印

前端 导出打印 echarts

分页 echarts 导出打印  

多页 echarts 导出打印

Web 端 echarts 导出