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

最新推荐文章于 2024-10-30 19:37:29 发布

原创最新推荐文章于 2024-10-30 19:37:29 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #可视化

JS 专栏收录该内容

5 篇文章

订阅专栏

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

通过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:500px;width:1000px;"></div>
 </div>

js

//下载图片  divId==转成图片的DIV id imgName===下载图片的名称  aId===保存下载图片的路径
var downLoadImage = function(divId,imgName,aId){
 var documentObj = $("#"+divId);
 //var canv = document.createElement("canvas");
 //canv.width = w * 2;
 //canv.height = h * 2;
 //canv.getContext("2d").scale(2,2);
 var a = documentObj[0];
 html2canvas(documentObj[0],{
  //scale:2,
  height:500,
  width:1000
 }).then(function(canvas){
  //设置图片清晰度
  //var dataUrl = canvas.toDataURL();
  //var newImg = document.createElement("img");
  //newImg.src = dataUrl;
  //newImg.style.width = canvas.width/2 + "px";
  //newImg.style.height = canvas.height/2 + "px";
  //newImg.name = imgName+'.png';
  
  $("#"+aId).attr("href",canvas.toDataURL());
  $("#"+aId).attr("download",imgName+'.png');
  //自动点击a标签
  $("#"+aId+">p").trigger("click");
 });
};

//简单模拟echarts图形加载， 如果不知道使用echarts请前往上面官网学习
var downloadFour = function(divId){
 var preform = echarts.init(document.getElementById(divId), e_macarons);
 preform.clear();
 var preformOption = {
  //标题
  title : {
   text : "支行完成情况排名",
   textStyle: {
    color: "#7EE1FE",
    fontFamily: "微软雅黑",
    fontSize: 20
   },
   top: "4%",
   left: "center",
   bottom: "10%",
  },
 };
 preform.setOption(preformOption);
}

//批量下载图片
var downloadEchartsAll = function(){
 //初始化echarts图形
 downloadOne("baguetteBox-sliderView1111");
 //等待图片初始化完成
 setTimeout(() => {
  downLoadImage("baguetteBox-sliderView1111","downloadOne","down1");
  //渲染第二个图像
  setTimeout(() => {
   downloadTwo("baguetteBox-sliderView1111");
  }, 1000);
 }, 1000);
 
 setTimeout(() => {
  downLoadImage("baguetteBox-sliderView1111","downloadTwo","down1");
  setTimeout(() => {
   downloadThree("baguetteBox-sliderView1111");
  }, 1000);
 },3000)
 
 setTimeout(() => {
  downLoadImage("baguetteBox-sliderView1111","downloadThree","down1");
  setTimeout(() => {
   downloadFour("baguetteBox-sliderView1111");
  }, 1000);
 },5000)
 
 setTimeout(() => {
  downLoadImage("baguetteBox-sliderView1111","downloadFour","down1");
 },7000)
 
}