BALKAN OrgChart React - React Org Chart Library | Docs

PDF Export ​

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

javascript
menu={{ pdf_export: { text: "Export PDF" } }}
nodeMenu={{ pdf_export: { text: "Export PDF" } }}

PDF Export Example

Export options ​

javascript
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.

The header and footer are SVG definitions.

First define the function:

javascript
function pdf() {
  chartRef.current?.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:

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

PDF Export With Header and Footer Example

Export by pages ​

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

You can use the following options:

javascript
chartRef.current?.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 ​

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

PDF Export by teams

Export multiple charts in one PDF file ​

javascript
chart1Ref.current?.exportToPDF({
  format: "A4",
  pages: [
    { chartInstance: chart1Ref.current || undefined, header: '<text>OrgChart 1</text>' },
    { chartInstance: chart2Ref.current || undefined, header: '<text>OrgChart 2</text>' },
    { chartInstance: chart3Ref.current || undefined, header: '<text>OrgChart 3</text>' },
    { chartInstance: chart4Ref.current || undefined, header: '<text>OrgChart 4</text>' }
  ]
});

[PDF Export multiple charts]https://github.com/BALKANGraph/OrgChartReact-Demos/blob/main/tsx/exportPdfMultipleCharts/index.tsx)

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:

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:

javascript
const exportStyles = document.getElementById("myStyles")?.outerHTML || "";
javascript
onExportStart={(args) => { args.styles += exportStyles; }}

Code example:

PDF Export Styles

PDF Preview ​

You can add PDF Preview as a menu item:

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

And/or as a nodeMenu option:

javascript
nodeMenu={{ pdf_preview: { text: "PDF Preview" } }}

Click on the menu option to open the preview:

PDF Preview Example

The header and footer are SVG definitions.

Define the function:

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

Use it in a menu option:

javascript
menu={{ 
  pdfPreview: {
    text: "PDF Preview with Header and Footer",
    icon: OrgChartJS.icon.pdf(24, 24, "#7A7A7A"),
    onClick: pdfPreview
  } 
}}

PDF Preview with Header and Footer

Add pages programmatically in PDF Preview ​

You can add custom pages in preview using the pages property.

Here is how to export a chart by teams:

javascript
function pdfPreview() {
  chartRef.current?.pdfPreviewUI.show({
    pages: [
      {
        nodeId: 2
      },
      {
        nodeId: 3,
        childLevels: 1
      },
      {
        nodeId: 4
      },
    ]
  });
}

Add pages progammatically in PDF Preview

Profile Export ​

With the isProfile property you can export a node profile:

javascript
function pdfPreview(id?: number) {

  chartRef.current?.pdfPreviewUI.show({
    pages: [
      {
        nodeId: id,
        isProfile: true
      }
    ]
  });
  
}

PDF Preview Profile

PDF Preview with Custom content pages ​

You can add a page with custom content:

javascript
let logo =
  `<svg>
      <text fill="#039be5" 
          style="font-size: 24px; font-family: Roboto-Bold;" x="50%" y="50%"
          text-anchor="middle" dominant-baseline="middle">
          My Company Organization Chart
      </text>
  </svg>`;

function pdfPreview() {
  chartRef.current?.pdfPreviewUI.show({
    pages: [
      {
        content: logo
        // or
        // content: '[Your HTML definition here]'
      },
      {
        nodeId: 2
      }
    ]
  });
}

Here is how to add a page with a logo:

PDF Preview with Custom Content

Preview Buttons Configuration ​

You can hide or show the following buttons:

javascript
chartRef.current.pdfPreviewUI.buttons.addNewPage = true;
chartRef.current.pdfPreviewUI.buttons.childLevels = true;
chartRef.current.pdfPreviewUI.buttons.landscapePortrait = true;
chartRef.current.pdfPreviewUI.buttons.parentLevels = true;
chartRef.current.pdfPreviewUI.buttons.printProfileOrTree = true;
chartRef.current.pdfPreviewUI.buttons.removePage = true;

Here is an example:

PDF Preview Buttons Cofiguration

Localization ​

Here is what you can localize in PDF Preview:

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

Here is an example:

PDF Preview Localization

Images ​

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

javascript
OrgChartJS.CONVERT_IMAGES_TO_BASE64_BEFORE_EXPORT = true;

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.