如何将 Google 组织结构图导出为 PNG
Posted
技术标签:
【中文标题】如何将 Google 组织结构图导出为 PNG【英文标题】：How to Export Google Org Chart to 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 你有什么解决办法吗？
【参考方案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>
【讨论】：
以上是关于如何将 Google 组织结构图导出为 PNG的主要内容，如果未能解决你的问题，请参考以下文章
有没有办法将 Google Visualization 组织结构图导出为图像？