Export

Export is a PRO feature. See licensing and trial info.

The PRO edition provides two export pathways:

Server-side export — PDF, PNG, and Excel (XLSX) are generated by the SVAR hosted export service.
Client-side MS Project — import and export .xml files in the browser with no server round-trip.

The `export-data` Action

Trigger an export by calling api.exec("export-data", config) where config is an IExportConfig object.

interface IExportConfig {
  url?: string;                          // export service URL (required for PDF/PNG/XLSX)
  format?: "pdf" | "png" | "xlsx" | "mspx"; // output format
  fileName?: string;                     // downloaded file name (without extension)
  styles?: string;                       // extra CSS injected into the export
  ganttConfig?: Record<string, any>;     // override Gantt props used during export
  pdf?: PdfOptions;
  png?: PngOptions;
  excel?: ExcelOptions;
}

PDF Options

{
  fitSize?: boolean;     // scale content to fit the chosen page size
  size?:
    | "auto"             // fit to content
    | string             // named size, e.g. "a4", "a4-landscape", "a3"
    | { width: number; height: number }; // exact dimensions in mm
  landscape?: boolean;   // rotate to landscape orientation
  styles?: string;       // extra CSS for this format only
  margins?: {
    top?: number;
    bottom?: number;
    left?: number;
    right?: number;
  };
  header?: string;       // HTML string rendered as page header
  footer?: string;       // HTML string rendered as page footer
  scale?: number;        // zoom factor applied before rendering
}

PNG Options

{
  fitSize?: boolean;
  size?: "auto" | string | { width: number; height: number };
  landscape?: boolean;
  styles?: string;
}

Excel Options

{
  sheetNames?: string[];              // names for the Tasks and Links sheets
  visual?: boolean;                   // include a chart image in the spreadsheet
  dateFormat?: string;                // date format string, e.g. "yyyy-mmm-dd"
  columns?: IGanttColumn[];           // columns to include (defaults to all)
  indent?: "native" | "spaces";       // how task hierarchy is indented
}

Server-Side Export Example

The export service URL includes the library version so the server renders the chart with a matching version of the Gantt:

<script>
  import { getData } from "../data";
  import { Gantt, version } from "@svar-ui/svelte-gantt";

  const data = getData();
  let api = $state();

  const url = "https://export.svar.dev/gantt/" + version;

  function exportPDF() {
    api.exec("export-data", {
      url,
      format: "pdf",
      pdf: {
        size: "a4",
        landscape: true,
        fitSize: true,
      },
    });
  }

  function exportExcel() {
    api.exec("export-data", {
      url,
      format: "xlsx",
      excel: {
        sheetNames: ["Tasks", "Links"],
        dateFormat: "yyyy-mmm-dd",
        visual: false,
      },
    });
  }

  function exportExcelWithChart() {
    api.exec("export-data", {
      url,
      format: "xlsx",
      excel: {
        columns: [
          { id: "text", header: "Task name", width: 200 },
        ],
        sheetNames: ["Tasks", "Links"],
        dateFormat: "yyyy-mmm-dd",
        visual: true,
      },
    });
  }
</script>

<button onclick={exportPDF}>Export PDF</button>
<button onclick={exportExcel}>Export Excel</button>
<button onclick={exportExcelWithChart}>Export Excel with Chart</button>
<Gantt bind:this={api} tasks={data.tasks} links={data.links} scales={data.scales} />

Overriding Gantt Config for Export

Use ganttConfig to pass Gantt props that apply only during the export render. This is useful for adjusting cell widths or other layout properties:

api.exec("export-data", {
  url,
  format: "pdf",
  ganttConfig: {
    cellWidth: 30,
  },
  pdf: {
    size: "a4",
    landscape: true,
    fitSize: true,
  },
});

Custom Styles in Exports

Pass a CSS string via styles (or per-format pdf.styles / png.styles) to inject custom styles into the exported output. This is especially useful for styling markers:

api.exec("export-data", {
  url,
  format: "pdf",
  pdf: {
    size: "a4",
    landscape: true,
    fitSize: true,
    styles: ".wx-gantt .myMarker { background-color: rgba(255, 84, 84, 0.77); }",
  },
});

MS Project Import/Export

MS Project XML files can be imported and exported entirely in the browser — no export service URL is required.

Export to MS Project XML

api.exec("export-data", { format: "mspx" });

Import from MS Project XML

Read the file using the browser FileReader API, then pass the XML string to import-data:

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";

  let api;

  function importMSProject() {
    const file = document.getElementById("import-file").files[0];
    const reader = new FileReader();
    reader.onload = e => {
      const xml = e.target.result;
      api.exec("import-data", { data: xml });
    };
    reader.readAsText(file);
  }
</script>

<input id="import-file" type="file" accept=".xml" onchange={importMSProject} />
<Gantt bind:this={api} tasks={data.tasks} links={data.links} scales={data.scales} />

MS Project import/export (format: "mspx") is processed client-side. The url field is not required for this format.

Get Started

Configuration

Guides

PRO Features

Migration

The `export-data` Action

PDF Options

PNG Options

Excel Options

Server-Side Export Example

Overriding Gantt Config for Export

Custom Styles in Exports

MS Project Import/Export

Export to MS Project XML

Import from MS Project XML

​The export-data Action

​PDF Options

​PNG Options

​Excel Options

​Server-Side Export Example

​Overriding Gantt Config for Export

​Custom Styles in Exports

​MS Project Import/Export

​Export to MS Project XML

​Import from MS Project XML

The `export-data` Action

PDF Options

PNG Options

Excel Options

Server-Side Export Example

Overriding Gantt Config for Export

Custom Styles in Exports

MS Project Import/Export

Export to MS Project XML

Import from MS Project XML