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

Customizing the PDF Output

Updated on Sep 24, 2026

When drawDOM exports a piece of the page, the output initially looks the same as it does on screen, because it reads the live, computed styles of your elements. Use the techniques on this page when the PDF must look or behave differently from the on-screen UI—for example, to add print-only borders, include background images, lay out content that is never shown to the user, or strip interactive elements such as hyperlinks.

Pick a technique based on what you need:

Simple, static CSS overrides, such as a border or a hidden control—use the .k-pdf-export class.
Background images, or a document split across multiple pages—use kendo-pdf-document.
Content that never appears in the visible UI, such as a print-only layout—render it off-screen.
Removing clickable links from the exported file—disable hyperlinks.

Customize only the PDF Output

To customize the appearance of the PDF output only, use the .k-pdf-export class. This class is automatically added to the root element of the content being exported and removed immediately after the drawing is complete.

Use the .k-pdf-export class for simple, static CSS overrides that must apply only to the PDF output—for example, adding a border that is not shown on screen.

css

.k-pdf-export p {
    border: 2px solid black;
}

Drawing is synchronous, so no timeout separates the moment the class is added from the moment it is removed, and the browser never shows a visible flash of the temporary style.

This approach cannot add background images. The following rule does not work, because the browser fetches the image asynchronously, but the class is already removed by the time it loads. To add background images, see Customizing Multi-Page Documents.

Customizing Multi-Page Documents

Use the <kendo-pdf-document> element when you need to customize multi-page documents or include background images. The element acts as a container for the content that will be rendered into the PDF, allowing you to apply styles and include assets that require asynchronous loading, such as background images.

The DOM renderer clones the element you draw and moves the clone into a hidden custom <kendo-pdf-document> element instead of destroying the original content. Because the clone stays in the DOM, the browser has time to fetch background images before the export runs, and you can scope PDF-only styles to it by prefixing your rules with kendo-pdf-document.

css

kendo-pdf-document p {
    border: 2px solid black;
    background: url("image.jpg");
}

This approach works only for multi-page documents—that is, when you provide either the forcePageBreak or the paperSize option. To use it for a single-page document, pass a placeholder value to forcePageBreak—for example, forcePageBreak: "-".

Rendering Off-Screen Content

Use off-screen content when the exported layout must differ entirely from what the user sees—for example, a print-ready version of a page that is never shown in the visible UI. Position the container outside the viewport with CSS so it stays invisible to the user while remaining fully rendered, because drawDOM can only capture content that the browser has actually laid out.

The following example uses absolute positioning to move the container off the screen.

Loading ...

Disabling Hyperlinks

By default, drawDOM creates clickable hyperlinks in the generated PDF document. Disable them when the exported file is meant for print or archival rather than interactive viewing.

Use the avoidLinks option to turn off all links, or set it to a CSS selector to ignore only the matching links and keep the rest clickable.