echart实现自写下载图片按钮

news/2025/2/25 7:48:15
  • 需求:点击自己写的下载按钮,下载echart提供的图片
  • 代码
	<el-button  style="margin-left:10px;" type="primary" plain @click="saveImgae" >导出</el-button>
	<div class="z-echartbox" style="height:50vh;width:100%">
				<div class="z-echart" style="height:50vh;width:100%" ref="online"></div>
	</div>

// js

// 导出图片
const online = ref(null)
const saveImgae = ()=>{

	let picInfo = online.value.getDataURL({ // 获取echart自带的下载的图片
       type: 'png',
       pixelRatio: 1.5,  //放大两倍下载,之后压缩到同等大小展示。解决生成图片在移动端模糊问题
       backgroundColor: '#fff'
   });//获取到的是一串base64信息
   const elink = document.createElement('a');
	elink.download = `xxxxx-${moment().format('YYYY-MM-DD HH:mm:ss')}`;
	elink.style.display = 'none';
	elink.href = picInfo;
	document.body.appendChild(elink);
	elink.click();
	URL.revokeObjectURL(elink.href); // 释放URL 对象
	document.body.removeChild(elink)
}

// 一些option设置
 toolbox: {
          feature: {
			saveAsImage: {show: false, title: '保存截图', type: 'png'}
          },
        },


http://www.niftyadmin.cn/n/5865201.html

相关文章

Flutter - StatefulWidget (有状态的 Widget) 和 生命周期

StatefulWidget /*** 需求&#xff1a;* 两个按钮&#xff0c;一个计数器* 这里要用到 StatefulWidget,因为 StatelessWidget 通常用来展示固定不变的数据*/ main() > runApp(MyApp());class MyApp extends StatelessWidget {overrideWidget build(BuildContext context) {…

Django ORM 的常用字段类型、外键关联的跨表引用技巧,以及 `_` 和 `__` 的使用场景

一、Django ORM 常用字段类型 1. 基础字段类型 字段类型说明示例CharField字符串字段&#xff0c;必须指定 max_lengthname models.CharField(max_length50)IntegerField整数字段age models.IntegerField()BooleanField布尔值字段is_active models.BooleanField()DateFiel…

【入门音视频】音视频基础知识

&#x1f308;前言&#x1f308; 这个系列在我学习过程中&#xff0c;对音视频知识归纳总结的笔记。因为音视频相关讲解非常稀少&#xff0c;所以我希望通过这个音视频系列&#xff0c;跟大家一起学习音视频&#xff0c;希望减少初学者在学习上的压力。同时希望也欢迎指出文章的…

【C++11】 并发⽀持库

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;C从入门到精通 目录 前言&#xff1a;&#x1f680; 并发⽀持库一&#xff1a;&#x1f525; thread库 二&#xff1a;&#x1f525; this_thread 三&#xff1a;&#x1f525; mutex 四&#xff1…

【Gin-Web】Bluebell社区项目梳理6:限流策略-漏桶与令牌桶

本文目录 一、限流二、漏桶三、令牌桶算法四、Gin框架中实现令牌桶限流 一、限流 限流又称为流量控制&#xff0c;也就是流控&#xff0c;通常是指限制到达系统的并发请求数。 限流虽然会影响部分用户的使用体验&#xff0c;但是能一定程度上保证系统的稳定性&#xff0c;不至…

从零开始用react + tailwindcs + express + mongodb实现一个聊天程序(二)

1.安装mogondb数据库 参考MongoDB安装配置教程&#xff08;详细版&#xff09;_mongodb安装详细步骤-CSDN博客 安装mondbcompass数据库连接工具 参考https://www.mongodb.com/zh-cn/docs/compass/current/connect/ 2.后端服务 1.创建src文件夹 并在src文件夹下创建 index…

DIP的实际举例

SOLID原则。 依赖倒置原则&#xff08;DIP&#xff09;的核心是高层模块不应该依赖于低层模块&#xff0c;二者都应该依赖于抽象&#xff08;接口或抽象类&#xff09; 例如&#xff0c;随着业务的发展&#xff0c;订单总金额的计算规则可能需要根据不同的客户类型或促销活动…

毕业离校管理系统的开发与需求分析

在当今信息化的时代背景下&#xff0c;高校的毕业生离校管理工作也逐渐向数字化转型。为了提高工作效率&#xff0c;减少人为错误&#xff0c;增强信息透明度&#xff0c;毕业离校管理系统应运而生。该系统旨在为学校提供一个高效、准确的毕业生离校管理平台&#xff0c;从而提…