直接附上代码

页面中设置下载柱状图按钮，带上下载图片名称。

Mon 06Mon 13Mon 20获取url 截取base64 转blob 下载解决思路Adding GANTT diagram functionality to mermaid

let myChart = echarts.init(this.$refs.barCharts)

            // 获取base64位图片downLoad(title, num) {if (num === 0) {let img = new Image();img.src = this.$refs.barCharts.myChart.getDataURL({pixelRatio: 2,backgroundColor: '#001C54'});let str = img.srcthis.downLoadFile(title + '.png', str)}},// 下载图片downLoadFile(fileName, content) {let aLink = document.createElement('a');let blob = this.base64ToBlob(content); //new Blob([content]);let event = document.createEvent("HTMLEvents");event.initEvent("click", true, true);//initEvent  事件类型，是否冒泡，是否阻止浏览器的默认行为aLink.download = fileName;aLink.href = URL.createObjectURL(blob);aLink.click()},//base64转blobbase64ToBlob(code) {let parts = code.split(';base64,');// 文件类型 image/let contentType = parts[0].split(':')[1];//parts[1]是base64数据 window.atob用于对base64数据进行解码let raw = window.atob(parts[1]);let rawLength = raw.length;// new Uint8Array(length)创建初始化为0的，包含length个元素的无符号整型数组let uInt8Array = new Uint8Array(rawLength);for (let i = 0; i < rawLength; ++i) {// charCodeAt()返回指定位置的unicode编码uInt8Array[i] = raw.charCodeAt(i);}return new Blob([uInt8Array], {type: contentType});}

【echarts柱状图保存为图片并下载】相关推荐

将Echarts图表保存为图片【使用自定义下载按钮，不用Echarts自带下载功能】
因为前端UI设计的Echarts图表的下载按钮是自定义的,但是Echarts自带工具栏的图表下载按钮是固定的不能改变,所以我们需要另写一个方法: 具体做法如下: 1.首先创建一个div来展示我们的Ec ...
ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法...
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
【图文保存为图片并下载到相册】海报 h5，微信和 ios 不支持和用uniapp 微信小程序使用canvas把页面转为图片保存到手机
第一种,[图文保存为图片并下载到相册] h5, 微信和 ios 不支持 1,安装html2canvas npm install html2canvas --save 2,在需要的页面引入 import ...
js将canvas保存成图片并下载
<canvas id="canvas" width="400" height="400"></canvas> < ...
js大屏导出图片_js将canvas保存成图片并下载
保存 var arr = [ {locations:[[0,0],[200,200],[0,400]],color:"red"}, {locations:[[0,0],[400,0 ...
js实现将canvas保存成图片并下载到本地
//图片导出为 png 格式 var type = 'png'; var imgData = canvas.toDataURL(type);/*** 获取mimeType* @param {Strin ...
echarts柱状图顶部添加图片
最近有个需求,在特定柱状图顶部要求展示图片,搜了下关于这方面的文章比较少,来记录下. series:[ ...markPoint:{symbol:'image://url',//url替换成你的图片地 ...
echarts柱状图柱体使用图片
效果图: 直接上代码: let option = {color: ["#bb0004", "#FFD48A"],tooltip: {trigger: " ...
echarts 保存/导出图片
要实现将统计图保存为图片导出/下载主要有以下两种方法: 1.工具栏: toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'}, // ...

【echarts柱状图保存为图片并下载】

echarts柱状图保存为图片并下载

直接附上代码

【echarts柱状图保存为图片并下载】相关推荐

最新文章

热门文章