|
1 | 1 | import { Component, OnInit, ViewChild } from '@angular/core'; |
2 | | -import { IDataOptions, IDataSet, PivotView } from '@syncfusion/ej2-angular-pivotview'; |
| 2 | +import { IDataOptions, IDataSet, PivotView, PDFExportService, IAxisSet, BeforeExportEventArgs } from '@syncfusion/ej2-angular-pivotview'; |
| 3 | +import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings'; |
3 | 4 | import { Button } from '@syncfusion/ej2-buttons'; |
4 | 5 | import { PdfExportProperties } from '@syncfusion/ej2-grids'; |
5 | | -import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export'; |
| 6 | +import { PdfTrueTypeFont, PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf-export'; |
6 | 7 | import { pivot_Data, base64AlgeriaFont } from '../data'; |
| 8 | +import { Observable } from 'rxjs'; |
7 | 9 |
|
8 | 10 | @Component({ |
9 | 11 | selector: 'app-container', |
| 12 | + providers: [PDFExportService], |
10 | 13 | templateUrl: `./adding-custom-font.component.html` |
11 | 14 | }) |
12 | 15 | export class AddingCustomFontComponent implements OnInit { |
13 | 16 | public width: string; |
14 | 17 | public dataSourceSettings: IDataOptions; |
| 18 | + public gridSettings?: GridSettings; |
15 | 19 | public button: Button; |
16 | 20 | public pdfExportProperties: PdfExportProperties; |
| 21 | + public observable = new Observable(); |
17 | 22 |
|
18 | | - @ViewChild('pivotview', {static: false}) |
19 | | - public pivotGridObj: PivotView; |
20 | | - |
21 | | - ngOnInit(): void { |
22 | | - |
23 | | - this.width = "100%"; |
24 | | - |
25 | | - this.dataSourceSettings = { |
26 | | - dataSource: pivot_Data as IDataSet[], |
27 | | - columns: [{ name: 'Year', caption: 'Production Year' }], |
28 | | - values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }], |
29 | | - rows: [{ name: 'Country' }, { name: 'Products' }], |
30 | | - formatSettings: [{ name: 'Amount', format: 'C0' }], |
31 | | - filters: [], |
32 | | - }; |
33 | | - |
34 | | - this.button = new Button({ isPrimary: true }); |
35 | | - this.button.appendTo('#export'); |
36 | | - |
37 | | - this.button.element.onclick = (): void => { |
38 | | - this.pdfExportProperties = { |
39 | | - theme: { |
40 | | - header: {font: new PdfTrueTypeFont(base64AlgeriaFont, 11) }, |
41 | | - caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) }, |
42 | | - record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) } |
43 | | - } |
44 | | - }; |
45 | | - this.pivotGridObj.pdfExport(this.pdfExportProperties); |
46 | | - }; |
| 23 | + @ViewChild('pivotview', { static: false }) |
| 24 | + public pivotGridObj: PivotView; |
| 25 | + |
| 26 | + onPdfCellRender(args: any) { |
| 27 | + if ((args.pivotCell as IAxisSet).axis === 'value' && (args.pivotCell as IAxisSet).isGrandSum !== true) { |
| 28 | + args.style = { textBrushColor: '#000000' }; |
| 29 | + } |
| 30 | + |
| 31 | + // The width of the pivot table row header can be changed here. |
| 32 | + if (args.pivotCell && args.pivotCell.axis == 'row') { |
| 33 | + args.column.width = (this.pivotGridObj.gridSettings.columnWidth as number) * 0.5; |
47 | 34 | } |
| 35 | + // The width of the pivot table column can be changed here. |
| 36 | + args.column.width = (this.pivotGridObj.gridSettings.columnWidth as number) * 0.6; |
| 37 | + // The height of the pivot table row can be changed here. |
| 38 | + args.cell.height = this.pivotGridObj.gridSettings.rowHeight; |
| 39 | + } |
| 40 | + |
| 41 | + beforeExport(args: BeforeExportEventArgs) { |
| 42 | + args.width = 900; |
| 43 | + } |
| 44 | + |
| 45 | + load() { |
| 46 | + this.pivotGridObj.allowEngineExport = true; |
| 47 | + } |
| 48 | + |
| 49 | + ngOnInit(): void { |
| 50 | + |
| 51 | + this.width = "100%"; |
| 52 | + |
| 53 | + this.dataSourceSettings = { |
| 54 | + dataSource: pivot_Data as IDataSet[], |
| 55 | + columns: [{ name: 'Year', caption: 'Production Year' }], |
| 56 | + values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }], |
| 57 | + rows: [{ name: 'Country' }, { name: 'Products' }], |
| 58 | + formatSettings: [{ name: 'Amount', format: 'C0' }], |
| 59 | + filters: [], |
| 60 | + }; |
| 61 | + |
| 62 | + this.gridSettings = { |
| 63 | + pdfQueryCellInfo: this.observable.subscribe((args: any) => { |
| 64 | + if ((args.data as IAxisSet).axis === 'row') { |
| 65 | + if ((args.data as IAxisSet).type === 'grand sum') { |
| 66 | + args.style = { backgroundColor: '#e8e2d2' }; |
| 67 | + } else { |
| 68 | + args.style = { backgroundColor: '#e8e2d2' }; |
| 69 | + } |
| 70 | + } else if ((args.data as IAxisSet).axis === 'value' && (args.data as IAxisSet).isGrandSum == true) { |
| 71 | + args.style = { backgroundColor: '#e8e2d2' }; |
| 72 | + } |
| 73 | + }) as any, |
| 74 | + pdfHeaderQueryCellInfo: this.observable.subscribe((args: any) => { |
| 75 | + if ((args.gridCell as IAxisSet).axis === 'column') { |
| 76 | + if ((args.gridCell as IAxisSet).type === 'grand sum') { |
| 77 | + args.style = { backgroundColor: '#e8f4d2' }; |
| 78 | + } else { |
| 79 | + args.style = { backgroundColor: '#e8e2d2' }; |
| 80 | + } |
| 81 | + } |
| 82 | + }) as any |
| 83 | + } as GridSettings; |
| 84 | + |
| 85 | + this.button = new Button({ isPrimary: true }); |
| 86 | + this.button.appendTo('#export'); |
| 87 | + |
| 88 | + this.button.element.onclick = (): void => { |
| 89 | + this.pdfExportProperties = { |
| 90 | + theme: { |
| 91 | + header: { |
| 92 | + font: new PdfStandardFont( |
| 93 | + PdfFontFamily.TimesRoman, |
| 94 | + 11, |
| 95 | + PdfFontStyle.Bold |
| 96 | + ), |
| 97 | + fontColor: '#000080', |
| 98 | + bold: true, |
| 99 | + border: { color: '#5A5A5A', dashStyle: 'Solid' }, |
| 100 | + }, |
| 101 | + record: { |
| 102 | + font: new PdfTrueTypeFont(base64AlgeriaFont, 10), |
| 103 | + fontColor: '#B22222', |
| 104 | + bold: true, |
| 105 | + }, |
| 106 | + }, |
| 107 | + header: { |
| 108 | + fromTop: 0, |
| 109 | + height: 300, |
| 110 | + contents: [ |
| 111 | + { |
| 112 | + type: 'Text', |
| 113 | + value: "Product Sales Report", |
| 114 | + position: { x: 300, y: 0 }, |
| 115 | + size: { width: 100, height: 100 }, |
| 116 | + style: { textBrushColor: '#000080', fontSize: 32, dashStyle: 'Solid', hAlign: 'Center' } |
| 117 | + } |
| 118 | + ] |
| 119 | + }, |
| 120 | + footer: { |
| 121 | + fromBottom: 160, |
| 122 | + height: 150, |
| 123 | + contents: [ |
| 124 | + { |
| 125 | + type: 'Line', |
| 126 | + style: { textBrushColor: '#000080', penSize: 1, dashStyle: 'Solid' }, |
| 127 | + points: { x1: 0, y1: 4, x2: 685, y2: 4 } |
| 128 | + }, |
| 129 | + { |
| 130 | + type: 'PageNumber', |
| 131 | + pageNumberType: 'Arabic', |
| 132 | + format: 'Page {$current} of {$total}', |
| 133 | + position: { x: 0, y: 25 }, |
| 134 | + style: { textBrushColor: '#02007a', fontSize: 15 } |
| 135 | + } |
| 136 | + ] |
| 137 | + } |
| 138 | + }; |
| 139 | + this.pivotGridObj.pdfExport(this.pdfExportProperties); |
| 140 | + }; |
| 141 | + } |
48 | 142 | } |
0 commit comments