PDF Export

Use the predefined menu and nodeMenu items to export to PDF:

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

Here is the result:

Edit in BALKAN Code

Export options

chart.exportToPDF({
  childLevels: 1,
  parentLevels: 1,
  expandChildren: true,
  fileName: "myChart.pdf",
  format: "A1", // "A2" | "A3" | "A4" | "A5" | "Letter" | "Legal" | "auto"
  header: '<text>My SVG Header</text>',
  footer: '<text>My SVG Footer. Slide {current-page} of {total-pages}</text>',
  landscape: true,
  min: false,
  openInNewTab: true,
  margin: [10, 10, 10, 10],
  padding: 50,
});

Not all options can work together.

Add header and footer for A4

The header and footer are SVG definitions.

First define the function:

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

Then use it in a menu option:

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 export a chart by teams using the pages property.

You can use the following options:

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>'
    }
  ]
});

Export a chart by teams

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

Edit in BALKAN Code

Export multiple charts in one PDF file

chart1.exportToPDF({
  format: "A4",
  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 behavior. You can export styles using the args.styles property.

HTML:

<style id="myStyles">
  .node.HR rect {
    fill: #E99113;
  }
</style>

JavaScript:

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

Code example:

Edit in BALKAN Code

PDF Preview

You can add PDF Preview as a menu item:

menu: {
  pdf_preview: { text: "PDF Preview" }
}

And/or as a nodeMenu option:

nodeMenu: {
  pdf_preview: { 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.

Define the function:

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

Use it in a menu option:

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 to export a chart by teams:

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

Edit in BALKAN Code

Profile Export

With the isProfile property you can export a node profile:

function previewPdf(id) {
  chart.pdfPreviewUI.show({
    pages: [
      {
        nodeId: id,
        isProfile: true
      }
    ]
  });
}

Edit in BALKAN Code

Custom content pages

You can add a page with custom content:

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

Here is how to add a page with a logo:

Edit in BALKAN Code

Preview Buttons Configuration

You can hide or show the following buttons:

chart.pdfPreviewUI.buttons.addNewPage = true;
chart.pdfPreviewUI.buttons.childLevels = true;
chart.pdfPreviewUI.buttons.landscapePortrait = true;
chart.pdfPreviewUI.buttons.parentLevels = true;
chart.pdfPreviewUI.buttons.printProfileOrTree = true;
chart.pdfPreviewUI.buttons.removePage = true;

Here is an example:

Edit in BALKAN Code

Localization

Here is what you can localize in PDF Preview:

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';

Here is an example:

Edit in BALKAN Code

Images

Sometimes you may need to convert images to base64 format before exporting. Use this constant:

OrgChart.CONVERT_IMAGES_TO_BASE64_BEFORE_EXPORT = true;

Code example: convert images

Server JS

There may be cases where you do not want to use the BALKAN server for export. For example, if you are running a secure website or if you do not want your data to be passed to https://balkan.app.

In that case you need to set up your own Server JS.

API Removal Notice (Version 9)

The following methods were removed in version 9. Update your implementation to use the new alternatives below.

Removed	Use Instead
exportPDF	exportToPDF
exportPDFProfile	exportToPDF with pages and isProfile: true, or previewPdf(id)
exportPDFPreview	pdf_preview option
exportPDFFromCharts	exportToPDF with pages option
OrgChart.pdfPrevUI	chart.pdfPreviewUI.show