All Components

Recurrent Table Headers

The PDF Export enables you to render recurrent table headers.

If your project requires you to repeat the <thead> elements on each page, set the repeatHeaders option.

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
      <div>
        <input type="checkbox" id="repeatHeaders" [(ngModel)]="repeatHeaders" />
        <label for="repeatHeaders">Repeat headers</label>
      </div>
      <button kendo-button (click)="pdf.saveAs('table.pdf')">
        Save As PDF...
      </button>
    </div>

    <kendo-pdf-export #pdf paperSize="A4" margin="2cm" [repeatHeaders]="repeatHeaders">
      <table class="table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Unit Price</th>
            <th>Qty</th>
            <th>Total</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of data">
            <td>{{ row.productName }}</td>
            <td>{{ row.unitPrice }}</td>
            <td>{{ row.qty }}</td>
            <td>{{ row.total }}</td>
          </tr>
        </tbody>
      </table>
    </kendo-pdf-export>
  `,
  styleUrls: [ 'styles.css' ]
})
export class AppComponent {
  public repeatHeaders: boolean = true;
  public data: InvoiceRow[] = [...invoiceData, ...invoiceData, ...invoiceData];
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { IntlModule } from '@progress/kendo-angular-intl';
import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

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

@NgModule({
  imports:      [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule,
    IntlModule,
    FormsModule,
    NumericTextBoxModule,
    PDFExportModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
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
  ) {}
}
/*
    Use the DejaVu Sans font for display and embedding in the PDF file.
    The standard PDF fonts have no support for Unicode characters.
*/
kendo-pdf-export {
  font-family: "DejaVu Sans", "Arial", sans-serif;
  font-size: 12px;
}

/*
  The examples load DejaVu Sans from the Kendo CDN. Other fonts
  should be hosted from your application.

  Official site of the Deja Vu Fonts project:
  https://dejavu-fonts.github.io/
*/
@font-face {
  font-family: "DejaVu Sans";
  src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
}

@font-face {
  font-family: "DejaVu Sans";
  font-weight: bold;
  src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "DejaVu Sans";
  font-style: italic;
  src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
}

@font-face {
  font-family: "DejaVu Sans";
  font-weight: bold;
  font-style: italic;
  src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
}
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);
In this article