To customize PDF export

18 Nov 20184 minutes to read

Customizing PDF export in the JavaScript Gantt Chart control allows tailoring exported documents for specific needs, using PdfExportProperties to adjust file names, page orientation, size, columns, headers, footers, timelines, and templates. Ensuring focused content like selected rows or styled taskbars, with the PdfExport module injected and allowPdfExport enabled. Use beforePdfExport and pdfExportComplete events for pre-export and post-export modifications, and pdfQueryTaskbarInfo for taskbar styling, supporting RTL layouts via enableRtl.

Customize file name

Set the exported PDF file name using the fileName property in PdfExportProperties, such as ProjectPlan.pdf, for personalized document naming.

How to change page orientation

Adjust page orientation to Portrait or Landscape using the pageOrientation property in PdfExportProperties. By default, the exported PDF document is in Landscape orientation.

Customize page size

Page size can be customized for the exported document using the pageSize property in pdfExportProperties.
The supported page sizes are:

  • Letter
  • Note
  • Legal
  • A0 to A9
  • B0 to B5
  • Archa
  • Archb
  • Archc
  • Archd
  • Arche
  • Flsa
  • HalfLetter
  • Letter11x17
  • Ledger

Export current view data

PDF export provides an option to export the current view data into PDF. To export current view data alone, define the exportType to CurrentViewData.

By default, we render the default footer for a PDF file, this can be enabled or disabled by using the enableFooter property.

Export hidden columns

PDF export provides an option to export hidden columns of Gantt by defining the includeHiddenColumn to true.

Export predecessor lines

The visibility of predecessor lines in the exported PDF document can be controlled using the showPredecessorLines property.

Export specific columns

A hidden column can be shown, or a visible column can be hidden while exporting the Gantt chart by using the toolbarClick and beforePdfExport events.

Columns can be shown or hidden by setting the column.visible property to true or false, respectively.

In the following example, the Duration column is initially hidden in the Gantt chart. During export, the Duration column is made visible and the StartDate column is hidden.

Conditional cell formatting

TreeGrid cells in the exported PDF can be customized or formatted using the pdfQueryCellInfo event. This event allows formatting TreeGrid cells in the exported PDF document based on the column cell value.

In the following sample, the background color is set for Progress column in the exported document by using the args.style.backgroundColor property.

Timeline cell formatting

Timeline cells in the exported PDF document can be customized or formatted using the pdfQueryTimelineCellInfo event.

In the following sample, the header background color is set for timeline cells in the exported document by using the args.timelineCell.backgroundColor property.

Taskbar formatting

Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event.

In the following sample, the taskbar background color is customized in the chart side of the exported document by using the args.taskbar property.

Customize Gantt chart appearance in PDF export

PDF export allows to customize the Gantt chart’s appearance in the exported PDF documents. To customize the appearance of Gantt charts in exported PDF documents, define ganttStyle within pdfExportProperties. By using ganttStyle, can customize columnHeader, fontFamily, cell, taskbar, label, timeline, chartGridLineColor, connectorLineColor, criticalConnectorLineColor, footer, font, eventMarker and holiday regardless of the theme.

Customize split taskbar segment colors in PDF

The PDF export feature in the Gantt Chart allows you to customize the colors of split taskbar segments using the taskSegmentStyles property inside the pdfQueryTaskbarInfo event.

The taskSegmentStyles property contains a collection of style properties for task segments. By specifying the index of corresponding segment index in this collection you can customize that segment taskbar color, progress color, and its border color.

Exporting with templates

Exporting with column template

The PDF export functionality allows to export Grid columns that include images, hyperlinks, and custom text to an PDF document using pdfQueryCellInfo event.

In the following sample, the hyperlinks and images are exported to PDF using hyperlink and image properties in the pdfQueryCellInfo event.

Note: PDF Export supports base64 string to export the images.

Exporting with taskbar template

The PDF export functionality allows to export taskbar templates that include images and text to an PDF document using pdfQueryTaskbarInfo event. Taskbars in the exported PDF document can be customized or formatted using the pdfQueryTaskbarInfo event for parent taskbar templates, taskbar templates and milestone templates.

In the following sample, taskbar templates with images and text are exported to PDF using taskbarTemplate properties in the pdfQueryTaskbarInfo event.

Note: PDF Export supports base64 string to export the images.

Exporting with task label template

The PDF export functionality allows to export task label template that include images and text to an PDF document using pdfQueryTaskbarInfo event.

In the following sample, task label template with images and text are exported to PDF using labelSettings properties in the pdfQueryTaskbarInfo event.

Note: PDF Export supports base64 string to export the images.

Exporting with header template

The PDF export functionality allows to export header template that include images and text to an PDF document using pdfColumnHeaderQueryCellInfo event.

In the following sample, header template with images and text are exported to PDF using headerTemplate properties in the pdfColumnHeaderQueryCellInfo event.

Note: PDF Export supports base64 string to export the images.

See also