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 }); }
这样我们就可以在任意的地方提供下载按钮 文字...
标签:echart,自定义,aLink,base64,let,blob,new,true,下载 来源: https://www.cnblogs.com/jiuxu/p/15074915.html