echart自定义下载事件

  1 echart本身是提供了下载按钮的,但是有的时候设计稿不是这样的 ,我们就需要自主实现下载方式,这里就介绍base64 转blob的一种方式 ,还有一种canvas的方式有空再补上.

   代码如下

//自定义下载表格图片
 //base64转blob
        
export function downloadPic(id,name){
  let content = id.getDataURL();                       // 这个方法是经过封装之后的,id就是我们最终经过init(),setOptions的echart图表,它具有getDataURL()方法
  let aLink = document.createElement('a');
  let blob = base64ToBlob(content);
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true);
  aLink.download = `${name}.png`;
  aLink.href = URL.createObjectURL(blob);
  aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
}


function base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
           uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
}

　　这样我们就可以在任意的地方提供下载按钮  文字...