Add pdf export button (#3836)

Author: mtsvyatkova

src/app/pivot-grid/pivot-export/pivot-export.component.html

@@ -1,7 +1,9 @@
 <div class="pivotgrid-sample">
     <div class="button-container">
-        <button igxButton="contained" (click)="exportButtonHandler()">Export To Excel</button>
-        Press the button to export the Pivot Grid as .xlsx file.
+        <div class="button-container__actions">
+            <button igxButton="contained" (click)="exportButtonHandler()">Export To Excel</button>
+            <button igxButton="contained" (click)="exportPdfButtonHandler()">Export To PDF</button>
+        </div>
     </div>
 
     <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"

src/app/pivot-grid/pivot-export/pivot-export.component.scss

@@ -5,8 +5,14 @@
     height: 80%;
 
     .button-container {
-        align-items: flex-start;
         margin: 25px auto;
+
+        &__actions {
+            display: flex;
+            flex-direction: row;
+            gap: 16px;
+            align-items: center;
+        }
     }
 
     igx-pivot-grid {

src/app/pivot-grid/pivot-export/pivot-export.component.ts

@@ -1,6 +1,16 @@
 import { Component, ViewChild, inject } from "@angular/core";
 
-import { IPivotConfiguration, IgxPivotDateDimension, IgxPivotNumericAggregate, PivotAggregation, IgxExcelExporterOptions, IgxExcelExporterService } from 'igniteui-angular/grids/core';
+import {
+    IPivotConfiguration,
+    IgxPivotDateDimension,
+    IgxPivotNumericAggregate,
+    PivotAggregation,
+    IgxExcelExporterOptions,
+    IgxExcelExporterService,
+    IgxPdfExporterService,
+    IgxPdfExporterOptions,
+    IColumnExportingEventArgs
+} from 'igniteui-angular/grids/core';
 import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
 import { SALES_DATA } from "../../data/dataToAnalyze";
@@ -40,9 +50,10 @@ export class IgxTotalSaleAggregate {
 })
 export class PivotExportComponent {
     private excelExportService = inject(IgxExcelExporterService);
+    private pdfExportService = inject(IgxPdfExporterService);
 
     @ViewChild(IgxPivotGridComponent, { static: true }) public grid: IgxPivotGridComponent;
-    
+
     public data = SALES_DATA;
 
     public pivotConfig: IPivotConfiguration = {
@@ -91,7 +102,7 @@ export class PivotExportComponent {
                     aggregator: IgxPivotNumericAggregate.sum,
                     label: 'Sum'
                 }],
-                enabled: true,
+                enabled: false,
                 formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
             },
             {
@@ -124,4 +135,20 @@ export class PivotExportComponent {
     public exportButtonHandler() {
         this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
     }
+
+    public exportPdfButtonHandler() {
+        const pdfOptions = new IgxPdfExporterOptions('ExportedDataFile');
+
+        this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
+            const header = args.header || '';
+
+            // Cancel if it's a quarter (Q1-Q4)
+            // This makes the PDF more readable by excluding less important columns
+            if (/Q[1-4]/i.test(header)) {
+                args.cancel = true;
+            }
+        });
+
+        this.pdfExportService.export(this.grid, pdfOptions);
+    }
 }