使用html2canvas实现echarts的批量下载(echarts未初始化也可以下载)

最新推荐文章于 2024-08-20 09:36:59 发布

ILY酱油王

最新推荐文章于 2024-08-20 09:36:59 发布

阅读量1.2k

点赞数

分类专栏： JS 文章标签： js html 可视化

本文链接：https://blog.csdn.net/weixin_39172079/article/details/103679468

版权

本文介绍了如何使用html2canvas组件实现批量下载ECharts图表，即使图表未初始化也能下载。文章详细阐述了工具组件的作用，展示了实现效果，并提供了html和js代码示例，帮助读者理解如何在实际业务中应用这一功能。

摘要由CSDN通过智能技术生成

通过html2canvas实现echarts批量下载

工具组件说明

echarts:一个使用 JavaScript 实现的开源可视化库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
api地址:https://www.echartsjs.com/zh/api.html#echarts

html2canvas:一个将html代码转换为图片的组件
官网及下载地址:http://html2canvas.hertzen.com/

实现效果

业务需求:界面上有多个图标,每个放大查看图片详情,echarts本身提供了图片下载,但一次只能下载一个,当业务需要下载多个图片的时候,就会很麻烦,所以需要一个后台自动初始化echarts图片并批量下载选中的图片.
图形示例:
在这里插入图片描述

界面提供一个批量下载的按钮(随便添加一个,后续怎么放由美工决定)
由于只是做一个示例，只下载四个图片，点击批量下载按钮

图片效果如下

代码实现

html

<!-- 动态生成图片（将div位置移到屏幕外，宽高必须指定，否则加载不了echarts图形） -->
 <div id="hiddenViewBig">
  <!-- 用于保存下载图片的内容 -->
  <a id='down1'><p style='margin:0px;'></p></a>
  <div id='baguetteBox-sliderView1111' style="height