如何将 Google 组织结构图导出为 PNG答案

【问题标题】：How to Export Google Org Chart to PNG如何将 Google 组织结构图导出为 PNG
【发布时间】：2018-08-28 12:25:34
【问题描述】：

我正在使用 Google 组织结构图 (https://developers.google.com/chart/interactive/docs/gallery/orgchart) 在我的网络应用程序中呈现图表。我将自定义格式添加到我的组织结构图节点。

我想添加将组织结构图另存为 PNG 的功能。为此，我尝试使用内置功能导出到 PNG (https://developers.google.com/chart/interactive/docs/printing)。

但是，当我使用上述方法将其导出为 PNG 时，组织结构图的所有格式都会丢失。我想导出它，以便在导出中完全保留组织结构图的外观。

关于如何实现这一点的任何指示？

【问题讨论】：

这是一个“我想要一匹小马”的问题，因为无法给出具体的技术答案，所以它在 Stack Overflow 上是题外话。您需要尝试解决此问题并展示您的代码，以便我们了解您在技术层面上尝试做什么，并展示您解决此问题的承诺。如果您需要指导或辅导，请尝试Codementor、Savvy、Hackhands 或 airpair 等服务。
您可以使用html2canvas 代替图表的本机方法getImageURI -- 参见this answer 示例...
@xdev 你有什么解决办法吗？

标签： pdf google-visualization png orgchart

【解决方案1】：

我想打印导致相同问题的组织结构图。通过包含 CSS 文件解决它

function printDiv() 
{
var divToPrint=document.getElementById('chart_div');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html>');
newWin.document.write('<link rel="stylesheet" href="/OrgChart.css" type="text/css" />');
newWin.document.write('<body onload="window.print)">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}

HTML

<div id="tools"><a onclick=printDiv();>Print</a></div>

【讨论】：