Customizing the Appearance

You can change the appearance of the PDF output, as it appears in the browser while you draw the DOM elements. This could be done by using CSS rules that apply only to the PDF output.

• Using the .k-pdf-export class
• Using the <kendo-pdf-document> element
• Positioning content off the screen

The .k-pdf-export Class

When you use the .k-pdf-export CSS class, apply it to a DOM element right before the drawing starts and remove it shortly afterwards. The following example demonstrates how to define a style that places a border around all paragraphs in the PDF output.

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

Drawing is essentially synchronous—no timeout exists between the moment the class is added and the moment it is removed. As a result, when the generation happens, no flash occurs in the browser. The code in the following example will not work, because images are cached upfront.

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

The .k-pdf-export approach does not support the addition of background images. For more information on how to add background images, refer to the section on using the <kendo-pdf-document> element.

The kendo-pdf-document Element

The kendo-pdf-document approach works for multi-page documents only—that is, when either the forcePageBreak or the paperSize option is provided. To implement it in single-page scenarios, pass a dummy value to the forcePageBreak option—for example, forcePageBreak: "-".

When you use the <kendo-pdf-document> element, the DOM renderer makes a clone of the element and that clone handles 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.

You can also use the kendo-pdf-document element to add images.

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

Off-Screen Content

You can produce different content for export or hide some content from the user by positioning the container outside the screen. To use this functionality, the container has to be fully rendered.

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

Suggested Links

• API Reference of the Drawing Library
• DrawOptions