Show / Hide Table of Contents

PDF/PNG Exports

OrgChart Exporting

Export to PDF

You can add the PDF export as a menu item in the menu: 

 
         
    menu: {
        pdf: { text: "Export PDF" },
    }

and/or in the nodeMenu option: 

 
         
    nodeMenu: {
        pdf: { text: "Export PDF" },
    }

Here is the result:

BALKAN Code Edit in BALKAN Code

PDF options

 
     
    chart.exportPDF({
        scale: 70,
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}',
        expandChildren: true,
        filename: "myChart.pdf",
        landscape: true,
        min: false,
        openInNewTab: true,
        parentLevels: 1,
        childLevels: 1,
        nodeId: id,
        margin: [10, 10, 10, 10],
        padding: 50
    })

Not all the options can work together.

Export to A4 format

First define the function: 
 
     
function pdf() {
    chart.exportPDF({
        format: "A4"
    });
}
Then use it in a menu option: 
 
     
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },
    }
BALKAN Code Edit in BALKAN Code

Add header and footer

Define the function: 
 
     
function pdf() {
    chart.exportPDF({
        format: "A4",
        header: 'My Header',
        footer: 'My Footer. Page {current-page} of {total-pages}'
    });
}
Use it in a menu option: 
 
     
    menu: {
        export_pdf: {
            text: "Export PDF",
            icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
            onClick: pdf
        },   
    }
BALKAN Code 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. 

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

Here is a Code example with all the PDF options:

BALKAN Code Edit in BALKAN Code

Export multiple charts

You can export multiple charts or a chart by teams, using the exportPDFFromCharts method

.

How you can exrport multiple charts in one PDF file:

BALKAN Code Edit in BALKAN Code

How to export per teams in one PDF file:

BALKAN Code Edit in BALKAN Code

PDF Preview

 
     
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.

BALKAN Code Edit in BALKAN Code

Export to PNG

You can add the PNG export as a menu item in the menu: 

 
         
 menu: {
     png: { text: "Export PNG" },
 }
and/or in the nodeMenu option: 
 
         
 nodeMenu: {
     png: { text: "Export PNG" },
 }

Here is the result:

BALKAN Code Edit in BALKAN Code

PNG options

 
     
    chart.exportPNG({
        expandChildren: true,
        min: false,
        openInNewTab: true,
        filename: "myChart.png",
        parentLevels: 1,
        childLevels: 1,
        nodeId: id,
        margin: [10, 10, 10, 10],
        padding: 50   
    });

Not all the options can work together.

Here is a Code example with all the PNG options:

BALKAN Code 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:

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

Export server

PDF and PNG are calling BALKAN OrgChart JS export server by default.

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: 

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

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

Default export server requirements:
  • To be able to export images using the default export server, they need to be public, i.e. you should be able to browse them in any browser.
  • The defaul export service has a limitation of 10Mb for a PDF file size. To be able to export a very large tree(>100 000 nodes), you will need to install your own export server.

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

First define the export functions: 
     
        function pdf(nodeId) {
            chart.exportPDF({filename: "MyFileName.pdf", expandChildren: true, nodeId: nodeId});
        }
Then use the functions in the menu option of the OrgChart definition: 
     
            menu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                }
            }
or/and in the nodeMenu option: 
     
            nodeMenu: {
                export_pdf: {
                    text: "Export PDF",
                    icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
                    onClick: pdf
                }
            }

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

BALKAN Code Edit in BALKAN Code

With parentLevels and childLevels you can add the given levels of parents and the given levels of children in the export, when exporting a node's tree.

BALKAN Code Edit in BALKAN Code

Exporting Styles

Using the onExportStart and onExportEnd event listeners, you can change the export behaviour.

You can export the styles using the property args.styles

HTML:

 
     
<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:

 
     
// add before chart.load()
chart.onExportStart((args) => {
    args.styles += document.getElementById('myStyles').outerHTML;
});
Code example:
BALKAN Code Edit in BALKAN Code

Here we have a demo on how to export styles in Angular.

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

In this article