AntV+Vue實現(xiàn)導出圖片功能

更新時間：2023年01月31日 11:09:31 作者：打小就霸

AntV?組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導出，這篇文章主要介紹了AntV結合Vue實現(xiàn)導出圖片功能,需要的朋友可以參考下

一、業(yè)務場景：

AntV 組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導出

二、問題描述：

官網(wǎng)上有4個方法，我用的是
graph.toFullDataURL(callback, type, imageConfig)

三、具體實現(xiàn)步驟：

（1）添加導出按鈕

      <a-button type="primary" @click="exportImg">
        導出圖譜
      </a-button>

（2）實現(xiàn)邏輯

exportImg(){
		//這里涉及到了組件傳值，用的是子組件里面的方法
      console.log(this.$refs.workflow.graph)
      this.$refs.workflow.graph.toFullDataURL(// 第一個參數(shù)為 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() // 下載之后把創(chuàng)建的元素刪除
        },
        // 后兩個參數(shù)不是必須
        '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(// 第一個參數(shù)為 callback，必須
          (res) => {
            console.log(res); // 打印出結果
            // 下載
            var oA = document.createElement('a')
            oA.download = '996'
            oA.href = res
            document.body.appendChild(oA)
            oA.click()
            oA.remove() // 下載之后把創(chuàng)建的元素刪除
          },
          // 后兩個參數(shù)不是必須
          'image/jpeg',
          {
            backgroundColor: '#fff',
            padding: 10,
          }
        )
      },
        }
</script>