import {Component, ViewEncapsulation,ViewChildren, QueryList,AfterViewInit} from "@angular/core";
import { GridComponent } from "@progress/kendo-angular-grid";
import { exportPDF, Group } from "@progress/kendo-drawing";
import { saveAs } from "@progress/kendo-file-saver";
import { products } from "./products";
@Component({
selector: "my-app",
template: `
<button type="button" class="k-button" (click)="exportGrids()">
Export
</button>
<kendo-grid
class="zen-pdf-export-grid"
[kendoGridBinding]="products1"
[pageable]="true"
[pageSize]="10"
[height]="430"
>
<kendo-grid-column field="ProductID" title="ProductID" width="100">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="ProductName" width="100">
</kendo-grid-column>
<kendo-grid-column field="SupplierID" title="SupplierID" width="100">
</kendo-grid-column>
<kendo-grid-column field="CategoryID" title="CategoryID" width="100">
</kendo-grid-column>
<kendo-grid-column
field="QuantityPerUnit"
title="QuantityPerUnit"
width="100"
>
</kendo-grid-column>
<kendo-grid-pdf
fileName="Products.pdf"
[paperSize]="['8.5in', '11in']"
[allPages]="true"
[repeatHeaders]="true"
[margin]="margin"
[scale]="scale"
>
<ng-template
kendoGridPDFTemplate
let-pageNum="pageNum"
let-totalPages="totalPages"
>
<div class="page-template">
<div class="header">
<div style="float: right">
Page {{ pageNum }} of {{ totalPages }}
</div>
Multi-page grid with automatic page breaking
</div>
<div class="footer">Page {{ pageNum }} of {{ totalPages }}</div>
</div>
</ng-template>
</kendo-grid-pdf>
</kendo-grid>
<kendo-grid
class="zen-pdf-export-grid"
[kendoGridBinding]="products2"
[pageable]="true"
[pageSize]="10"
[height]="430"
>
<kendo-grid-column field="UnitPrice" title="UnitPrice" width="100">
</kendo-grid-column>
<kendo-grid-column field="UnitsInStock" title="UnitsInStock" width="100">
</kendo-grid-column>
<kendo-grid-column field="UnitsOnOrder" title="UnitsOnOrder" width="100">
</kendo-grid-column>
<kendo-grid-column field="ReorderLevel" title="ReorderLevel" width="100">
</kendo-grid-column>
<kendo-grid-column
field="FirstOrderedOn"
title="FirstOrderedOn"
width="100"
>
</kendo-grid-column>
<kendo-grid-pdf
fileName="Products.pdf"
[paperSize]="['8.5in', '11in']"
[allPages]="true"
[repeatHeaders]="true"
[margin]="margin"
[scale]="scale"
>
<ng-template
kendoGridPDFTemplate
let-pageNum="pageNum"
let-totalPages="totalPages"
>
<div class="page-template">
<div class="header">
<div style="float: right">
Page2 {{ pageNum }} of {{ totalPages }}
</div>
Multi-page grid with automatic page breaking
</div>
<div class="footer">Page2 {{ pageNum }} of {{ totalPages }}</div>
</div>
</ng-template>
</kendo-grid-pdf>
</kendo-grid>
`,
encapsulation: ViewEncapsulation.None,
styleUrls: ["./pdf-styles.css", "./page-template.css"]
})
export class AppComponent implements AfterViewInit {
public products1: any[] = products.slice(0, 40);
public products2: any[] = products.slice(40);
public fileName = "filename.pdf";
public margin = {
top: "1.5cm",
left: "0.5cm",
right: "0.5cm",
bottom: "1.5cm"
};
public scale: number = 0.8;
@ViewChildren(GridComponent)
public grids: QueryList<GridComponent>;
public exportGrids(): void {
const promises = this.grids.map(grid => grid.drawPDF());
console.log("exportGrids promises =========================", promises);
Promise.all(promises)
.then(groups => {
console.log(
"exportGrids Promise groups =========================",
groups
);
const rootGroup = new Group({
pdf: {
multiPage: true
}
});
groups.forEach(group => {
rootGroup.append(...group.children);
});
return exportPDF(rootGroup, { paperSize: ["8.5in", "11in"] });
})
.then(dataUri => {
saveAs(dataUri, this.fileName);
setTimeout(() => {
console.log("exportGrids Success =========================");
});
})
.catch(error => {
console.log("exportGrids error =========================");
});
}
ngAfterViewInit(): void {
// this.exportGrids();
}
}
Comments
Post a Comment