Angular Angular 리포트 뷰어 가져오기
페이지 정보
작성자 GrapeCity
본문
관련링크
새 Angular 응용 프로그램을 가장 쉽게 만들기 위해 권장되는 방법은 를 사용하는 것입니다. 명령 프롬프트 또는 터미널에서 다음 명령을 실행하여 기본 옵션이 포함된 Angular 응용 프로그램을 만듭니다. 자세한 내용은 사이트의 을 참조하십시오.
ng new arjs-angular-viewer-app --defaults
ActivereportsJS npm 패키지 설치
GrapeCity는 npm 패키지를 통해 Angular 보고서 뷰어 구성 요소를 배포합니다. 기본 패키지는 핵심 기능을 제공합니다. 이 패키지의 최신 버전을 설치하려면 응용 프로그램의 루트 폴더에서 다음 명령을 실행합니다.
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-viewer.css";
ActivereportsJS Angular 모듈 등록
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 {}
ActiveReportsJS 보고서를 응용 프로그램에 추가하기
ActiveReportsJS는 보고서 템플릿 파일에 및 rdlx-json
확장자를 사용합니다. src\assets
폴더에서 report.rdlx-json
이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.
{ "Type": "report", "Body": { "Name": "Body", "Type": "section", "ReportItems": [ { "Type": "textbox", "Name": "textbox1", "Style": { "FontSize": "18pt" }, "Value": "Hello, ActiveReportsJS Viewer", "Height": "10in" } ] }, "Name": "Report" }
ActiveReportsJS Angular 리포트 뷰어 컴포넌트를 응용 프로그램에 추가하기
src\app\app.component.ts
를 열고 내용을 다음 코드로 바꿉니다. 구성 요소의 템플릿은 를 사용합니다. init
이벤트의 처리기는 이전 단계에서 만든 report.rdlx-json
을 엽니다. 또한 구성 요소는 를 삽입하여 사용자가 보고서 뷰어에서 보고서를 지원되는 형식으로 내보낼 수 있게 합니다.
import { Component, ViewChild } from '@angular/core'; import { AR_EXPORTS, HtmlExportService, PdfExportService, ViewerComponent, XlsxExportService, } 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: XlsxExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; onViewerInit() { this.reportViewer.open('assets/report.rdlx-json'); } }
src\app\app.component.css
파일을 열고 viewer-host
요소의 스타일을 추가합니다.
#viewer-host { width: 100%; height: 100vh; }
응용 프로그램 실행 및 테스트
npm start
또는 yarn start
또는 ng serve
명령을 사용하여 응용 프로그램을 실행합니다. 응용 프로그램이 시작되면 ActiveReportsJS 뷰어 구성 요소가 페이지에 나타납니다. 뷰어에는 “안녕하세요, ActiveReportsJS 뷰어입니다”라는 텍스트가 표시된 보고서가 나타납니다. 도구 모음의 버튼을 사용하거나 사용 가능한 서식 중 하나로 보고서를 내보내 기본 기능을 테스트할 수 있습니다.
관련 링크
댓글목록
등록된 댓글이 없습니다.