Styling of Content

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

To style the PDF content, you can either:

• Use the .k-pdf-export class, or
• Use the kendo-pdf-document element.

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. The .k-pdf-export class applies only to the individual pages before the export and using it may lead to incorrectly sized pages.

• In order for the styles to be applied, disable ViewEncapsulation on the component.
• To apply the styles to all exported pages at once during multipage export, use the kendo-pdf-document element.

The following example demonstrates how to define a style that places a border around all paragraphs in the PDF output.

When you use the .k-pdf-export CSS class, you cannot add background images. For more information on how to add background images, refer to the section about using the <kendo-pdf-document> element.

The style in the following example will not be applied because the image will be loaded after the export completes.

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

Using the PDF Document Element

This approach works only if your project requests multi-page documents—that is, only when either the forcePageBreak or the paperSize option is provided. To make it work in the cases when you need a single page, set a dummy value such as forcePageBreak="-".

When you use the <kendo-pdf-document> element, the DOM renderer creates a clone of the element which does the page-breaking without destroying the original content. The DOM renderer places the cloned element inside a custom <kendo-pdf-document> element which is hidden from the view. As a result, you can apply custom styles under kendo-pdf-document by restricting the rules to the elements.

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

Suggested Links

• API Reference of the PDF Export Component