echarts外部按钮进行图表下载

      <div id="monitor_cluster_source" ref="myChart"></div>
      <button @click="ceshi">测试</button>

上面的div是echarts容器，下面是button按钮，只是测试，样式可以自己调节。也是用了网上办法，主要也是官方的getDataURL。

methods:{
    
     ceshi() {
      // let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
      let myChart = this.$echarts.getInstanceByDom(document.getElementById('monitor_cluster_source'));
      // 获取画布图表地址信息
      const imgUrl = myChart.getDataURL({
        type: "jpeg",
        pixelRatio: 1,
        backgroundColor: "#fff",
        excludeComponents: [
          //保存图表时忽略的工具组件,默认忽略工具栏
          "toolbox",
        ],
      });
      // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
      if (window.navigator.msSaveOrOpenBlob) {
        // 截取base64的数据内容（去掉前面的描述信息，类似这样的一段：data:image/png;base64,）并解码为2进制数据
        let bstr = atob(imgUrl.split(",")[1]);
        // 获取解码后的二进制数据的长度，用于后面创建二进制数据容器
        let n = bstr.length;
        // 创建一个Uint8Array类型的数组以存放二进制数据
        let u8arr = new Uint8Array(n);
        // 将二进制数据存入Uint8Array类型的数组中
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        // 创建blob对象
        let blob = new Blob([u8arr]);
        // 调用浏览器的方法，调起IE的下载流程
        window.navigator.msSaveOrOpenBlob(blob, "echarts下载" + ".jpg");
      } else {
        //类似chrome浏览器创建一个a标签并使用a标签的href属性下载
        let tempA = document.createElement("a");
        tempA.download = "echarts下载" + ".jpg";
        tempA.href = imgUrl;
        document.body.appendChild(tempA);
        tempA.click();
        tempA.remove();

        // var url = myChart.getConnectedDataURL({
        //   pixelRatio: 5, //导出的图片分辨率比率,默认是1
        //   backgroundColor: '#fff', //图表背景色
        //   excludeComponents: [ //保存图表时忽略的工具组件,默认忽略工具栏
        //     'toolbox'
        //   ],
        //   type: 'png' //图片类型支持png和jpeg
        // });
      }
    },
    
}