vue3使用echarts插件并实现点击下载图表功能
2024-09-08 07:37:55
接到一个新的需求,就是用vue3制作一幅世界地图,并实现点击下载按钮将图表转变为图片下载到本地。
使用插件: html2canvas
npm安装: npm install html2canvas
组件引入: import html2canvas from 'html2canvas'
附上主要代码
methods: {
// 将echarts图表转换为canvas,并将canvas下载为图片
download() {
// 图表转换成canvas
html2canvas(document.getElementById("main")).then(function (canvas) {
var img = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
// 创建a标签,实现下载
var creatIMg = document.createElement("a");
creatIMg.download = "图表.png"; // 设置下载的文件名,
creatIMg.href = img; // 下载url
document.body.appendChild(creatIMg);
creatIMg.click();
creatIMg.remove(); // 下载之后把创建的元素删除
});
},
}
效果图:
注意:
包裹图表的dom容器宽高要比图表大,不然会出现只截取部分图片的现象。
最新文章
- 约瑟夫环问题(c++)
- CXF WebService 开发文档
- UBIFS FAQ and HOWTO
- 不知还有人遇到这个问题没有:数据库 'xxx' 的版本为 706,无法打开。此服务器支持 661 版及更低版本。不支持降级路径。
- 基础数据结构 之 树(python实现)
- Objective-C中的SEL (转载)
- 用shell实现linux系统应用文件清理工具
- Scrapyd部署爬虫
- 我的前端故事----关于redux的一些思考
- Android绘图机制(一)——自定义View的基础属性和方法
- Python一行代码处理地理围栏
- 记录下diagwait的问题
- Nmap版本检测
- java 获取两个日期之间的所有天数
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(四):集成 MyBatis 框架
- C# Hadoop学习笔记(一)—环境安装
- JS动态生成表格后 合并单元格
- 整理:产品文档规范——BRD、PRD和MRD
- 【Alpha】Task分配与计划发布
- web12 使用map型的request、session、application