PDF Export (new)

PDF Preview

You can add the PDF Preview as a menu item:

       Copy 
menu: {
    pdfpreview: { text: "PDF Preview" }
}
             

and/or as a nodeMenu option:

       Copy 
nodeMenu: {
    pdfpreview: {text: "PDF Preview from here"}
}
                     

Click on the Menu option to open the Preview:

Edit in BALKAN Code

Add header and footer

The header and footer are SVG definitions.

       Copy 
function pdfPreview(){
    chart.pdfPreviewUI.show({
        header: '<text>My Header</text>',
        footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
    });
}
                     

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

}
                     

Edit in BALKAN Code

Add pages programmatically

You can add custom pages in preview, using the pages property:

Here is how we export a chart by teams:

       Copy 
function pdfExportPreview(){
    chart.pdfPreviewUI.show({
                pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
    })
};
                         

Edit in BALKAN Code

Profile Export

       Copy 
function pdfPreview(id){
    chart.pdfPreviewUI.show({
        pages: [
            {
                nodeId: id,
                format: "A4",
                isProfile: true
            }
        ]
    });
}
                     

Edit in BALKAN Code

You can add a page with a custom content:

           Copy 
function pdfExportPreview() {
    chart.pdfPreviewUI.show({
        pages: [
            {
                content: <svg>[Your SVG definition here]</svg>
            },
            {
                nodeId: 2
            }
        ]
    })
}
                         

Edit in BALKAN Code

Localization

           Copy 
chart.pdfPreviewUI.locExport = 'Export';
chart.pdfPreviewUI.locLandscape = 'Landscape';
chart.pdfPreviewUI.locPortrait = 'Portrait';
chart.pdfPreviewUI.locCancel = 'Close';
chart.pdfPreviewUI.locParentLevels = 'parent levels';
chart.pdfPreviewUI.locChildLevels = 'child levels';
chart.pdfPreviewUI.locClickToAdd = 'Click on a node to display it here';
chart.pdfPreviewUI.locPrintTree = 'Print tree';
chart.pdfPreviewUI.locPrintProfile = 'Print profile';
chart.pdfPreviewUI.locAddNew = 'Add new page';
chart.pdfPreviewUI.locRemove = 'Remove page';
 

Edit in BALKAN Code

Direct PDF Export

You can directly export using the exportToPDF method.
First define the PDF Export function:

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

then add it as a menu or nodeMenu item:

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

Here is the result:

Edit in BALKAN Code

Export options

       Copy 
chart.exportToPDF({
    childLevels: 1,
    parentLevels: 1,
    expandChildren: true,
    filename: "myChart.pdf",
    format: "A1" // "A2" | "A3" | "A4" | "A5" | "Letter" | "Legal"
    header: 'My Header',
    footer: 'My Footer. Slide {current-page} of {total-pages}',
    landscape: true,
    min: false,
    openInNewTab: true,
    nodeId: id,
    margin: [10, 10, 10, 10],
    padding: 50,
    scale: 0.5 // "fit"
});
                     

Not all the options can work together.

Add header and footer

The header and footer are SVG definitions.

       Copy 
function pdf(nodeId) {
    chart.exportToPDF({
        header: '<text style="font-size:36px;">My Header</text>',
        footer: '<text style="font-size:24px;">My Footer. Page {current-page} of {total-pages}</text>',
    });
}
                    

       Copy 
menu: {
    export_pdf: {
        text: "Export to PDF with my header and footer",
        icon: OrgChart.icon.pdf(24, 24, "#7A7A7A"),
        onClick: pdf
    },
},
                    

Edit in BALKAN Code

Export by pages

You can export multiple charts or a chart by teams, using the pages property:

       Copy 
chart.exportToPDF({
    pages: [
        {
            isProfile: true,
            content: '<svg><text>My Header</text></svg>',
            chartInstance: chart,
            nodeId: 2,
            expandChildren: true,
            childLevels: 2,
            parentLevels: 1,
            min: false,
            header: '<text>My Header</text>',
            footer: '<text>My Footer. Page {current-page} of {total-pages}</text>'
        }
    ]
});
 

Here is how we export a chart by teams:

       Copy 
chart.exportToPDF({
        expandChildren: false,
        pages: [
            {
                nodeId: 2
            },
            {
                nodeId: 3,
                childLevels: 1
            },
            {
                nodeId: 4
            },
        ]
});
                    

Edit in BALKAN Code

How you can exrport multiple charts in one PDF file:

       Copy 
chart1.exportToPDF({
    pages: [
        { chartInstance: chart1, header: '<text>OrgChart 1</text>' },
        { chartInstance: chart2, header: '<text>OrgChart 2</text>' },
        { chartInstance: chart3, header: '<text>OrgChart 3</text>' },
        { chartInstance: chart4, header: '<text>OrgChart 4</text>' }
    ]
});
                 

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:

       Copy 
<style id="myStyles">
    .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