【Antv G6】导出图片

需求

将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 + 32canvas.height = img.height + 32var 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.modelTitleoA.href = canvas.toDataURL('image/png')document.body.appendChild(oA)oA.click()oA.remove() // 下载之后把创建的元素删除}img.src = res},'image/png',{imageConfig: {padding: 16}}
)

扩展

浏览器上的任意元素都可转化成canvas，然后下载下来。