AntV+Vue實現(xiàn)導出圖片功能
更新時間：2023年01月31日 11:09:31 作者：打小就霸
AntV?組織圖操作完畢以后，需要點擊按鈕將畫布以圖片的形式導出，這篇文章主要介紹了AntV結(jié)合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); // 打印出結(jié)果
// 下載
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); // 打印出結(jié)果
// 下載
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>五、效果展示：
到此這篇關于AntV結(jié)合Vue實現(xiàn)導出圖片功能的文章就介紹到這了,更多相關Vue導出圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家介紹了axios模塊化封裝實例化及vue本地解決跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了vue如何修改瀏覽器的標題title問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友跟著小編一起來學習吧2024-01-01
根據(jù)Vue2.0官方文檔關于父子組件通訊的原則，父組件通過prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案,需要的朋友可以參考下2022-12-12
vue?循環(huán)動態(tài)設置ref并獲取$refs方式
這篇文章主要介紹了vue?循環(huán)動態(tài)設置ref并獲取$refs方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了VUE中V-IF條件判斷改變元素的樣式操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨想過來看看吧2020-08-08
vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決
這篇文章主要介紹了vue對象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用Vue實現(xiàn)網(wǎng)站SEO優(yōu)化的方法示例
在如今這個數(shù)字化和信息化的時代,搜索引擎優(yōu)化（SEO）已經(jīng)成為網(wǎng)站成功的關鍵因素之一,在使用現(xiàn)代化框架如Vue.js進行開發(fā)時,開發(fā)者通常關注的是構(gòu)建高效的單頁面應用,本文將介紹如何使用Vue來優(yōu)化網(wǎng)站的SEO,并提供一些示例代碼幫助您實現(xiàn)這些優(yōu)化2024-11-11
VUE 實現(xiàn)復制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實現(xiàn)復制內(nèi)容到剪貼板功能，本文通過兩種方法，給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04