New to Kendo UI for Angular? Start a free 30-day trial

PDF Export

The Grid provides robust options for exporting its content to PDF, enabling you to create professional, print-ready documents directly from your application.

To enable the PDF export functionality in the Grid:

Import the KENDO_GRID_PDF_EXPORT utility array in you standalone component (or PDFModule).
Include the <kendo-grid-pdf> component within the Kendo UI for Angular Grid to configure and control the export behavior.
Trigger the export by using one of the following methods:
- The kendoGridPDFCommand directive, which binds export functionality to a button or another UI element.
- The saveAsPDF method, which programmatically triggers the export.

html

<kendo-grid [data]="products" [pageSize]="10">
    <ng-template kendoGridToolbarTemplate>
        <button kendoGridPDFCommand [svgIcon]="filePdfIcon"> Export to PDF</button>
    </ng-template>
    <kendo-grid-column field="ProductID" title="ID"></kendo-grid-column>
    ...
    <kendo-grid-pdf fileName="Products.pdf" paperSize="A4"></kendo-grid-pdf>
</kendo-grid>

The following example demonstrates how to set up the PDF export functionality of the Grid.

Change Theme

Theme

Loading ...

Exporting All Pages

By default, the Grid exports only the current page of data. To export all pages, set the allPages option to true. When you enable the option, the pageChange event fires with skip set to 0 and take to the total number of records. The original skip and take are restored after the export completes.

The export of all Grid pages requires all records to be rendered at once. Behind the scenes, a Grid with no paging applied is rendered off-screen.

The exact maximum number of exportable rows varies depending on the browser, system resources, template complexity, and other factors.

Verify your own worst-case scenarios in each browser you intend to support.

When the Grid templates contain asynchronously rendered content such as Kendo UI for Angular Charts, use the delay option to specify the number of milliseconds by which the export will be postponed. This ensures that all content is rendered before the export starts.

Change Theme

Theme

Loading ...

Fitting Content to Paper Size

By default, the paper size of the exported document is determined by the size of the Grid on the screen. However, you can define a specific paper size using the paperSize property. Supported values include standard sizes like "A4", "Letter", or custom dimensions (e.g., ["300mm", "500mm"]).

When a specific paperSize is set, the content automatically fits to the specified dimensions. Sometimes, this may result in cutting out content in the PDF output. You can further control the scaling by using the scale property to override the automatic scale factor. For example, you can adjust the scale to make room for additional page elements like headers or footers.

The following example demonstrates how to set the paperSize to "A4" and adjust the scale to 0.8.

Change Theme

Theme

Loading ...

Customizing Exported Columns

The Angular Grid allows you to control which columns are included in the exported PDF document. This feature is particularly useful when you want to exclude certain columns from the export or rearrange the order of the exported columns.

To specify the columns for export:

Define the columns you want to include in the exported PDF by adding <kendo-grid-column> components inside the <kendo-grid-pdf> component.
(Optional) If your Grid uses column groups, include <kendo-grid-column-group> components to organize the exported columns.

The following example demonstrates how to export only two columns in the PDF output, even though the Grid displays six columns by default. This is particularly useful when you want to limit the exported data to only the most relevant information.

Change Theme

Theme

Loading ...

Specifying Page Template

The Grid enables you to specify a page template that helps you position the content and add headers, footers, and other elements. To style the exported document, use the built-in kendoGridPDFTemplate and apply the necessary CSS styles. During the PDF export, the template is positioned in a container with the specified paper size.

When using the template, you are required to set the paperSize option.

The following example demonstrates how you can add headers and footers to the exported PDF file using the built-in kendoGridPDFTemplate.

Change Theme

Theme

Loading ...

Exporting Multiple Grids to the Same PDF

By default, the each Grid is exported to a separate document.

To export multiple Grids to the same document:

Use the drawPDF method to get the group of Grids for export.
Set the exportPDF method to export the group.

Change Theme

Theme

Loading ...

Triggering Export Externally

The Grid enables you to trigger the export operation by calling the saveAsPDF method.

Change Theme

Theme

Loading ...

Exporting Groups of Rows to Separate Pages

You can manually split the exported data into separate pages by using the forcePageBreak option of the PDFComponent.

Sort the data by the respective field.
By utilizing the rowClass function, add the class that will be used by the forceBreakPage option to the first row of each items group.

The following example demonstrates how to render all items with the same Category name to a separate PDF page.

Change Theme

Theme

Loading ...

Saving PDF Files

Internet Explorer 9 and Safari do not support the option for saving the exported PDF file and require the implementation of a server proxy. To specify the server proxy URL, set the proxyURL option.

Your project might require you to send the generated PDF file to a remote service. To achieve this behavior, set the proxyUrl and forceProxy to true. If the proxy returns 204 No Content, the Save As... dialog will not appear on the client.

Embedding Custom Fonts

The default fonts in the PDF files do not provide Unicode support. To render international characters, you need to embed an external font. For more information, refer to the article on custom fonts and PDF export.

In the following example, the DejaVu Sans font is loaded and applied to the exported PDF document.

Change Theme

Theme

Loading ...

Styling the Exported Grid

When exporting the Grid to a PDF, you may want to apply custom styles that are specific to the exported document. To achieve this, use the .k-grid-pdf-export-element CSS class as a prefix for your selectors. For example, to change the font size and color of the Grid cells in the exported PDF:

css

.k-grid-pdf-export-element .k-table-row .k-table-td {
    color: red;
    font-size: 20px;
    font-style: bold;
}

The .k-grid-pdf-export-element class is dynamically added to the exported Grid element just before the PDF drawing process begins and is removed immediately after the drawing is complete. Since the drawing process is synchronous, meaning the styles are applied only during the export and are not visible on the screen.

The following example demonstrates how to define a style that customizes the text appearance of Grid cells in the exported PDF.

Change Theme

Theme

Loading ...

Known Limitations

The rendition of right-to-left content is not supported.
Exporting Master-Detail Grids to PDF is not supported.
Overflowing text is clipped and text-overflow: ellipsis is not supported.
Images that are hosted on different domains might not be rendered unless the server provides the permissive Cross-Origin HTTP headers. Similarly, it might not be possible for fonts to load across domains.

Even if the proper CORS headers are provided, Internet Explorer 9 will not be able to load images or fonts from another domain, which might raise an uncatchable security exception. To support Internet Explorer 9, host the images and fonts on the same domain as the application.
The 1.5 PDF specification limits the maximum PDF document size to 5,080 x 5,080 millimeters (which equals to 200x200 inches). Larger files might not open in all viewers.
Older browsers, such as Internet Explorer 9 and Safari, require you to implement a server proxy. For more information, refer to the proxyUrl configuration section.