Export

OrgChart JS support the following export formats:

Adding export options

In order to enable an export, you need to add a menu item in menu and/or nodeMenu option:

 
       Copy
    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" },
        xml: { text: "Export XML" },
        json: { text: "Export JSON" }
    }
    

 
       Copy
    nodeMenu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" }
    }
    

Here is the result:

Edit in BALKAN Code

Custom Export options

Export collapsed children:

By default collapsed children will not be exported, if you want to change that you have to add your own export node menu item

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

 
   Copy
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
        export_png: {
            text: "Export PNG",
            icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
            onClick: png
        },
        export_svg: {
            text: "Export SVG",
            icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
            onClick: svg
        }
    }
    

 
   Copy
    nodeMenu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
        export_png: {
            text: "Export PNG",
            icon: OrgChart.icon.png(24, 24, "#7A7A7A"),
            onClick: png
        },
        export_svg: {
            text: "Export SVG",
            icon: OrgChart.icon.svg(24, 24, "#7A7A7A"),
            onClick: svg
        }
    }
    

In the demo below the chart is collapsed, the children will be expanded on export

Edit in BALKAN Code

Export to A4 format:

 
       Copy
function pdf() {
    chart.exportPDF({
        format: "A4"
    });
}
    

 
       Copy
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
    }
    

Edit in BALKAN Code

Add header and footer:

 
       Copy
function pdf() {
    chart.exportPDF({
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}'
    });
}
    

 
       Copy
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
    }
    

Edit in BALKAN Code

Padding on export:

The padding option sets the padding area on all four sides of the tree. You could Add padding on export and preview.

 
       Copy
function pdf() {
    chart.exportPDF({
        padding: 100
    });
}
    

PDF Preview

 
       Copy
function pdf() {
    OrgChart.pdfPrevUI.show(chart, {
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}'
    });
}
    

Use the default Fit to page width option to not cut off the nodes at the page break.

Edit in BALKAN Code

Profile export

The exportPDFProfile and exportPNGProfile methods export the node details form.

In the below example we export a node profile after tree loading:

 
       Copy
// add this method before chart.load()
chart.onInit(() => {
    chart.exportPDFProfile({nodeId: 2})
});

Export server

CSV and SVG are client side exports, PDF and PNG are calling BALKAN OrgChart JS export server.

There may be cases where you don't want to use BALKAN OrgChart JS's export server running at https://balkan.app/export, for instance if you are running a secure website or if you don't want your data to be passed to https://balkan.app. In that cases you have to setup your own export server and to change exportUrl option:

 
       Copy
    exportUrl: "https://MyServer.com/export"
    

MyServer is the domain name of you server. It could be hosted under http or https.

Export arguments

You could use onExportStart and onExportEnd methods to change the export behavior.

 
       Copy
// add before chart.load()
chart.onExportStart(() => {
    console.log("exporting")
});
    

CSV/XML

Here is an example of how you could get only the name and the title fiedls, changing args.nodes:

 
   Copy
// add before chart.load()
chart.onExportStart((args) => {
    if (args.ext == 'csv' || args.ext == 'xml'){
        var newNodes = [];
        for(var i = 0; i < args.nodes.length; i++){
            newNodes.push({
                name: args.nodes[i].name,
                title: args.nodes[i].title
            })
        }
        args.nodes = newNodes;
    }
});
    

Edit in BALKAN Code

Exporting Styles

You can export styles using the property args.styles

HTML:

 
       Copy
<style id="myStyles">
    @import url("https://fonts.googleapis.com/css?family=Gochi+Hand");
    .node {
        font-family: 'Gochi Hand';
    }
    .node.HR rect {
        fill: #E99113;
    }
</style>
 

JavaScript:

 
       Copy
// add before chart.load()
chart.onExportStart((args) => {
    args.styles += document.getElementById('myStyles').outerHTML;
});
 

Edit in BALKAN Code

Here is a code demo on how to export a background image.

Use return false to avoid exporting:

 
       Copy
// add before chart.load()
chart.onExportStart(() => {
    // add your code here
    return false;
});