Exporting data

The functionality is available in PRO Edition only

PRO

Overview

SVAR Gantt provides several ways to export project data. Depending on the format, export can be performed server-side (via a ready-made export service) or client-side (MS Project XML only).

Supported export formats:

Format	Mode	Description
PDF	Server-side	Export Gantt chart as a paginated PDF document
PNG	Server-side	Export Gantt chart as an image
XLSX	Server-side	Export tasks and links to Excel
XLSX (visual)	Server-side	Export Excel with an embedded Gantt chart
MS Project XML	Server-side	Export project to MS Project XML
MS Project XML	Client-side	Import / export MS Project XML without server

Server-side export

SVAR provides a ready-to-use export service. You provide a URL to the export service within the export-data action, and Gantt sends its state to that service, which generates and returns the file.

This approach is used for:

• PDF
• PNG
• Excel (XLSX)
• MS Project XML (MSPX)

Export service URL

The export service URL is defined via the url property in the export configuration.

import { version } from "@svar/gantt";

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

Using the versioned endpoint is recommended, as it guarantees compatibility between the client and the export service. The version value is exported from the Gantt package and should match the version used in your project.

Using the export-data action

Server-side export is triggered via the export-data action.

api.exec("export-data", {
    url,
    format: "pdf", // default
    fileName: "gantt", //default
    ganttConfig: {
        cellWidth: 30
    },
    //format-specific settings
    excel: {},
    png: {},
    pdf: {}
});

The export configuration supports an override mechanism: any property provided in the ganttConfig setting of the action config overrides the corresponding value taken from the current Gantt state.

This allows you to redefine export-specific settings (for example, sizes, columns, or styles) without modifying the live Gantt configuration.

Server-side main export options

To configure export, use the export-data parameters.

Setting the export format

By default, data is exported in the PDF format. Change the format value to export PNG, XLSX or MS Project XML.

import { version } from "@svar/gantt";

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

api.exec("export-data", {
    url,
    format: "pdf", // "png" | "mspx" | "xlsx"
});

Exporting to Excel

When exporting to XLSX, you can optionally define:

• custom sheet names
• Excel date format
• columns to display

api.exec("export-data", {
    url,
    format: "xlsx",
    excel: {
        sheetNames: ["Tasks", "Links"], //default
        dateFormat: "yyyy-mmm-dd", //default
        columns: [
            {
                id: "text",
                header: "Task name",
                type: "string", //  "string" | "number" | "date" | "progress"
                width: 200,
            },
        ],
    },
});

By default, the exported columns are formed from the following data fields: "id", "text", "start", "end", "duration", "progress", "type", "parent".

Also, you can export to XLSX with embedded Gantt chart by setting excel.visual to true:

api.exec("export-data", {
    url,
    format: "xlsx",
    excel: {
        visual: true,
    },
});

Exporting to MS Project

To export Gantt data to MS Project, set the format to "mspx":

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

Exporting to PDF / PNG

Styling exported output

You can inject custom CSS into exported documents:

api.exec("export-data", {
    url,
    format: "pdf", //or "png"
    styles: ".wx-gantt .myMarker { background-color: red; }",
});

Changing page orientation while exporting

Use the landscape option of the export-data action to switch between portrait and landscape modes.

api.exec("export-data", {
    url,
    format: "pdf", // or "pdf"
    pdf: {
        landscape: true,
    },
});

Changing page size

Use the size option of the export-data action to change page size:

api.exec("export-data", {
    url,
    format: "pdf", //or "png"
    pdf: {
        size: "a4", // "a3", "auto"
    },
});

Custom size:

pdf: {
    size: { width: 1200, height: 800 },
}

Fitting Gantt content to page

You can set the Gantt chart to fully fit the selected page size. Ignored when size: "auto".

api.exec("export-data", {
    url,
    format: "pdf", //or "png"
    pdf: {
        size: "a4",
        fitSize: true,
    },
});

Related sample: Server-side export

Client-side MS Project XML import / export

In addition to server-side export, Gantt provides client-side mechanism for working with MS Project XML. This approach:

• Does not require a server
• Works entirely on the client
• Supports MS Project XML only

Exporting MS Project XML

To export data to MS Project on the client side, you should call the export-data action with the only format parameter setting the "mspx" type:

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

let api = $state();

function exportMSProject() {
    api.exec("export-data", { format: "mspx" });
}
</script>

<Gantt bind:this={api} {tasks} {links} />

Importing MS Project XML

To import an MS Project XML file, you need to create a custom upload control, read the contents of the uploaded file to get an XML string and send it to the import-data action that parses it to tasks and links:

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

let api = $state();

function importMSProject() {
    // your uploader control
    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>

<Gantt bind:this={api}/>

Related sample: Export/import to MS project (client-side)

---

Related articles:

• Loading data
• export-data
• import-data