ActiveReportsJS는 사용자에게 웹 응용 프로그램의 포함 가능한 컴포넌트를 제공하는 간단하지만 강력한 프런트엔드 리포팅 솔루션입니다. 개발자는 Angular, React, Vue 등의 라이브러리 및 프런트엔드 프레임워크에서 보고서 뷰어 및 디자이너 컴포넌트를 사용하고 수정할 수 있습니다.

지금 아래 링크를 통해 ActiveReportsJS를 다운로드하여 아래 과정을 따라해 보세요! ActiveReportsJS 다운로드하기 

이 튜토리얼에서는 다음 단계에 따라 기본 보고서를 보거나 내보내도록 ActiveReportsJS를 사용하는 Visual Studio Code에서 기본 Angular 프로젝트를 구성하는 방법에 대해 살펴보겠습니다.

• Angular 응용 프로그램 시작하기

• 노드 패키지 관리자 또는 Yarn을 사용하여 ActiveReportsJS 종속성 설치하기

• ARJS Angular 모듈 등록

• CSS 스타일 지정 가져오기

• Angular 응용 프로그램에 ARJS 보고서 파일 추가

• 코드에 Angular 뷰어 컴포넌트 추가

• 프로젝트 실행/디버깅

Angular 응용 프로그램 시작하기

응용 프로그램에서 작업을 시작하려면 시스템(버전 11 이상)에 Angular CLI를 설치해야 합니다. 설치되어 있지 않은 경우 Visual Studio Code 터미널에서 다음 명령을 실행합니다.

npm install -g @angular/cli

이미 Angular 11+ 프로젝트를 만든 경우를 제외하고 처음부터 시작해야 합니다. 먼저 응용 프로그램을 만들 원하는 디렉터리에 있는지 확인합니다. 그 후에는 다음 명령을 Visual Studio Code 터미널에 입력하여 Angular 응용 프로그램을 만듭니다.

ng new arjs-angular-viewer-app –defaults

NPM 또는 Yarn을 사용하여 ActiveReportsJS 종속성 설치하기

프로젝트에 Angular 보고서 뷰어 컴포넌트를 포함하려면 NPM을 통해 ARJS 패키지를 설치하여 시작해야 합니다. 이를 위해 터미널에서 이 명령을 실행하기 전에 VS Code에서 방금 만든 프로젝트 폴더를 열어야 합니다.

npm install @grapecity/activereports-angular

Yarn을 사용하는 경우 다음 명령을 터미널에 붙여 넣습니다.

yarn add @grapecity/activereports-angular

ARJS Angular 모듈 등록

프로젝트에 ActiveReportsModule을 포함하려면 다음 코드를 src/app/app.module.ts 파일에 붙여 넣습니다.

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 {}

CSS 스타일 가져오기

적절한 종속성을 설치하고 보고서 뷰어 모듈을 포함하였으므로 뷰어 컴포넌트 및 UI의 스타일을 지정하도록 몇 가지 코드를 추가할 수 있습니다. 이를 수행하려면 src/styles.css 파일을 열고 다음 코드를 페이지 상단에 추가합니다.

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

보고서 뷰어 컴포넌트를 실제로 Angular 응용 프로그램에 추가하기 전에 몇 가지 스타일 지정을 더 추가해야 합니다. 보고서 뷰어 컴포넌트 호스팅의 환경이 곧 표시되지만 지금은 viewer-host의 ID가 있는 div 요소에 뷰어가 배치된다는 것을 이해하시기 바랍니다. 지금은 다음 코드를 src/app/app.component.css 파일에 복사하여 프로젝트의 CSS 스타일 지정을 완료합니다.

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

Angular 응용 프로그램에 ARJS 보고서 파일 추가

Angular 뷰어 컴포넌트에서 ARJS 보고서 템플릿이 열리므로 기본적으로 표시되는 보고서를 구성해야 합니다. ActiveReportsJS는 보고서 파일에 .rdlx-json의 확장을 사용하므로 Angular 프로젝트에 보고서를 만들거나 추가하기 위해 따를 수 있는 몇 가지 다른 경로가 있습니다. JSON 구문을 사용하여 보고서를 구조화하고 ARJS API를 사용하여 프로그래밍 방식으로 보고서를 만들거나 독립 실행형 보고서 디자이너에서 보고서를 디자인할 수 있습니다.

이 튜토리얼에서는 VS Code 내에서 JSON을 사용하여 파일을 구조화하겠습니다. 새 파일을 src/assets 폴더에 추가하고 report-test.rdlx-json으로 이름을 지정하여 시작해보겠습니다. 이 코드를 파일에 복사하여 보고서 이름 및 기본 텍스트 상자 컨트롤을 구조에 포함해보겠습니다.

{
 "Name": "report-test",
 "Body": {
   "ReportItems": [
    {
       "Type": "textbox",
       "Name": "TextBox1",
       "Value": "Thank you for reading this Angular blog!",
       "Style": {
         "FontSize": "16pt"
      },
       "Width": "8.5in",
       "Height": "2in"
    }
  ]
}
}

코드에 Angular 뷰어 컴포넌트 추가

마지막으로 src/app/app.component.ts 파일 내에서 코드를 대체하여 뷰어 컴포넌트의 설정을 완료하고 방금 만든 보고서 템플릿을 연결해야 합니다. 응용 프로그램이 실행되면 보고서를 표시할 뿐만 아니라 PDF, HTML 및 CSV와 같은 다양한 다수의 형식에 내보낼 수도 있습니다. 이를 app.component.ts 파일에 붙여 넣어 필요한 변경 사항을 만들어보겠습니다.

import { Component, ViewChild } from '@angular/core';
​
import {
 AR_EXPORTS,
 HtmlExportService,
 PdfExportService,
 ViewerComponent,
 TabularDataExportService,
} from '@grapecity/activereports-angular';
​
@Component({
 selector: "app-root",
 template:
   '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
 styleUrls: ["./app.component.css"],
 providers: [
  {
     provide: AR_EXPORTS,
     useClass: PdfExportService,
     multi: true,
  },
  {
     provide: AR_EXPORTS,
     useClass: HtmlExportService,
     multi: true,
  },
  {
     provide: AR_EXPORTS,
     useClass: TabularDataExportService,
     multi: true,
  },
],
})
​
export class AppComponent {
 @ViewChild(ViewerComponent, { static: false }) reportViewer!: ViewerComponent;
 onViewerInit() {
   this.reportViewer.open('assets/report-test.rdlx-json');
}
}

프로젝트 실행/디버깅

로컬 호스트에서 다음 프로젝트를 실행하려면 노드 패키지 관리자를 사용하는 경우 터미널에 npm start 명령을 배치하거나 yarn을 사용하는 경우 yarn start를 배치해야 합니다. 하지만 package.json 파일의 시작 스크립트를 변경하지 않으면 JavaScript 메모리 오류가 발생할 수 있습니다. 이 시작 스크립트를 다음 줄로 바꿔보겠습니다.

"start": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",

이제 계속해서 동일한 명령인 npm start 또는 yarn start로 프로젝트를 실행해보겠습니다. 웹 브라우저를 열고 http://localhost:4200으로 이동합니다. 이제 만든 보고서 파일과 페이지에서 Angular 뷰어 컴포넌트를 볼 수 있습니다. ActiveReportsJS 응용 프로그램에 보고서 뷰어를 성공적으로 추가하였습니다!

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!

• ActiveReportsJS 공식 홈페이지
• ActiveReportsJS 튜토리얼 및 샘플
• ActiveReportsJS Q&A
• ActiveReportsJS FAQ