Angular 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 구성 요소 사용

Angular 응용 프로그램 만들기

새 Angular 응용 프로그램을 가장 쉽게 만들기 위해 권장되는 방법은 Angular CLI를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 Angular 응용 프로그램을 만듭니다. 자세한 내용은 Angular 사이트의 옵션을 참조하십시오.

ng new arjs-angular-designer-app --defaults

ActivereportsJS npm 패키지 설치

GrapeCity는 @grapecity/activereports-angular npm 패키지를 통해 Angular 보고서 디자이너 컴포넌트를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다. 이러한 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.

npm install @grapecity/activereports-angular @grapecity/activereports

yarn을 사용하는 경우:

yarn add @grapecity/activereports-angular @grapecity/activereports

ActiveReportsJS 스타일 가져오기

src\styles.css 파일을 열고 다음 코드를 추가합니다. 이렇게 하면 기본 보고서 디자이너 컴포넌트 스타일을 가져옵니다.

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-designer.css";

ActivereportsJS Angular 모듈 등록

src\app\app.module.ts 파일을 열고 내용을 다음 코드로 바꿉니다. 이 코드는 표준 모듈 외에 ActiveReportsModule 모듈도 등록합니다.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActiveReportsModule } from '@grapecity/activereports-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ActiveReportsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

ActiveReportsJS 보고서를 응용 프로그램에 추가

ActiveReportsJS는 보고서 템플릿 파일에 JSON 형식 및 rdlx-json 확장자를 사용합니다. src\assets 폴더에서 report.rdlx-json이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

ActiveReportsJS Angular 보고서 디자이너를 응용 프로그램에 추가

src\app\app.component.ts를 열고 내용을 다음 코드로 바꿉니다. 컴포넌트 템플릿은 Angular 보고서 디자이너 컴포넌트를 사용합니다. 디자이너 컴포넌트의 입력 report 속성은 이전 단계에서 만든 report.rdlx-json을 가리킵니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
    '<div id="designer-host"><gc-activereports-designer [report]="report"> </gc-activereports-designer></div>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  report = { id: 'assets/report.rdlx-json', displayName: 'my report' };
}

디자이너 호스트 요소의 스타일을 src\app\app.component.css에 추가합니다.

#designer-host {
  width: 100%;
  height: 100vh;
}

응용 프로그램 실행 및 테스트

npm start 또는 yarn start 또는 ng serve 명령을 사용하여 응용 프로그램을 실행합니다. ActiveReportsJS 디자이너 컴포넌트가 응용 프로그램의 시작 페이지에 나타나고 보고서 디자인을 표시합니다. 보고서 항목을 추가하고 해당 속성을 설정하며 데이터 소스를 생성하는 등의 방법으로 기본 기능을 테스트합니다. 보고서 디자이너 컴포넌트를 사용하는 방법에 대한 자세한 내용은 개발자 가이드 및 온라인 데모를 참조하십시오.