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:
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.
.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.