导出基于ID的画布图形

问题描述：

我的页面上有多个画布图形，每个图形都有导出的选项。我目前的问题是，我所有的出口导出相同的第一个画布/图，我意识到问题是，它正在寻找canvas标签名称和下载，但我想指定下载哪个画布，所以我可以下载所有图形单独。导出基于ID的画布图形

这里是我的HTML：

组件文件：

exportGraph(event:any){ 
    var anchor = event.target; 
    anchor.href = document.getElementsByTagName('canvas')[0].toDataURL(); 
    anchor.download = "export.png"; 
    }

我怎么可以指定导出图像，使其在下载每一个合适的画布 - 像传递帆布id可能或画布所在的div的ID。

答

如果你可以添加一个ID，你的画布中的每一个，

exportGraph(event:any){ 
    var anchor = event.target; 
    anchor.href = event.target.parentElement.previousElementSibling.toDataURL(); 
    anchor.download = "export.png"; 
    }

应该工作，应该下载的canvas元素是直接的div持有基于关闭您提供的示例代码锚前。

我没有角的设置，但现在我没有得到这个有工作：

<script> 
function exportGraph(){ 
    var anchor = event.target; 
    anchor.href = event.target.parentNode.previousElementSibling.toDataURL(); 
    anchor.download = "export.png"; 
    } 
</script> 
<canvas height="260"> 

</canvas> 

<div class="panel-footer"> 
    <a href="#" onClick="exportGraph()">Export Graph</a> 
</div>

所以，如果我有6个帆布/图将我已经6次与6种不同的写这个exportGraph功能ID的？ – bluePearl

@bluePearl哎呀，对不起，我错过了部分示例代码，查看我的更新答案。如果它们与您提供的hmtl格式相同，则这适用于所有图形。 –

当我试过这个 - 每次我点击导出链接页面重新加载，但没有下载。 – bluePearl

导出基于ID的画布图形

相关推荐