Angular용 ActiveReportsJS 보고서 뷰어 래퍼

이 페이지에서는 Angular용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Angular 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.

ActiveReportsJS Angular NPM 패키지

@mescius/activereportsjs-angular npm 패키지를 통해 Angular용 ActiveReportsJS 보고서 뷰어 래퍼 컴포넌트가 포함된 라이브러리를 배포합니다. 기본 @mescius/activereportsjs 패키지는 핵심 기능을 제공합니다.

ActiveReportsJS Angular 모듈

Angular용 ActiveReportsJS 보고서 디자이너 래퍼는 ActiveReportsModule Angular 모듈에 있으므로, 응용 프로그램의 루트 모듈 또는 ActiveReportsJs 보고서 뷰어와 함께 사용하도록 되어 있는 다른 모듈로 가져와야 합니다. 예를 들어 다음과 같습니다.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ActiveReportsModule } from "@mescius/activereportsjs-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에서 참조할 수 있습니다. 뷰어 컴포넌트의 다음 입력 속성을 사용하여 모양을 설정할 수 있습니다.

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오.

또한 뷰어 컴포넌트는 다음 출력 속성을 제공합니다.

마지막으로, 부모 컴포넌트는 ViewChild 삽입을 사용하여 뷰어 클래스 인스턴스의 메서드 및 속성에 액세스할 수 있습니다.

@ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;

ActiveReportJS 내보내기 서비스

ActiveReportJS Angular 모듈에는 PDF, 표 형식 데이터 또는 HTML 형식으로 보고서를 내보낼 수 있는 서비스가 포함되어 있습니다. 이러한 내보내기 서비스는 뷰어의 호스트 컴포넌트, 해당 모듈 또는 응용 프로그램의 루트 모듈에서 삽입해야 합니다. 다음은 루트 모듈에서 내보내기 서비스를 삽입하는 코드의 예입니다.

import {  AR_EXPORTS,  PdfExportService,  HtmlExportService,  TabularDataExportService} from "@mescius/activereportsjs-angular";
@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: TabularDataExportService,
    multi: true
  }
],
  bootstrap: [AppComponent]
})
export class AppModule {}

또한 뷰어 컴포넌트의 availableExports 입력 속성을 사용하여 사용 가능한 내보내기 목록을 제한할 수 있습니다. 일부 보고서의 경우 사용자 인터페이스에만 PDF 내보내기를 두는 것이 좋습니다.

관련 링크

• 라이브 데모

• 사용자 정의

• 지역화

• 인쇄

• 내보내기

• 테마