需求
将Antv G6生成的树形图导出成图片
代码
<div style="height: calc(100% - 50px);">
<div id="miniMap" class="minimap"></div>
<div id="containerG6" ref="containerG6" class="containerWrap"></div>
</div>
var that = this
this.treeGraph.toFullDataURL(
res => {
// 为了防止下载的图片影响到G6显示,这里作一个深度拷贝
var canvas = document.getElementById('containerG6').childNodes[0].cloneNode(true)
var img = new Image()
img.onload = function () {
canvas.width = img.width + 32
canvas.height = img.height + 32
var ctx = canvas.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 16, 16)
// 下载
var oA = document.createElement('a')
oA.download = '组织架构图-' + that.modelTitle
oA.href = canvas.toDataURL('image/png')
document.body.appendChild(oA)
oA.click()
oA.remove() // 下载之后把创建的元素删除
}
img.src = res
},
'image/png',
{
imageConfig: {
padding: 16
}
}
)
扩展
浏览器上的任意元素都可转化成canvas,然后下载下来。