Customizing the Appearance

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

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.

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

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

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

import { Component } from '@angular/core';
import { exportElement } from './export-element';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onClick(drawMe)">Export PDF...</button>
    <div class='off-screen'>
        <div #drawMe>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.
            </p>
            <p>
                Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
            </p>
            <p>
                Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.
            </p>
            <p>
                Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.
            </p>
        </div>
    </div>
  `,
  styles: [`
    p {
        font-size: 20px;
    }

    .off-screen {
        position: absolute;
        left: -10000px;
        top: 0;
    }
  `]
})
export class AppComponent {
  public onClick(element) {
    exportElement(element, {
        paperSize: "A4",
        margin: "2cm"
    });
  }
}

import { drawDOM, exportPDF, DrawOptions, Group } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

export function exportElement(element: HTMLElement, options?: DrawOptions) {
    drawDOM(element, options).then((group: Group) => {
        return exportPDF(group);
    }).then((dataUri) => {
        saveAs(dataUri, 'export.pdf');
    });
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

In this article