KENDO-ANGULAR-PDF-
EXPORT
Kendo-angular-pdf-export is an Angular wrapper for the Kendo UI Drawing library,
which provides a simple way to export the contents of a web page to PDF.
The Kendo UI Drawing library provides a powerful set of APIs for creating and
manipulating PDF documents, and the Kendo-angular-pdf-export wrapper makes it
easy to use this APIs in an Angular application.
With this package, you can export the contents of any HTML element to PDF,
including Grid, Charts and other Kendo UI components. It also allows you to export
the whole page, customize the PDF layout and add custom styles.
Here's an example of how you can use the Kendo-angular-pdf-export package to
export a Grid to PDF:
Code
import { Component } from '@angular/core';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
@Component({
selector: 'app-root',
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice"></kendo-grid-column>
</kendo-grid>
<button class="k-button" (click)="exportPDF()">Export PDF</button>
})
export class AppComponent {
public gridData = [{ ProductName: "Chai", UnitPrice: 18.0000 }];
public exportPDF(): void {
this.pdfExport.saveAs("grid.pdf");
constructor(private pdfExport: PDFExportModule) {}
To ensure that the exported PDF using Kendo-angular-pdf-export has the exact page
layout and style as the original HTML page, you can use the following approaches:
1. Use the pageTemplate property of the PDFExportModule to define the layout of
the PDF page. You can specify the size, margins, and orientation of the page.
Code
export class AppComponent {
public gridData = [{ ProductName: "Chai", UnitPrice: 18.0000 }];
public pdfExport: PDFExportModule;
constructor(private pdfExport: PDFExportModule) {
pdfExport.pageTemplate = {
width: '210mm',
height: '297mm',
margin: '10mm'
public exportPDF(): void {
this.pdfExport.saveAs("grid.pdf");
}
2. You can use the styles property of the PDFExportModule to apply custom CSS
styles to the exported PDF. You can define custom styles or use external
stylesheet.
Code
export class AppComponent {
public gridData = [{ ProductName: "Chai", UnitPrice: 18.0000 }];
public pdfExport: PDFExportModule;
constructor(private pdfExport: PDFExportModule) {
pdfExport.styles = {
myStyle: {
color: 'red'
}
}
}
public exportPDF(): void {
this.pdfExport.saveAs("grid.pdf");
}
}
export class AppComponent {
public gridData = [{ ProductName: "Chai", UnitPrice: 18.0000 }];
public pdfExport: PDFExportModule;
constructor(private pdfExport: PDFExportModule) {
pdfExport.styles = {
file: 'path/to/styles.css'
}
}
public exportPDF(): void {
this.pdfExport.saveAs("grid.pdf");
}
}
3. You can also use the drawDOM method to export a specific HTML element to
PDF and make sure that the layout and style will be the same as the original.
Code
export class AppComponent {
public gridData = [{ ProductName: "Chai", UnitPrice: 18.0000 }];
public pdfExport: PDFExportModule;
constructor(private pdfExport: PDFExportModule) {}
public exportPDF(): void {
pdfExport.drawDOM(document.getElementById("grid"), { paperSize: "A4", margin: "2cm" });
pdfExport.saveAs("grid.pdf");
It's important to note that you will need to adjust the layout and styles to
suit your specific needs, and test the output with different web browsers,
since sometimes the layout or style may differ.
For Chart and Grid option
To export an Angular page that contains multiple components, including charts and a grid,
you can use the Kendo UI for Angular's PDF Export component along with the kendo-
drawing library.
Here is an example of how to export an Angular page with a chart and a grid to a PDF
document using the PDFExport and ChartPDFService services:
<div #content>
<h1>My Angular Page</h1>
<kendo-chart #myChart [title]="{ text: 'My Chart' }">
<kendo-chart-series>
<kendo-chart-series-item [data]="chartData" type="line" [name]="'My Series'"></kendo-
chart-series-item>
</kendo-chart-series>
</kendo-chart>
<kendo-grid [data]="gridData" [height]="410">
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock"></kendo-grid-column>
</kendo-grid>
<button (click)="exportPDF()">Export to PDF</button>
</div>
.ts code
import { Component, ViewChild, ElementRef } from '@angular/core';
import { PDFExport, ChartPDFService } from '@progress/kendo-angular-pdf-export';
import { drawDOM, Group } from '@progress/kendo-drawing';
@Component({
selector: 'my-app',
template: `...`
})
export class AppComponent {
@ViewChild('content', { static: false }) content: ElementRef;
@ViewChild('myChart', { static: false }) chart: ElementRef;
private pdfExport: PDFExport;
public chartData: any[] = [{
category: 'Jan', value: 50
}, {
category: 'Feb', value: 70
}, {
category: 'Mar', value: 60
}];
public gridData: any[] = [{
ProductName: 'Chai',
UnitPrice: 18.0,
UnitsInStock: 39
}, {
ProductName: 'Chang',
UnitPrice: 19.0,
UnitsInStock: 17
}, {
ProductName: 'Aniseed Syrup',
UnitPrice: 10.0,
UnitsInStock: 13
}];
constructor(private chartPDFService: ChartPDFService) {}
public exportPDF() {
const content = this.content.nativeElement;
const chart = this.chart.nativeElement;
const chartImagePromise = this.chartPDFService.exportImage(chart);
chartImagePromise.then((image) => {
const pdf = new Group();
drawDOM(content).then((group) => {
pdf.append(group);
pdf.append(image);
this.pdfExport = new PDFExport(pdf, {
paperSize: 'A4',
margin: { top: '2cm', left: '2cm', right: '2cm', bottom: '2cm' },
repeatHeaders: true,
landscape: true,
avoidLinks: true,
scale: 0.8,
allPages: true,
multiPage: true,
keepTogether: '.page-break',
title: 'My Angular Page'
});
this.pdfExport.save();
});
});
In this example, the PDFExport service is used to export the contents of the content
element to a PDF document. The ChartPDFService is used to export the chart as an
image, which is then appended to the PDF document.
The drawDOM function is used to convert the contents of the content element to a
Kendo UI drawing Group. This Group is then used to create a new PDFExport instance,
which is configured with the desired options such as paper size, margins, and title.
Finally, the save method of the PDFExport instance is called to initiate the download of
the PDF document.
Note that the keepTogether option is used to ensure that the chart and grid are not
split across multiple pages, and the repeatHeaders option is used to repeat the header
row of the grid on each page.
Also, the landscape option is set to true to change the orientation of the paper to
landscape, and the allPages and multiPage options are set to true to ensure that all the
contents of the content element are included in the PDF document.
You may need to adjust the values of some of these options to suit your specific
requirements.
