All Components

PDF Export Overview

The PDF Export component enables you to export pages and page sections to PDF files.

To export content to PDF:

  1. Place the content in the <kendo-angular-pdf-export> component.
  2. Call the saveAs method to save the generated file.

Basic Usage

The following example demonstrates the PDF Export component in action.

import { Component } from '@angular/core';
import { InvoiceRow } from './invoice-row';
import { invoiceData } from './invoice-data';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <button kendo-button (click)="pdf.saveAs('invoice.pdf')">
        Save As PDF...
      </button>
    </div>

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm">
      <my-invoice [data]="data"></my-invoice>
    </kendo-pdf-export>
  `,
  styles: [`
    kendo-pdf-export {
      font-family: "DejaVu Sans", "Arial", sans-serif;
      font-size: 12px;
    }
  `]
})
export class AppComponent {
  public data: InvoiceRow[] = invoiceData;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { IntlModule } from '@progress/kendo-angular-intl';
import { GridModule } from '@progress/kendo-angular-grid';

import { AppComponent } from './app.component';
import { InvoiceComponent } from './invoice.component';

@NgModule({
  imports:      [
    BrowserModule,
    BrowserAnimationsModule,
    IntlModule,
    GridModule,
    PDFExportModule
  ],
  declarations: [ AppComponent, InvoiceComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import { Component, Input } from '@angular/core';
import { aggregateBy } from '@progress/kendo-data-query';
import { InvoiceRow } from './invoice-row';

@Component({
  selector: 'my-invoice',
  template: `
    <div class="header">
        Blauer See Delikatessen
    </div>

    <div class="address">
      <div class="for">
        <h3>Invoice For</h3>
        <p>
          Antonio Moreno<br /> Naucalpan de Juárez<br /> México D.F., Mexico, 53500
        </p>
      </div>

      <div class="from">
        <h3>From</h3>
        <p>
          Hanna Moos <br /> Lützowplatz 456<br /> Berlin, Germany, 10785
        </p>
      </div>
    </div>

    <div class="items">
      <kendo-grid [data]="data" scrollable="none">
        <kendo-grid-column field="productName" title="Product">
          <ng-template kendoGridFooterTemplate>
            Total
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="unitPrice" format="{0:c}" title="Price" width="120"
                            [style]="rightAlign" [footerStyle]="rightAlign">
        </kendo-grid-column>
        <kendo-grid-column field="qty" title="Pcs." width="120"
                            [style]="rightAlign" [footerStyle]="rightAlign">
          <ng-template kendoGridFooterTemplate let-column="column">
            {{ totals[column.field].sum }}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="total" format="{0:c}" title="Total" width="120"
                            [style]="rightAlign" [footerStyle]="rightAlign">
          <ng-template kendoGridFooterTemplate let-column="column">
            {{ totals[column.field].sum | kendoNumber:'c' }}
          </ng-template>
        </kendo-grid-column>
      </kendo-grid>
    </div>

    <div class="signature">
      Signature: ________________
    </div>
  `,
  styles: [`
    .header {
      font-size: 30px;
      font-weight: bold;
      margin: 0 0 20px 0;
      border-bottom: 1px solid #e5e5e5;
      color: #3aabf0;
    }

    .address {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20px 0;
    }

    .from p, .for p {
      color: #787878;
    }

    .signature {
      padding-top: 36px;
    }
  `]
})
export class InvoiceComponent {
  @Input()
  public data: InvoiceRow[] = [];

  private aggregates: any[] = [{
    field: 'qty', aggregate: 'sum'
  }, {
    field: 'total', aggregate: 'sum'
  }];

  public get totals(): any {
    return aggregateBy(this.data, this.aggregates) || {};
  }
}
import { InvoiceRow } from './invoice-row';

export const invoiceData = [
  new InvoiceRow('QUESO CABRALES', 21, 5),
  new InvoiceRow('ALICE MUTTON', 39, 7),
  new InvoiceRow('GENEN SHOUYU', 15.50, 3),
  new InvoiceRow('CHARTREUSE VERTE', 18, 1),
  new InvoiceRow('MASCARPONE FABIOLI', 32, 2),
  new InvoiceRow('VALKOINEN SUKLAA', 16.25, 3)
];

export class InvoiceRow {
  public get total(): number {
    return this.unitPrice * this.qty;
  }

  constructor(
    public productName: string,
    public unitPrice: number,
    public qty: number
  ) {}
}
import { enableProdMode, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

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

Installation

Either use the quick setup (Angular CLI v6 or later) or manually add the package (Angular CLI v5 or earlier).

Quick Setup with Angular CLI v6 or Later

Angular CLI v6 supports the addition of packages through the ng add command which executes in one step the set of otherwise individually needed commands.

ng add @progress/kendo-angular-pdf-export

Manual Setup

  1. Download and install the package.

    npm install --save @progress/kendo-angular-pdf-export @progress/kendo-drawing
  2. For Angular 6, install the rxjs-compat package. For more information, refer to the article on upgrading to Angular 6.

    npm install --save rxjs-compat@6

    For Angular 5 or earlier, install RxJS v5.5+.

    npm install --save rxjs@^5.5
  3. Once installed, import the PDFExportModule in your application root module.

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, PDFExportModule]
    })
    export class AppModule {
    }

Dependencies

The PDF Export package requires the following peer dependencies to be installed by your application:

  • @angular/common
  • @angular/core
  • @progress/kendo-drawing
  • rxjs

Functionality and Features

In this article