Export

PNG Image

Export the entire chart — sheet and timeline — as a single PNG image.

exportToImage(): Promise<Blob>

Returns a Blob containing the PNG data. The image includes all visible rows and the full timeline width.

async function handleExportPng() {
  const blob = await ref.current!.exportToImage();
  const url = URL.createObjectURL(blob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'gantt-chart.png';
  a.click();

  URL.revokeObjectURL(url);
}

PDF

Export as a multi-page PDF with automatic pagination, headers, and footers. Requires the jspdf package.

npm install jspdf

exportToPdf(options?: GanttPdfExportOptions): Promise<Blob>

Options

Multi-page (default)

By default, the chart is split across multiple pages based on the selected page size. Rows are paginated vertically and the timeline is split horizontally. The header repeats on every page.

const blob = await gantt.exportToPdf({
  pageSize: 'A3',
  orientation: 'landscape',
  margin: { top: 15, right: 10, bottom: 15, left: 10 },
  header: (page, total) => `Project Plan — Page ${page} of ${total}`,
  footer: 'Confidential',
});

Single page

Set fitToSinglePage: true to create a PDF with a custom page size that fits all content on one page.

const blob = await gantt.exportToPdf({
  fitToSinglePage: true,
  header: 'Project Timeline',
});

Download helper

async function handleExportPdf() {
  const blob = await gantt.exportToPdf({
    pageSize: 'A4',
    orientation: 'landscape',
    header: 'My Project',
    footer: (page, total) => `${page} / ${total}`,
  });

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'gantt-chart.pdf';
  a.click();
  URL.revokeObjectURL(url);
}

CSV

Export task data as a CSV string. No external dependencies required.

exportToCsv(options?: GanttCsvExportOptions): string

Returns a string (not a Blob). Empty rows are excluded automatically.

Options

// Basic CSV export
const csv = gantt.exportToCsv();

// Semicolon-delimited with links
const csv = gantt.exportToCsv({
  delimiter: ';',
  includeLinks: true,
});

// Only specific columns
const csv = gantt.exportToCsv({
  columns: ['name', 'start', 'end', 'progress'],
});

Download as file

function handleExportCsv() {
  const csv = gantt.exportToCsv({ delimiter: ',' });

  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'gantt-chart.csv';
  a.click();
  URL.revokeObjectURL(url);
}

Excel

Export as an Excel workbook (.xlsx) with multiple sheets for tasks, links, and resources. Requires the exceljs package.

npm install exceljs

exportToExcel(options?: GanttExcelExportOptions): Promise<Blob>

Options

Workbook structure

The generated workbook contains up to three sheets:

• Tasks — task data with row numbers, indented names for hierarchy, and bold summary rows.
• Links — dependency links with From, To, Type, and Lag columns (only if links exist).
• Resources — resource list with Name, Type, and Rate columns (only if resources exist).

// Full Excel export
const blob = await gantt.exportToExcel();

// Minimal — tasks only, no formatting
const blob = await gantt.exportToExcel({
  includeLinksSheet: false,
  includeResourcesSheet: false,
  includeFormatting: false,
});

// Custom columns and sheet name
const blob = await gantt.exportToExcel({
  sheetName: 'Schedule',
  columns: ['name', 'start', 'end', 'progress', 'resources'],
});

Download helper

async function handleExportExcel() {
  const blob = await gantt.exportToExcel();

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'gantt-chart.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}

Resource Scheduler Export

The Resource Scheduler supports the same four export formats with slightly different options tailored to event data.

PNG & PDF

Same API as Gantt Chart — exportToImage() and exportToPdf(options?) with the same SchedulerPdfExportOptions.

CSV

CSV columns: Resource, Name, Start, End.

Excel

Workbook sheets: Events (Resource, Name, Start, End) and optional Resources (Name, Type).

Full Example

A toolbar with all four export actions:

import { GanttChart, GanttChartRef } from '@timelinekit/react';
import { useRef } from 'react';

export default function App() {
  const ref = useRef<GanttChartRef>(null);

  async function download(blob: Blob, filename: string) {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);
  }

  return (
    <div>
      <div>
        <button onClick={async () => {
          download(await ref.current!.exportToImage(), 'chart.png');
        }}>PNG</button>

        <button onClick={async () => {
          download(await ref.current!.exportToPdf({
            pageSize: 'A4',
            orientation: 'landscape',
            header: 'Project Plan',
            footer: (p, t) => `Page ${p} of ${t}`,
          }), 'chart.pdf');
        }}>PDF</button>

        <button onClick={() => {
          const csv = ref.current!.exportToCsv();
          download(
            new Blob([csv], { type: 'text/csv' }),
            'chart.csv',
          );
        }}>CSV</button>

        <button onClick={async () => {
          download(await ref.current!.exportToExcel(), 'chart.xlsx');
        }}>Excel</button>
      </div>

      <GanttChart ref={ref} />
    </div>
  );
}