前端怎么导出图片_web页面如何实现echarts统计图的打印导出？

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

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

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

1&＃xff09;根据前台页面获取每页 echarts 代码

2&＃xff09;每页 echarts 代码对应生成一个临时文件

3&＃xff09;运行命令获取临时文件

4&＃xff09;启动火狐装载临时文件并展现

5&＃xff09;利用 calcEcharts.js 转化成 base64 码图片

6&＃xff09;java 导出打印 base64 码图片

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

1&＃xff09;报表工具中复制粘贴 echarts 代码完成统计图制作

2&＃xff09;服务器端配置 slimerjs 加载并安装火狐浏览器

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

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

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

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

3) 使用报表工具内置的 API 接口可以通过几行代码实现把 Echarts 插入 word 报告中&＃xff0c;让报告更加生动清晰&＃xff1b;

········

关键字

页面 echarts 导出打印

Web 页面 echarts 打印

前端 导出打印 echarts

分页 echarts 导出打印

多页 echarts 导出打印

Web 端 echarts 导出