PDF 익스포터

    Ignite UI for Angular PDF 익스포터 서비스는 IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid와 같은 고급 그리드 컴포넌트를 포함한 다양한 원시 데이터 배열과 고급 그리드 컴포넌트에서 PDF 형식으로 데이터를 내보낼 수 있는 강력한 기능을 제공합니다. 내보내기 기능은 클래스에IgxPdfExporterService 캡슐화되어 있으며, 다중 페이지 문서 지원, 자동 페이지 나누기, 맞춤형 서식 옵션 등 포괄적인 기능과 함께 PDF 형식으로 원활한 데이터 내보내기가 가능합니다.

    Angular PDF Exporter Example

    Usage

    Ignite UI PDF 익스포터 사용을 시작하려면 먼저 컴IgxPdfExporterService 포넌트에 가져오기 바랍니다:

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

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

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

    내보내기 프로세스를 시작하려면 컴포넌트 템플릿에서 버튼 클릭 핸들러를 사용할 수 있습니다.

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

    당신은IgxPdfExporterService 다음에inject 기능. PDF 형식으로 데이터를 내보내려면 내보내기 서비스의exportData 방법. 이 메서드는 내보내고자 하는 데이터를 첫 번째 인자로 받아들이며,IgxPdfExporterOptions 인스턴스를 두 번째 인자로 사용하여 내보내기 과정을 구성할 수 있게 해줍니다.

    다음은 컴포넌트의 TypeScript 파일에서 내보내기 과정을 실행할 코드입니다:

    // 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'));
}

    모든 게 잘 진행된다면 내보내기 버튼이 보일 거예요. 버튼을 누르면 내보내기 과정이 실행되고, 브라우저는 배열에서 데이터를localData PDF 형식으로 담은 "ExportedDataFile.pdf"라는 파일을 다운로드합니다.

    Customizing the Exported Content

    위 예시에서 PDF 익스포터 서비스는 사용 가능한 모든 데이터를 내보냅니다. 하지만 한 행이나 전체 열을 내보내는 것을 건너뛰고 싶은 상황도 있습니다. 이를 위해 각 열과 행마다 각각 발동되는 and/orcolumnExporting 이벤트를rowExporting 구독할 수 있습니다. 이벤트 인자 객체의cancel 속성을 로true 설정하여 내보내기를 취소할 수 있습니다.

    다음 예시는 헤더가 "Age"이고 인덱스가 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

    이 클래스는IgxPdfExporterOptions PDF 내보내기를 사용자 지정할 수 있는 여러 속성을 제공합니다:

    • pageOrientation: 페이지 방향(portrait또는landscape)을 지정합니다. 기본값은 그렇landscape 습니다.
    • pageSize: 페이지 크기a3 (,a4,a5,letter,legal, 등)를 지정합니다. 기본값은 그렇a4 습니다.
    • showTableBorders: 테이블 경계를 표시할지 여부를 결정합니다. 기본값은 그렇true 습니다.
    • fontSize: 테이블 내용의 글꼴 크기를 설정합니다. 기본값은 그렇10 습니다.

    다음 예시는 이러한 옵션을 어떻게 구성하는지 보여줍니다:

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

    한정 설명
    와이드 PDF 레이아웃 매우 넓은 격자는 PDF 열을 페이지에 맞게 축소하게 만들 수 있습니다. 문서를 가독성 있게 유지하기 위해 내보내기 전에 명시적인 열 너비를 적용하거나 낮은 우선순위 필드를 숨기세요.

    API References

    PDF Exporter 서비스에는 아래에 소개된 몇 가지 추가 API가 있습니다.

    사용된 추가 구성요소:

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.