Multi-Page PDF Export with Scaling in Blazor Gantt Chart

18 Nov 201815 minutes to read

The Syncfusion Blazor Gantt Chart provides support for exporting content across multiple PDF pages with configurable scaling options. These settings allow the Gantt Chart layout to be distributed across pages while maintaining appropriate readability and structure. Multi‑page export behavior can be customized using the GanttPdfExportProperties class.

Enabling multi-page PDF export

The Blazor Gantt Chart supports exporting large or wide project timelines to PDF. By default, the export scales the entire Gantt Chart to fit on a single page, which can reduce readability for extended projects. To improve this, enable multi-page export so the content automatically splits across multiple pages.

To export the Gantt Chart across multiple PDF pages, set the enableMultiPage property to true when calling the ExportToPdfAsync method.

Home.razor
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Grids

<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="100%" AllowPdfExport="true" Toolbar="toolbarItem">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
    </GanttTaskFields>
    <GanttEvents OnToolbarClick="ToolbarClickHandler" TValue="TaskData"></GanttEvents>
</SfGantt>

@code {
    public SfGantt<TaskData>? Gantt { get; set; } = new();
    private List<Syncfusion.Blazor.Navigations.ToolbarItem> toolbarItem = new List<Syncfusion.Blazor.Navigations.ToolbarItem>() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
    public List<TaskData> TaskCollection = GetTaskCollection();

    public class TaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public int? ParentId { get; set; }
        public string? Predecessor { get; set; }
    }

    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>()
        {
            new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
            new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
            new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, Predecessor="2", },
            new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", },
            new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 10), EndDate = new DateTime(2026, 01, 17), },
            new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 30, ParentId = 5, Predecessor="4", },
            new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 5, Predecessor="6", },
            new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", }
        };
        return Tasks;
    }

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args?.Item?.Id == "PdfExport" && Gantt!=null)
        {
            GanttPdfExportProperties pdfExportProperties = new GanttPdfExportProperties { };
            // enables multi-page mode during PDF export.
            await Gantt.ExportToPdfAsync(pdfExportProperties, true);
        }
    }
}

PDF export scaling in Blazor Gantt Chart

The Syncfusion Blazor Gantt Chart supports two scaling options during PDF export to control how the chart content is resized to fit the generated PDF pages. These options are configured using the GanttPdfExportScaleMode enumeration.

FitToPages: The FitToPages mode compresses the Gantt Chart content so that it fits within a specified number of PDF pages.
- This mode is used when the exported output must be restricted to a particular page count.
- A uniform scale factor is automatically computed to ensure the content fits within the defined page limit while maintaining aspect ratio.
- Using a very small page count results in reduced text and element sizes.
Percentage: The Percentage mode applies a uniform percentage-based scale to the Gantt Chart before pagination.
- This mode is used when predictable downscaling is required, regardless of the number of pages generated.
- The content is resized proportionally based on the specified percentage value.
- After scaling, the content flows into multiple PDF pages if needed.

The Percentage scale mode maintains a fixed visual scaling factor. The final number of PDF pages is determined by the scaled content size and the configured page settings.

The FitToPages scale mode maintains a fixed page count. A suitable scale factor is automatically calculated to ensure the Gantt Chart content fits within the specified number of pages.

Page size, orientation, and margin settings influence the scaling behavior and affect how the content is paginated in the exported PDF.

Export Gantt Chart to PDF with page based scaling

The Blazor Gantt Chart supports scaling the exported PDF so that all columns fit within a specified number of pages horizontally, while rows continue across multiple pages vertically. This export mode is ideal when working with a large date range or many columns, where horizontal scrolling must be avoided and column widths need to remain readable.

To enable this behavior during PDF export:

Set ScaleMode to FitToPages using GanttPdfExportScaleMode in PdfExportEventArgs.
Use PageWide to specify the target number of pages across which the chart should fit horizontally. A smaller value compresses the chart to fit fewer horizontal pages, while a larger value reduces compression and spreads the content across more pages.
Use PageTall to specify the target number of pages over which the content should span vertically. A lower value increases vertical compression, fitting more rows into fewer pages, whereas a higher value distributes the rows across additional pages with less scaling.

These properties provide precise control over scaling and pagination, enabling clean and readable multi‑page PDF exports for large Gantt Charts.

Home.razor
@using Syncfusion.Blazor.Gantt

@using Syncfusion.Blazor.Navigations

<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="100%" AllowPdfExport="true" Toolbar="toolbarItem">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
    </GanttTaskFields>
    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfExporting="PdfExportingHandler" TValue="TaskData"></GanttEvents>
</SfGantt>

@code {
    public SfGantt<TaskData>? Gantt { get; set; } = new();
    private List<ToolbarItem> toolbarItem = new List<ToolbarItem>() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
    public List<TaskData> TaskCollection = GetTaskCollection();

    public class TaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public int? ParentId { get; set; }
        public string? Predecessor { get; set; }
    }

    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>()
        {
            new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
            new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
            new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, Predecessor="2", },
            new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", },
            new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 10), EndDate = new DateTime(2026, 01, 17), },
            new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 30, ParentId = 5, Predecessor="4", },
            new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 5, Predecessor="6", },
            new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", }
        };
        return Tasks;
    }

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args?.Item?.Id == "PdfExport" && Gantt!=null)
        {
            GanttPdfExportProperties pdfExportProperties = new GanttPdfExportProperties { };
            await Gantt.ExportToPdfAsync(pdfExportProperties, true);
        }
    }
    public async Task PdfExportingHandler(PdfExportEventArgs args)
    {
        if (args.MultiPageSettings?.TotalPages > 5)
        {
            args.MultiPageSettings.ScaleMode = GanttPdfExportScaleMode.FitToPages;
            args.MultiPageSettings.PageTall = 4;
            args.MultiPageSettings.PageWide = 2;
        }
        await Task.CompletedTask;
    }
}

Export Gantt Chart to PDF with custom scaling

The Blazor Gantt Chart supports percentage‑based scaling during PDF export, allowing the Gantt Chart to be uniformly enlarged or reduced before pagination. This mode is useful when small, predictable adjustments to the chart size are required or when manual control over the scaling behavior is preferred instead of automatic fitting modes.

To configure percentage-based scaling during PDF export:

Set ScaleMode to Percentage using GanttPdfExportScaleMode through PdfExportEventArgs.
Specify the desired scaling factor using the ScalePercentage property. A lower percentage applies more compression and reduces the Gantt Chart size, while a higher percentage applies less compression and increases the Gantt Chart size.

This approach provides precise control over the overall Gantt Chart size while preserving layout consistency across exported PDF pages.

Home.razor
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Navigations

<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="100%" AllowPdfExport="true" Toolbar="toolbarItem">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
    </GanttTaskFields>
    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfExporting="PdfExportingHandler" TValue="TaskData"></GanttEvents>
</SfGantt>

@code {
    public SfGantt<TaskData>? Gantt { get; set; } = new();
    private List<ToolbarItem> toolbarItem = new List<ToolbarItem>() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
    public List<TaskData> TaskCollection = GetTaskCollection();

    public class TaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public int? ParentId { get; set; }
        public string? Predecessor { get; set; }
    }

    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>()
        {
            new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
            new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
            new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, Predecessor="2", },
            new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", },
            new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 10), EndDate = new DateTime(2026, 01, 17), },
            new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 30, ParentId = 5, Predecessor="4", },
            new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 06), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 5, Predecessor="6", },
            new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", }
        };
        return Tasks;
    }

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args?.Item?.Id == "PdfExport" && Gantt!=null)
        {
            GanttPdfExportProperties pdfExportProperties = new GanttPdfExportProperties { };
            await Gantt.ExportToPdfAsync(pdfExportProperties, true);
        }
    }
    public async Task PdfExportingHandler(PdfExportEventArgs args)
    {
        if(args!=null)
        {
            args.MultiPageSettings.ScaleMode = GanttPdfExportScaleMode.Percentage;
            args.MultiPageSettings.ScalePercentage = 50;
            await Task.CompletedTask;
        }
        
    }
}

Limitations

Split tasks are currently not exported.
Unscheduled tasks are not included in the PDF output.
Multiple taskbars for a single row are not supported in PDF export.

Search docs

Ask Syncfusion AI Assistant