Skip to main content

export-data

PRO

The functionality is available in PRO Edition only

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" | "a4" | "a3" | { 
      width: number, 
      height: number,
    },
    landscape?: boolean,
    styles?: string,
    margins?: { 
      top?: number, 
      bottom?:number, 
      left?: number,
      right?: number,
    },
    header?: string,
    footer?: string,
    scale?: number,
  },
  png?: {
    fitSize?: boolean,
    size?: "auto" | string | { 
      width: number, 
      height?: number,
    },
    landscape?: boolean,
    styles?: string,
  },
  excel?: {
    sheetNames?: string[],
    visual?: boolean,
    dateFormat?: string,
    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 to fit the page
  • size - (optional) page size, can be:
    • "auto" - automatic sizing
    • "a4" | "a3" - standard paper sizes
    • { width: number, height: number } - custom size in pixels
  • landscape - (optional) boolean, set to true for landscape orientation
  • styles - (optional) custom css applied in pdf export
  • margins - (optional) page margins
    • top - (optional) top margin in pixels
    • bottom - (optional) bottom margin in pixels
    • left - (optional) left margin in pixels
    • right - (optional) right margin in pixels
  • 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

PNG-specific options (png)​

  • fitSize - (optional) scale the chart to fit the page
  • size - (optional) page size, can be:
    • "auto" - automatic sizing
    • "a4" / "a3" - standard paper sizes
    • { width: number, height: number } - custom size in pixels
  • landscape - (optional) boolean, set to true for landscape orientation
  • styles - (optional) custom CSS applied in png export

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"

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​

<script setup>
  import { getData } from "../data";
  import { Gantt, version } from "@svar/vue-gantt";
  import { Button } from "@svar-ui/vue-core";
  import { ref } from "vue";

  const api = ref(null);
  const data = getData();
  const url = "https://export.svar.dev/gantt/" + version;

  function handleClick() {
      api.value.exec("export-data", {
        url,
        format: "pdf",
        fileName: "gantt",
        pdf: {
          size: "a4",
          landscape: true,
          fitSize: true
        }
      });
  }
</script>

<template>
  <Button :onclick="handleClick"> Export to PDF </Button>

  <Gantt
    ref="api"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
  />
</template>

Related articles: