Exportador de PDF

    O serviço Ignite UI for Angular PDF Exporter oferece funcionalidades poderosas para exportar dados em formato PDF de várias fontes, incluindo arrays de dados brutos e componentes avançados de grade como IgxGrid, IgxTreeGrid, IgxHierarchicalGrid e IgxPivotGrid. A funcionalidade de exportação está encapsulada naIgxPdfExporterService classe, que permite a exportação contínua de dados para formato PDF com recursos abrangentes, incluindo suporte a documentos de várias páginas, quebras automáticas de página e opções de formatação personalizáveis.

    Angular PDF Exporter Example

    Usage

    Para começar a usar o Ignite UI PDF Exporter, primeiro importe paraIgxPdfExporterService o seu 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 um processo de exportação, você pode usar um handler de clique de botão no template do seu componente.

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

    Você pode acessar usandoIgxPdfExporterService ainject função. Para exportar dados em formato PDF, você precisa invocar o método doexportData serviço exportador. Esse método aceita os dados que você deseja exportar como seu primeiro argumento, e umaIgxPdfExporterOptions instância como seu segundo argumento, o que permite configurar o processo de exportação.

    Aqui está o código que executará o processo de exportação no arquivo TypeScript do 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'));
}

    Se tudo correu bem, você deve ver um botão de exportação. Ao pressionar, ele aciona o processo de exportação e o navegador baixa um arquivo chamado "ExportedDataFile.pdf" que contém os dados dolocalData array em formato PDF.

    Customizing the Exported Content

    Nos exemplos acima, o serviço PDF Exporter exporta todos os dados disponíveis. No entanto, há situações em que você pode querer pular a exportação de uma linha ou de uma coluna inteira. Para isso, você pode assinar oscolumnExporting eventos e/ourowExporting eventos, que são disparados para cada coluna e/ou cada linha, respectivamente. Você pode então cancelar a exportação definindo a propriedade do objetocancel do argumento de evento paratrue.

    O exemplo a seguir exclui uma coluna da exportação se seu cabeçalho for "Idade" e seu índice for 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

    AIgxPdfExporterOptions classe oferece várias propriedades para personalizar a exportação em PDF:

    • Orientação da página: Especifica a orientação da página (portraitoulandscape). O padrão élandscape.
    • Tamanho da página: Especifica o tamanho da página (a3,a4,a5,letter,legal, etc.). O padrão éa4.
    • mostrarBordasTabelas: Determina se exibir as bordas da tabela. O padrão étrue.
    • fontSize: Define o tamanho da fonte para o conteúdo da tabela. O padrão é10.

    O exemplo a seguir demonstra como configurar essas opções:

    // 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

    Limitação Descrição
    Layouts PDF amplos Grades muito largas podem forçar colunas do PDF a encolherem para caber na página. Aplique larguras de coluna explícitas ou oculte campos de baixa prioridade antes de exportar para manter o documento legível.

    API References

    O serviço PDF Exporter tem mais algumas APIs para explorar, que estão listadas abaixo.

    Componentes adicionais que foram usados:

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.