Exportador de PDF

    El servicio Ignite UI for Angular PDF Exporter ofrece una funcionalidad potente para exportar datos en formato PDF desde diversas fuentes, incluyendo matrices de datos en bruto y componentes avanzados de la cuadrícula como IgxGrid, IgxTreeGrid, IgxHierarchicalGrid e IgxPivotGrid. La funcionalidad de exportación está incluida en laIgxPdfExporterService clase, que permite una exportación de datos fluida a formato PDF con funciones completas como soporte para documentos de varias páginas, saltos automáticos de página y opciones de formato personalizables.

    Angular PDF Exporter Example

    Usage

    Para empezar a usar el exportador de PDF Ignite UI, primero importalosIgxPdfExporterService en tu componente:

    import { IgxPdfExporterService } from 'igniteui-angular/grids/core';

// import { IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

@Component({
  ...
})
export class AppComponent { ... }

    Para iniciar un proceso de exportación, puedes usar un manejador de clic de botón en la plantilla de tu componente.

    <button (click)="exportButtonHandler()">Export Data to PDF</button>

    Puedes acceder a laIgxPdfExporterService función usando lainject función. Para exportar datos en formato PDF, necesitas invocar el método delexportData servicio exportador. Este método acepta los datos que quieres exportar como su primer argumento, y unaIgxPdfExporterOptions instancia como su segundo argumento, lo que te permite configurar el proceso de exportación.

    Aquí está el código que ejecutará el proceso de exportación en el archivo TypeScript del componente:

    // component.ts

...
import { Component, inject, signal } from '@angular/core';
import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';

// import { IgxPdfExporterService, IgxPdfExporterOptions } from '@infragistics/igniteui-angular/grids/core'; for licensed package
...

public localData = signal([
  { Name: 'Eric Ridley', Age: '26' },
  { Name: 'Alanis Brook', Age: '22' },
  { Name: 'Jonathan Morris', Age: '23' }
]);

private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions('ExportedDataFile'));
}

    Si todo ha ido bien, deberías ver un botón de exportación. Al pulsar, se activa el proceso de exportación y el navegador descarga un archivo llamado "ExportedDataFile.pdf" que contiene los datos dellocalData array en formato PDF.

    Customizing the Exported Content

    En los ejemplos anteriores, el servicio PDF Exporter exporta todos los datos disponibles. Sin embargo, hay situaciones en las que quizá quieras saltarte la exportación de una fila o de una columna entera. Para lograrlo, puedes suscribirte a loscolumnExporting eventos y/rowExporting o e/o que se activan para cada columna y/o fila respectivamente. Luego puedes cancelar la exportación estableciendo la propiedad delcancel objeto argumento del evento comotrue.

    El siguiente ejemplo excluye una columna de la exportación si su encabezado es "Edad" y su índice es 1:

    // component.ts

this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedDataFile'));

    PDF Export Options

    LaIgxPdfExporterOptions clase ofrece varias propiedades para personalizar la exportación en PDF:

    • Orientación de página: Especifica la orientación de la página (portraitolandscape). El predeterminado lo eslandscape.
    • Tamaño de página: Especifica el tamaño de página (a3,a4,a5,letter,legal, etc.). El predeterminado lo esa4.
    • mostrarTableBorders: Determina si mostrar los bordes de la tabla. El predeterminado lo estrue.
    • fontSize: Establece el tamaño de fuente para el contenido de la tabla. El predeterminado lo es10.

    El siguiente ejemplo demuestra cómo configurar estas opciones:

    // component.ts

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.pageOrientation = 'portrait';
  options.pageSize = 'letter';
  options.showTableBorders = true;
  options.fontSize = 12;

  this.pdfExportService.exportData(this.localData, options);
}

    Known Limitations

    Limitación Descripción
    Formatos PDF amplios Las cuadrículas muy anchas pueden forzar que las columnas del PDF se reduzcan para ajustarse a la página. Aplica anchos de columna explícitos o oculta campos de baja prioridad antes de exportar para mantener el documento legible.

    API References

    El servicio PDF Exporter tiene algunas APIs más por explorar, que se enumeran a continuación.

    Componentes adicionales que se utilizaron:

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.