export-data

The functionality is available in PRO Edition only

PRO

Description

Triggers export of Gantt data to PDF, PNG, Excel, or MS Project XML

The export-data action allows exporting Gantt data to PDF, PNG, Excel, or MS Project XML formats.

If url is provided, the action sends the current Gantt state to a ready-made server-side export service which generates files in PDF, PNG, XLSX, or MS Project XML (MSPX) formats.

If url is not provided (MS Project XML only), the action exports data using client-side logic.

Export mechanism allows overriding layout, sizing, styling, and Gantt configuration without affecting the live Gantt instance.

Usage

"export-data": ({
  url?: string,
  format?: "pdf" | "png" | "xlsx" | "mspx",
  fileName?: string,
  styles?: string,
  ganttConfig?: Record<string, any>,
  pdf?: {
    fitSize?: boolean,
    size?: "auto" 
      | "a0" | "a1" | "a2" | "a3" | "a4" | "letter" | "legal"
      | { 
      width: number,   // mm
      height: number,  // mm
    },
    landscape?: boolean,
    styles?: string,
    margins?: { 
      top?: number,    // mm
      bottom?:number,  // mm
      left?: number,   // mm
      right?: number,  // mm
    },
    header?: string,
    footer?: string,
    scale?: number,
  },
  png?: {
    fitSize?: boolean,
    size?: "auto" 
      | "a0" | "a1" | "a2" | "a3" | "a4" | "letter" | "legal"
      | { 
      width: number,   // px
      height: number,  // px
    },
    landscape?: boolean,
    styles?: string,
  },
  excel?: {
    sheetNames?: string[],
    visual?: boolean,
    dateFormat?: string,
    indent?: "native" | "spaces",
    columns?: {
      id: string,
      header?: string,
      type?: "string" | "number" | "date" | "progress",
      width?: number,
    }[],
  },
}) => void;

Parameters

• url - (optional) export service endpoint, recommended https://export.svar.dev/gantt/{version}
• format - (optional) "pdf" | "png" | "xlsx" | "mspx". Default value is "pdf"
• fileName - (optional) name of the exported file, without extension. Default value is "gantt"
• styles - (optional) CSS string applied to the exported document
• ganttConfig - (optional) overrides Gantt configuration for export only

PDF-specific options (pdf)

• fitSize - (optional) scale the chart down to fit the printable width of the page. Only scales down: if the chart already fits, nothing changes. Ignored when size is "auto"
• size - (optional) page size, can be:

  • "auto" - the page is sized to match the chart

  • one of the standard paper sizes:

    Value	Size
    "a0"	841 x 1189 mm
    "a1"	594 x 841 mm
    "a2"	420 x 594 mm
    "a3"	297 x 420 mm
    "a4"	210 x 297 mm
    "letter"	215.9 x 279.4 mm
    "legal"	215.9 x 355.6 mm

  • { width: number, height: number } - custom size in millimeters

• landscape - (optional) boolean, set to true for landscape orientation. Applies to the standard paper sizes only; for a custom size, swap width and height yourself
• styles - (optional) custom css applied in pdf export
• margins - (optional) page margins
  • top - (optional) top margin in millimeters
  • bottom - (optional) bottom margin in millimeters
  • left - (optional) left margin in millimeters
  • right - (optional) right margin in millimeters
• header - (optional) text or HTML to display in page header
• footer - (optional) text or HTML to display in page footer
• scale - (optional) manual scaling factor for chart, 0.1 - 2.0. Cannot be combined with fitSize

PNG-specific options (png)

• fitSize - (optional) scale the chart down to fit the image, preserving the aspect ratio. Only scales down: if the chart already fits, nothing changes. Ignored when size is "auto"
• size - (optional) image size, can be:
  • "auto" - the image is sized to match the chart
  • the same standard paper sizes as for PDF ("a0" ... "legal"), converted to pixels at 96 DPI - "a0" gives 3179 x 4494 px
  • { width: number, height: number } - custom size in pixels
• landscape - (optional) boolean, set to true for landscape orientation. Applies to the standard paper sizes only; for a custom size, swap width and height yourself
• styles - (optional) custom CSS applied in png export

Margins, headers, footers and scale are PDF-only and are ignored for PNG.

Excel-specific options (excel)

• sheetNames - (optional) an array of sheet names for tasks and links, e.g., ["Tasks", "Links"]
• visual - (optional) boolean, set to true to include a visual Gantt chart in excel, default false
• columns - (optional) columns configuration; each column contains the following properties:
  • id - (required) data field id
  • header - (optional) header text
  • type - (optional) "string" | "number" | "date" | "progress"
  • width - (optional) column width
• dateFormat - (optional) format for date fields, default "yyyy-mm-dd"
• indent - (optional) how the task hierarchy is rendered: "native" (default) uses Excel's own grouping, "spaces" indents the task name with spaces

MP Project specific options

Data is exported to MS Project without any specific options, but there are 2 ways to do it:

• if you provide the url pointing to an export service, data will be exported on the server side
• if you do not provide the url, data will be exported on the client side

api.exec("export-data", {  
  url, // skip for client-side export
  format: "mpsx",
  fileName: "gantt",
});

Example

import { useRef } from "react";
import { getData } from "../data";
import { Gantt, version } from "@svar/react-gantt";
import { Button } from "@svar-ui/react-core";

export default function ExportExample() {
  const apiRef = useRef(null);
  const data = getData();
  const url = "https://export.svar.dev/gantt/" + version;

  function handleClick() {
    apiRef.current?.exec("export-data", {
      url,
      format: "pdf",
      fileName: "gantt",
      pdf: {
        size: "a4",
        landscape: true,
        fitSize: true
      }
    });
  }

  return (
    <>
      <Button onClick={handleClick}> Export to PDF </Button>

      <Gantt
        ref={apiRef}
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
      />
    </>
  );
}

---

Related articles:

• Exporting data
• Loading data
• import-data