接到一个新的需求,就是用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容器宽高要比图表大,不然会出现只截取部分图片的现象。

最新文章

  1. 约瑟夫环问题(c++)
  2. CXF WebService 开发文档
  3. UBIFS FAQ and HOWTO
  4. 不知还有人遇到这个问题没有:数据库 'xxx' 的版本为 706,无法打开。此服务器支持 661 版及更低版本。不支持降级路径。
  5. 基础数据结构 之 树(python实现)
  6. Objective-C中的SEL (转载)
  7. 用shell实现linux系统应用文件清理工具
  8. Scrapyd部署爬虫
  9. 我的前端故事----关于redux的一些思考
  10. Android绘图机制(一)——自定义View的基础属性和方法
  11. Python一行代码处理地理围栏
  12. 记录下diagwait的问题
  13. Nmap版本检测
  14. java 获取两个日期之间的所有天数
  15. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(四):集成 MyBatis 框架
  16. C# Hadoop学习笔记(一)—环境安装
  17. JS动态生成表格后 合并单元格
  18. 整理:产品文档规范——BRD、PRD和MRD
  19. 【Alpha】Task分配与计划发布
  20. web12 使用map型的request、session、application

热门文章

  1. 支付对接常用的加密方式介绍以及java代码实现
  2. Netty Protobuf处理粘包分析
  3. java反序列化基础
  4. VUE16 检测数据变化的原理
  5. 修改ctags让fzf.vim插件显示C,C++方法声明的标签
  6. nvm管理node和npm
  7. MySQL索引的基本理解
  8. flutter系列之:Navigator的高级用法
  9. PostGIS之线性参考
  10. linux系统下,新加硬盘并把现有的/home目录扩容。