由于我的 SVG 非常大，如何将完整的 SVG 导出为 PNG。答案

【问题标题】：How to export complete SVG into PNG as my SVG is very large.由于我的 SVG 非常大，如何将完整的 SVG 导出为 PNG。
【发布时间】：2019-05-24 14:00:18
【问题描述】：

我在使用 getOrgChart 新版本的 SVG 中有 2000 个节点。我想将完整的 SVG 导出为 PNG，但 PNG 只显示在浏览器上呈现的节点。就像在浏览器上渲染 20 个节点一样，PNG 只显示 20 个节点，但我需要具有 2000 个节点的整个 SVG。

【问题讨论】：

您能否分享一下您的代码的最小版本以及有关哪些功能不起作用的更多详细信息？你如何导出你的PNG？ SVG 的某些部分是否被截断，或者只是缺少节点？当您在浏览器上呈现所有 2000 个节点时，它是否正常工作？

标签： javascript jquery d3.js svg

【解决方案1】：

BALKANGraph 开发者传道者在这里。

默认情况下折叠的子级不会被导出，如果你想改变你必须添加自己的导出节点菜单项

这是一个例子：

 function pdf(nodeId) {
            chart.exportPDF("MyFileName.pdf", true, nodeId);
        }
        function png(nodeId) {
            chart.exportPNG("MyFileName.png", true, nodeId);
        }
        function svg(nodeId) {
            chart.exportSVG("MyFileName.svg", true, nodeId);
        }

        var chart = new OrgChart(document.getElementById("tree"), {
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeMenu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: BALKANGraph.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                },
                export_png: {
                    text: "Export PNG",
                    icon: BALKANGraph.icon.png(24, 24, "#7A7A7A"),
                    onClick: png
                },
                export_svg: {
                    text: "Export SVG",
                    icon: BALKANGraph.icon.svg(24, 24, "#7A7A7A"),
                    onClick: svg
                }
            },
            nodeBinding: {
                field_0: "name",
                field_1: "title",
                img_0: "img"
            },
            tags:{
            	collapsed: {state: BALKANGraph.COLLAPSE}
            },
            nodes: [
                { id: 1, tags: ["collapsed"], name: "Billy Moore", title: "CEO", img: "https://balkangraph.com/js/img/2.jpg" },
                { id: 2, pid: 1, name: "Billie Rose", title: "Dev Team Lead", img: "https://balkangraph.com/js/img/5.jpg" },
                { id: 3, pid: 1, name: "Glenn Bell", title: "HR", img: "https://balkangraph.com/js/img/10.jpg" },
                { id: 4, pid: 3, name: "Blair Francis", title: "HR", img: "https://balkangraph.com/js/img/11.jpg" }
            ]
        });

html, body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin:0;
  overflow: hidden;
  font-family: Helvetica;
}
#tree{
  width:100%;
  height:100%;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>
<div id="tree"/>

如果导出上面的图表所有节点都会展开

【讨论】：