AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
更新時(shí)間：2023年01月31日 11:09:31 作者：打小就霸
AntV?組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫(huà)布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下
一、業(yè)務(wù)場(chǎng)景：
AntV 組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫(huà)布以圖片的形式導(dǎo)出
二、問(wèn)題描述：
官網(wǎng)上有4個(gè)方法，我用的是
graph.toFullDataURL(callback, type, imageConfig)
三、具體實(shí)現(xiàn)步驟：
（1）添加導(dǎo)出按鈕
<a-button type="primary" @click="exportImg">
導(dǎo)出圖譜
</a-button>（2）實(shí)現(xiàn)邏輯
exportImg(){
//這里涉及到了組件傳值，用的是子組件里面的方法
console.log(this.$refs.workflow.graph)
this.$refs.workflow.graph.toFullDataURL(// 第一個(gè)參數(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)建的元素刪除
},
// 后兩個(gè)參數(shù)不是必須
'image/jpeg',
{
backgroundColor: '#fff',
padding: 10,
}
)
},四、完整代碼
<template>
<!--設(shè)置parentContent的寬高為瀏覽器大小-->
<div class="parentContent" ref="parentContent">
<a-button type="primary" @click="exportImg">
導(dǎo)出圖譜
</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(// 第一個(gè)參數(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)建的元素刪除
},
// 后兩個(gè)參數(shù)不是必須
'image/jpeg',
{
backgroundColor: '#fff',
padding: 10,
}
)
},
}
</script>五、效果展示：
到此這篇關(guān)于AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
axios模塊化封裝實(shí)例化及vue本地解決跨域方案
這篇文章主要為大家介紹了axios模塊化封裝實(shí)例化及vue本地解決跨域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue如何修改瀏覽器的標(biāo)題title問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3二次封裝element-ui中的table組件的過(guò)程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過(guò)程,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來(lái)學(xué)習(xí)吧2024-01-01
vue中@click綁定事件點(diǎn)擊不生效的原因及解決方案
根據(jù)Vue2.0官方文檔關(guān)于父子組件通訊的原則，父組件通過(guò)prop傳遞數(shù)據(jù)給子組件，子組件觸發(fā)事件給父組件，這篇文章主要介紹了vue中@click綁定事件點(diǎn)擊不生效的解決方案,需要的朋友可以參考下2022-12-12
vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式
這篇文章主要介紹了vue?循環(huán)動(dòng)態(tài)設(shè)置ref并獲取$refs方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決
這篇文章主要介紹了vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒(méi)有更新問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07 
使用Vue實(shí)現(xiàn)網(wǎng)站SEO優(yōu)化的方法示例
在如今這個(gè)數(shù)字化和信息化的時(shí)代,搜索引擎優(yōu)化（SEO）已經(jīng)成為網(wǎng)站成功的關(guān)鍵因素之一,在使用現(xiàn)代化框架如Vue.js進(jìn)行開(kāi)發(fā)時(shí),開(kāi)發(fā)者通常關(guān)注的是構(gòu)建高效的單頁(yè)面應(yīng)用,本文將介紹如何使用Vue來(lái)優(yōu)化網(wǎng)站的SEO,并提供一些示例代碼幫助您實(shí)現(xiàn)這些優(yōu)化
2024-11-11 
VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能，本文通過(guò)兩種方法，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04