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.
