# Angular용 ActiveReportsJS 보고서 뷰어 래퍼 ## Content 이 페이지에서는 Angular용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Angular 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 [시작하기](/activereportsjs/docs/v2.2/GettingStarted/QuickStart/QuickStart-Angular) 자습서를 확인하십시오. ### ActiveReportsJS Angular NPM 패키지 [@grapecity/activereports-angular](https://www.npmjs.com/package/@grapecity/activereports-angular) npm 패키지를 통해 Angular용 ActiveReportsJS 보고서 뷰어 래퍼 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 [@grapecity/activereports](https://www.npmjs.com/package/@grapecity/activereports) 패키지는 핵심 기능을 제공합니다. ### ActiveReportsJS Angular 모듈 Angular용 ActiveReportsJS 보고서 디자이너 래퍼는 `ActiveReportsModule` Angular 모듈에 있으므로, 응용 프로그램의 루트 모듈 또는 ActiveReportsJs 보고서 뷰어와 함께 사용하도록 되어 있는 다른 모듈로 가져와야 합니다. 예를 들어 다음과 같습니다. ```javascript import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { ActiveReportsModule } from "@grapecity/activereports-angular"; import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ActiveReportsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` ### ActiveReportsJS Angular 뷰어 컴포넌트 ActiveReportsJS Angular 뷰어 컴포넌트는 `gc-activereports-viewer` 태그를 사용하여 HTML에서 참조할 수 있습니다. 뷰어 컴포넌트의 다음 입력 속성을 사용하여 모양을 설정할 수 있습니다. | 속성 | 유형 | 기본값 | 설명 | | ---------------- | --------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | language | string | | 뷰어 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 [지역화](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Localization) 페이지를 참조하십시오. | | panelsLocation | 'sidebar' | 'toolbar' | 'sidebar' | 검색 및 내보내기 UI의 위치를 설정합니다. | | exportsSettings | Object | | 내보내기 설정을 지정합니다. 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. | | availableExports | 문자열의 배열 | \[] | 사용할 수 있는 내보내기 필터 목록을 설정합니다. 자세한 내용은 [ActiveReportJS 내보내기 서비스 섹션](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Angular-Component#activereportjs-export-services)을 참조하십시오. | | mouseMode | 'Pan' | 'Selection' | Pan | 뷰어 컴포넌트의 마우스 모드를 설정합니다. | | renderMode | 'Galley' | 'Paginated' | Paginated | 뷰어 컴포넌트의 렌더링 모드를 설정합니다. | | viewMode | 'Continuous' | 'SinglePage' | Continuous | 여러 페이지 보고서를 표시하는 모드를 설정합니다. | | zoom | 'FitWidth' | 'FitPage' | number | 100 | 표시된 페이지의 확대/축소 수준을 설정합니다. | | fullscreen | boolean | false | 이 속성이 `true`로 설정되어 있으면 뷰어 컴포넌트가 전체 화면 모드로 표시됩니다. | | toolbarVisible | boolean | true | 뷰어 컴포넌트의 도구 모음 표시 여부를 설정합니다. | | sidebarVisible | boolean | true | 뷰어 컴포넌트의 세로 막대 표시 여부를 설정합니다. | | errorHandler | function | null | 뷰어 컴포넌트에서 오류가 발생한 경우 호출되는 콜백입니다. | 이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 [사용자 정의 페이지](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Customization)를 참조하십시오. 또한 뷰어 컴포넌트는 다음 출력 속성을 제공합니다. | 이벤트 | 매개 변수 | 설명 | | -------------- | ------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | | init | | 뷰어 컴포넌트가 로드되면 발생합니다. | | reportLoaded | [ReportLoadEventArgs](@api/modules/reportviewer.html#reportloadeventargs) | 렌더링 시작 전 보고서가 뷰어 컴포넌트에서 로드되는 경우 발생합니다. | | documentLoaded | [DocumentLoadEventArgs](@api/modules/reportviewer.html#documentloadeventargs) | 보고서 렌더링이 완료되면 발생합니다. | 마지막으로, 부모 컴포넌트는 ```ViewChild``` 삽입을 사용하여 [뷰어 클래스 인스턴스의 메서드 및 속성](@api/classes/reportviewer.viewer.html)에 액세스할 수 있습니다. ```javascript @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; ``` ### ActiveReportJS 내보내기 서비스 ActiveReportJS Angular 모듈에는 PDF, XLS 또는 HTML 형식으로 보고서를 내보낼 수 있는 서비스가 포함되어 있습니다. 이러한 내보내기 서비스는 뷰어의 호스트 컴포넌트, 해당 모듈 또는 응용 프로그램의 루트 모듈에서 삽입해야 합니다. 다음은 루트 모듈에서 내보내기 서비스를 삽입하는 코드의 예입니다. ```javascript @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ActiveReportsModule], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true }, { provide: AR_EXPORTS, useClass: XlsxExportService, multi: true } ], bootstrap: [AppComponent] }) export class AppModule {} ``` 또한 뷰어 컴포넌트의 ```availableExports``` 입력 속성을 사용하여 사용 가능한 내보내기 목록을 제한할 수 있습니다. 일부 보고서의 경우 사용자 인터페이스에만 PDF 내보내기를 두는 것이 좋습니다. ### 관련 링크 * [라이브 데모](/activereportsjs/demos/features/viewer-integration/angular) * [사용자 정의](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Customization) * [지역화](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Localization) * [인쇄](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Print) * [내보내기](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Export) * [테마](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSViewer/Themes)