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

Styling of Content

Updated on Nov 21, 2025

To change the appearance of the exported content, write CSS rules that apply only to the PDF output.

The PDF Export component provides two approaches for styling exported content.

PDF Export Class

Simple styling for single-page exports and basic formatting needs like borders, colors, and fonts.

PDF Document Element

Advanced styling for multi-page documents with background images, watermarks, and complex layouts.

Using the PDF Export Class

The .k-pdf-export CSS class is applied to the exported element right before the drawing starts and is removed shortly afterwards. Drawing is synchronous—the page is not updated between the moment the class is added and the moment it is removed. As a result, the applied styles are not visible on screen.

This approach is best suited for:

Simple styling needs (borders, colors, fonts).
Single-page or simple multi-page exports.
Scenarios where you don't need background images.

Basic Class Configuration

To apply styles using the .k-pdf-export class, you must disable ViewEncapsulation on your component:

typescript

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      .k-pdf-export .report-section {
        border: 2px solid #0066cc;
        padding: 10px;
      }
    `
  ]
})
export class AppComponent {}

The following example demonstrates how to style content using the .k-pdf-export class.

Change Theme

Theme

Loading ...

Limitations

When you use the .k-pdf-export CSS class, you cannot add background images because external images are loaded asynchronously after the export completes.

The style in the following example will not be applied:

css

.k-pdf-export p {
  background: url('image.jpg');
}

To add background images or watermarks, use the kendo-pdf-document element approach instead.

Using the PDF Document Element

The kendo-pdf-document element approach creates a clone of the exported content for page-breaking without modifying the original DOM. This enables advanced styling scenarios that aren't possible with the .k-pdf-export class.

This approach is best suited for:

Multi-page documents with complex layouts.
Background images and watermarks.
Professional reports requiring consistent styling across pages.
Scenarios where you need data URI images for reliability.

Basic Configuration

This approach requires either the forcePageBreak or paperSize option to be set on the PDF Export component. For single-page exports, set a dummy value such as forcePageBreak="-".

The DOM renderer places the cloned element inside a custom <kendo-pdf-document> element which is hidden from view. You can apply styles by using the kendo-pdf-document selector:

typescript

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      kendo-pdf-document .watermarked-section {
        background: url('data:image/svg+xml;base64,...');
        background-repeat: repeat;
      }
    `
  ]
})
export class AppComponent {}

Using Data URIs for Images

For reliable background images, use data URIs instead of external URLs. Data URIs embed the image directly in the CSS, ensuring it's available during export:

css

kendo-pdf-document .section {
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIi...');
}

The following example demonstrates how to use the kendo-pdf-document element to add background images and watermarks.

Change Theme

Theme

Loading ...