echarts统计图保存成图片,兼容IE

╰半橙微兮° 2022-12-28 04:24 161阅读 0赞

在使用echarts做统计表时,有用户需要将统计图下载成图片,使用echarts原来的按钮,发现在IE下没反应,而且在谷歌上需要点两次(第一次生成图片,第二次下载图片),于是上网搜了相关信息后,整合下,成了下面的代码.在本人的应用下,谷歌个IE都能下载

//注:使用[X]字段名[/X]并在事件规则中使用doc.s("字段名","数值")来动态修改报表数据
    var myChart = echarts.init(document.getElementById('body')); 
    option = { 
         toolbox: { 
                    show: true,
                    feature: { 
                       
                        //saveAsImage: { show: true}//框架自身的保存图片
                       myTool2:{ //自定义按钮 danielinbiti,这里增加，selfbuttons可以随便取名字    
                       show:true,//是否显示    
                       title:'下载', //鼠标移动上去显示的文字    
                       icon:"linkey/bpm/easyui/themes/icons/down.gif",
                      onclick:function() { //点击事件,这里的option1是chart的option信息    
                               saveImg()
                             }    
                       }
                    }
                }
                 //其它配置
      
        ]
    };
    
    // 为echarts对象加载数据 
    myChart.setOption(option);
    
    
    function saveImg() { 
       var url = myChart.getConnectedDataURL({ 
    		pixelRatio: 5, //导出的图片分辨率比率,默认是1
    		backgroundColor: '#fff', //图表背景色
    		excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏
    			'toolbox'
    		],
    		type: 'png' //图片类型支持png和jpeg
    	});
    	 var type = 'png';
         var name = myChart.getOption().title.text + '.' + type;
         //IE
    	if(window.navigator.msSaveOrOpenBlob) { 
    		var btstr = atob(url.split(",")[1]);
    		var n = btstr.length;
    		var u8arr = new Uint8Array(n);
    		while(n--) { 
    			u8arr[n] = btstr.charCodeAt(n);
    		}
    		var blob = new Blob([u8arr]);
    		window.navigator.msSaveOrOpenBlob(blob, name);
    	}
    	//非IE
    	else { 
    		var tempA = document.createElement("a");
    		tempA.download =name;
    		tempA.href = url;
    		document.body.appendChild(tempA);
    		tempA.click();
    		tempA.remove();
    
    	}
    }