PowerPoint Export

You can add PowerPoint export as a menu item:

menu={{ pp_export: { text: "Export PowerPoint" } }}

And/or as a nodeMenu item:

nodeMenu={{ pp_export: { text: "Export node and its children to PowerPoint" } }}

PowerPoint Export Example

Export options

chart.exportToPowerPoint({
  childLevels: 1,
  expandChildren: true,
  format: "Standard", // "Screen" (default) | "Widescreen" | "Standard"
  header: '<text>My Header</text>',
  footer: '<text>My Footer. Page {current-page} of {total-pages}</text>',
  fileName: "myChart.pptx",
  min: false,
  openInNewTab: true,
  nodeId: id,
  margin: [10, 10, 10, 10],
  padding: 50
});

Not all options can work together.

exportToPowerPoint method

The default export format is Screen, which is the client screen size. Here is how to export in Widescreen format using exportToPowerPoint.

First define the function:

function ppt() {
  chartRef.current?.exportToPowerPoint({
      format: "Widescreen"
  });
}

Then use it in a menu option:

 menu={{
    export_ppt: {
        text: "Export to PowerPoint",
        icon: OrgChartJS.icon.powerpoint(24, 24, "#7A7A7A"),
        onClick: ppt
    },
}}

PowerPoint Export Method Example

Add header and footer

The header and footer are SVG definitions.

Define the function:

function ppt() {
  chartRef.current?.exportToPowerPoint({
      header: '<text style="font-size:36px;">My Header</text>',
      footer: '<text style="font-size:24px;">My Footer. Page {current-page} of {total-pages}</text>',
  });
}

Use it in a menu option:

menu={{
    export_ppt: {
        text: "Export to PowerPoint with header and footer",
        icon: OrgChartJS.icon.powerpoint(24, 24, "#7A7A7A"),
        onClick: ppt
    },
}}

PDF Export With Header and Footer Example

Export by slides

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

You can use the following options:

chartRef.current?.exportToPowerPoint({
  pages: [
    {
      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

chartRef.current?.exportToPowerPoint({
  expandChildren: false,
    pages: [
      {
        nodeId: 2
      },
      {
        nodeId: 3,
        childLevels: 1
      },
      {
        nodeId: 4
      },
    ]
});

PowerPoint Export by Teams

Export multiple charts in one PowerPoint file

chart1Ref.current?.exportToPowerPoint({
    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>' }
    ]
});

PowerPoint Export Multiple Charts

Exporting styles

Using the onExportStart and onExportEnd event listeners, you can change export behavior. You can export styles using the args.styles property.

HTML:

<style id="myStyles">
  .node {
    font-family: "Gochi Hand";
  }

  .node.HR rect {
    fill: #E99113;
  }
</style>

JavaScript:

const exportStyles = document.getElementById("myStyles")?.outerHTML || "";

onExportStart={(args) => { args.styles += exportStyles; }}

Code example:

PowerPoint Export Styles

In PowerPoint you can ungroup the chart and make changes.

Limitations

• Cannot export images and foreignobjects.
• Header and footer should be SVG objects.

PowerPoint Preview

You can add PowerPoint Preview as a menu item:

menu={{ pp_preview: { text: "PowerPoint Preview" } }}

And/or as a nodeMenu option:

nodeMenu={{ pp_preview: { text: "PowerPoint Preview" } }}

PowerPoint Preview

Add header and footer to preview

The header and footer are SVG definitions.

Define the function:

chartRef.current?.powerPointPreviewUI.show({
    header: '<text style="font-size:36px;">My Header</text>',
    footer: '<text style="font-size:24px;">My Footer. Page {current-page} of {total-pages}</text>',
    pages: [
        { nodeId: 1 }
    ]
})

Use it in a menu option:

menu={{ 
  ppExportPreview: {
    text: "PowerPoint Preview with Header and Footer",
    icon: OrgChartJS.icon.powerpoint(24, 24, "#7A7A7A"),
    onClick: ppExportPreview
  } 
}}

PowerPoint Preview Header and Footer

Add slides programmatically

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

Here is how to export a chart by teams:

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

PowerPoint Preview Add Slides

Custom content slides

You can add a slide with custom content:

function powerpointPreview() {
  chartRef.current?.powerPointPreviewUI.show({
    pages: [
      {
        content: '<svg>[Your SVG definition here]</svg>'
        // or
        // content: '[Your HTML definition here]'
      },
      {
        nodeId: 2
      }
    ]
  });
}

PowerPoint Preview Custom Content Slides

Preview Buttons Configuration

You can hide or show the following buttons:

chartRef.current.powerPointPreviewUI.buttons.addNewPage = true;
chartRef.current.powerPointPreviewUI.buttons.childLevels = true;
chartRef.current.powerPointPreviewUI.buttons.parentLevels = true;
chartRef.current.powerPointPreviewUI.buttons.removePage = true;

Here is an example:

PowerPoint Preview Buttons Configuration

Localization

Here is what you can localize in PowerPoint Preview:

chartRef.current.powerPointPreviewUI.locExport = 'Export';
chartRef.current.powerPointPreviewUI.locCancel = 'Close';
chartRef.current.powerPointPreviewUI.locParentLevels = 'parent levels';
chartRef.current.powerPointPreviewUI.locChildLevels = 'child levels';
chartRef.current.powerPointPreviewUI.locClickToAdd = 'Click on a node to display it here';
chartRef.current.powerPointPreviewUI.locPrintTree = 'Print tree';
chartRef.current.powerPointPreviewUI.locPrintProfile = 'Print profile';
chartRef.current.powerPointPreviewUI.locAddNew = 'Add new slide';
chartRef.current.powerPointPreviewUI.locRemove = 'Remove slide';

Here is an example:

PowerPoint Preview Localizaton

Server JS

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

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