Add PDF exporter sample (#3826)

* fix(pdf): add exportData sample

Author: mtsvyatkova

live-editing/configs/ExportPdfConfigGenerator.ts

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Config, IConfigGenerator } from 'igniteui-live-editing';
+import { BaseAppConfig } from './BaseConfig';
+
+export class ExportPdfConfigGenerator implements IConfigGenerator {
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        configs.push(new Config({
+            component: 'PdfExportComponent',
+            appConfig: BaseAppConfig
+        }));
+
+        return configs;
+    }
+}

live-editing/generators/ConfigGenerators.ts

@@ -24,6 +24,7 @@ import { DropDownConfigGenerator } from '../configs/DropDownConfigGenerator';
 import { ExpansionPanelConfigGenerator } from '../configs/ExpansionPanelConfigGenerator';
 import { ExportCsvConfigGenerator } from '../configs/ExportCsvConfigGenerator';
 import { ExportExcelConfigGenerator } from '../configs/ExportExcelConfigGenerator';
+import { ExportPdfConfigGenerator } from '../configs/ExportPdfConfigGenerator';
 import { ForConfigGenerator } from '../configs/ForConfigGenerator';
 import { GridConfigGenerator } from '../configs/GridConfigGenerator';
 import { HierarchicalGridConfigGenerator } from '../configs/HierarchicalGridConfigGenerator';
@@ -71,6 +72,7 @@ export const CONFIG_GENERATORS =
         DragAndDropConfigGenerator,
         ExportCsvConfigGenerator,
         ExportExcelConfigGenerator,
+        ExportPdfConfigGenerator,
 
         // containers:
         AccordionConfigGenerator,

src/app/services/export-pdf/pdf-export.component.html

@@ -0,0 +1,4 @@
+<p>
+    Press the "Export Data" button below to export an array as a .pdf file.<br />
+</p>
+<button igxButton="contained" (click)="exportButtonHandler()">Export Data</button><br />

src/app/services/export-pdf/pdf-export.component.scss

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { PdfExportComponent } from './pdf-export.component';
+
+describe('PdfExportComponent', () => {
+    let component: PdfExportComponent;
+    let fixture: ComponentFixture<PdfExportComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [PdfExportComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(PdfExportComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/services/export-pdf/pdf-export.component.spec.ts

@@ -0,0 +1,23 @@
+import { Component, inject, signal } from '@angular/core';
+import { IgxPdfExporterOptions, IgxPdfExporterService } from 'igniteui-angular/grids/core';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+@Component({
+    selector: 'app-pdf-export',
+    styleUrls: ['./pdf-export.component.scss'],
+    templateUrl: './pdf-export.component.html',
+    imports: [IgxButtonDirective]
+})
+export class PdfExportComponent {
+  private pdfExportService = inject(IgxPdfExporterService);
+
+  public localData = signal([
+    { Name: 'Eric Ridley', Age: '26' },
+    { Name: 'Alanis Brook', Age: '22' },
+    { Name: 'Jonathan Morris', Age: '23' }
+  ]);
+
+  public exportButtonHandler() {
+    this.pdfExportService.exportData(this.localData(), new IgxPdfExporterOptions('ExportFileFromData'));
+  }
+}

src/app/services/export-pdf/pdf-export.component.ts

@@ -5,6 +5,7 @@ export const servicesRoutesData = {
     'export-excel': { displayName: 'Excel Export Raw Data', parentName: 'Excel Export' },
     'export-excel-sample-1': { displayName: 'Excel Export Grid', parentName: 'Excel Export' },
     'export-excel-tree-grid-sample': { displayName: 'Excel Export TreeGrid', parentName: 'Excel Export' },
+    'export-pdf': { displayName: 'PDF Export Raw Data', parentName: 'PDF Export' },
     'localization-sample-1': { displayName: 'Localize one component', parentName: 'Localization' },
     'localization-sample-2': { displayName: 'Localize All', parentName: 'Localization' },
     'localization-sample-3': { displayName: 'Localize partially', parentName: 'Localization' },

src/app/services/services-routes-data.ts

@@ -12,6 +12,7 @@ import { LocalizationSample2Component } from './localization-samples/localizatio
 import { LocalizationSample3Component } from './localization-samples/localization-sample-3/localization-sample-3.component';
 import { servicesRoutesData } from './services-routes-data';
 import { TransactionBaseComponent } from './transaction/transaction-base/transaction-base.component';
+import { PdfExportComponent } from './export-pdf/pdf-export.component';
 // tslint:enable:max-line-length
 
 export const ServicesRoutes: Routes = [
@@ -40,6 +41,11 @@ export const ServicesRoutes: Routes = [
         data: servicesRoutesData['export-excel-sample-1'],
         path: 'export-excel-sample-1'
     },
+    {
+        component: PdfExportComponent,
+        data: servicesRoutesData['export-pdf'],
+        path: 'export-pdf'
+    },
     {
         component: TreeGridExcelExportSample1Component,
         data: servicesRoutesData['export-excel-tree-grid-sample'],