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 });
}

　　這樣我們就可以在任意的地方提供下載按鈕 文字...