[{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
        
(Showing Draft Content)

Angular용 ActiveReportsJS 보고서 뷰어 래퍼

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

ActiveReportsJS Angular NPM 패키지

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

ActiveReportsJS Angular 모듈

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

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 뷰어 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 지역화 페이지를 참조하십시오.
panelsLocation 'sidebar' 'toolbar' 'sidebar' 검색 및 내보내기 UI의 위치를 설정합니다.
exportsSettings Object 내보내기 설정을 지정합니다. 자세한 내용은 내보내기 설정 페이지를 참조하십시오.
availableExports 문자열의 배열 [] 사용할 수 있는 내보내기 필터 목록을 설정합니다. 자세한 내용은 ActiveReportJS 내보내기 서비스 섹션을 참조하십시오.
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를 완전히 덮어쓸 수 있습니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오.

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

이벤트 매개 변수 설명
init 뷰어 컴포넌트가 로드되면 발생합니다.
reportLoaded ReportLoadEventArgs 렌더링 시작 전 보고서가 뷰어 컴포넌트에서 로드되는 경우 발생합니다.
documentLoaded DocumentLoadEventArgs 보고서 렌더링이 완료되면 발생합니다.

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

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

ActiveReportJS 내보내기 서비스

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

@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 내보내기를 두는 것이 좋습니다.

관련 링크