AntV结合Vue实现导出图片功能

一、业务场景:
AntV 组织图操作完毕以后,需要点击按钮将画布以图片的形式导出

二、问题描述:
官网上有4个方法,我用的是
graph.toFullDataURL(callback, type, imageConfig)

三、具体实现步骤:
(1)添加导出按钮

      <a-button type="primary" @click="exportImg">
        导出图谱
      </a-button>

(2)实现逻辑

exportImg(){
		//这里涉及到了组件传值,用的是子组件里面的方法
      console.log(this.$refs.workflow.graph)
      this.$refs.workflow.graph.toFullDataURL(// 第一个参数为 callback,必须
        (res) => {
          console.log(res); // 打印出结果
          // 下载
          var oA = document.createElement('a')
          oA.download = this.tempObj.name
          oA.href = res
          document.body.appendChild(oA)
          oA.click()
          oA.remove() // 下载之后把创建的元素删除
        },
        // 后两个参数不是必须
        'image/jpeg',
        {
          backgroundColor: '#fff',
          padding: 10,
        }
      )
    },

四、完整代码

<template>
  <!--设置parentContent的宽高为浏览器大小-->
  <div class="parentContent" ref="parentContent">
    <a-button type="primary" @click="exportImg">
      导出图谱
    </a-button>
    <div id="container" ref="container"></div>
  </div>
</template>

<script>
  import G6 from '@antv/g6'
  export default {
    name: 'g6',
   methods: {
      exportImg(){
        //这里涉及到了组件传值,用的是子组件里面的方法
        console.log(this.graph)
        this.graph.toFullDataURL(// 第一个参数为 callback,必须
          (res) => {
            console.log(res); // 打印出结果
            // 下载
            var oA = document.createElement('a')
            oA.download = '996'
            oA.href = res
            document.body.appendChild(oA)
            oA.click()
            oA.remove() // 下载之后把创建的元素删除
          },
          // 后两个参数不是必须
          'image/jpeg',
          {
            backgroundColor: '#fff',
            padding: 10,
          }
        )
      },
        }
</script>

五、效果展示:
在这里插入图片描述

你已经成功了,撒花。
今天的分享到此结束,欢迎小伙伴们一起交流

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值