在项目开发过程中，经常需要导出图片，尤其是有图表的应用，通常需要下载导出图表，虽然echarts在图表提供了下载组件，但是在具体的项目中，难免会遇到需要在图表容器外调用这个保存图片的方法。以下是解决方案：解决方案1.使用官方的echarts接口。使用echarts官方提供的getDataURL()方法返回一个base64的URL地址，我们可以使用这个地址在echarts图表容器外保存和下载图片。看一下官方APIechartsInstance.getDataURLFunction(opts:{//导出格式，可选png,jpeg类型?:string,//导出图片的分辨率，默认为1.pixelRatio?:number,//导出的图像背景颜色，默认为backgroundColor选项中的backgroundColor?:string,//要忽略的组件列表，例如['toolbox']excludeComponents?:Array.})=>stringExample:varimg=新图片（）;img.src=myChart.getDataURL({pixelRatio:2,backgroundColor:'#fff'});在chrome等新浏览器中下载base64图片还是比较容易的：创建一个a标签，将标签的href属性赋值给图片的base64编码，指定a标签的download属性为下载的名称文件触发a标签的点击事件，但是这个逻辑在IE下是不行的，这样写会直接报错。所以需要在IE下单独处理。这里IE在处理这种文件的时候提供了一个单独的方法：window.navigator.msSaveOrOpenBlob(blob,download_filename)调用这个方法可以直接触发IE的下载，还是比较方便的。具体方法如下：saveImg(){//获取画布图表的地址信息constimgUrl=this.dataChart.getDataURL({type:'jpeg',pixelRatio:1,backgroundColor:'#fff'});//如果浏览器支持msSaveOrOpenBlob方法（即使用IE浏览器时），则调用该方法下载图片if(window.navigator.msSaveOrOpenBlob){//截取base64的数据内容（去掉之前的描述信息，类似这段：data:image/png;base64,)并解码成二进制数据letbstr=atob(imgUrl.split(',')[1])//得到解码后的二进制数据的长度，即用于稍后创建二进制数据容器letn=bstr.length//创建一个Uint8Array类型的数组来存储二进制数据letu8arr=newUint8Array(n)//将二进制数据存储在一个Uint8Array类型的数组中while(n--){u8arr[n]=bstr.charCodeAt(n)}//创建一个blob对象letblob=newBlob([u8arr])//调用浏览器的方法调用IEwindow.navigator的下载过程。msSaveOrOpenBlob(blob,'echarts下载'+'.jpg')}else{//创建一个类似于chrome浏览器的a标签，使用标签的href属性进行下载lettempA=document.createElement("a");tempA.download='echarts下载'+'.jpg';tempA.href=imgUrl;document.body.appendChild(tempA);tempA.click();tempA.remove();}}方案2，使用canvasecharts图表本身是在canvas元素中绘制的，所以我们得到canvas对象就可以将它的canvas信息转换成一个地址。下面是实现代码//获取画布信息letcanvas=document.getElementsByTagName("canvas");if(canvas&&canvas.length>0){//创建一个标签lettempA=document.createElement("a");//设置下载名称tempA.download="echartsdownload"+.png";//设置地址和文件类型tempA.href=canvas[0].toDataURL("image/png");document.body.appendChild(tempA);//触发下载事件tempA.click();//删除标签tempA.remove();}多于
