보고서를 정적 자산으로 로드

정적 자산은 웹 응용 프로그램이 축소, 다른 리소스와 번들링 또는 캐시 버스팅 같은 변형을 적용하지 않고 처리하는 리소스입니다. 응용 프로그램 코드에서 컴파일된 응용 프로그램의 루트 폴더에 대한 상대 경로를 사용하여 해당 리소스를 참조할 수 있습니다. 일반적인 정적 자산은 이미지와 글꼴입니다. 다음과 같은 경우 정적 자산을 보고서 템플릿에 사용하는 것이 좋습니다.

보고서 템플릿이 자주 변경되지 않는 경우
보고서를 로드하기 전에 수정할 필요가 없는 경우
보고서 템플릿에 런타임 데이터 바인딩이 필요 없는 경우
직접 다운로드하도록 보고서 템플릿을 노출할 수 있는 경우

Angular 응용 프로그램에서 보고서를 정적 자산으로 로드

Angular 응용 프로그램의 기본 자산 구성에서는 src/assets 폴더를 있는 그대로 출력에 복사합니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 Angular 보고서 뷰어 컴포넌트의 open 메서드에 대한 인수에 상대 보고서 파일 경로를 사용할 수 있습니다.

import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } 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"],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}

이 방법의 단계별 지침은 ActiveReportsJS 보고서 뷰어 Angular 컴포넌트 시작하기 페이지를 참조하십시오.

React 응용 프로그램에서 보고서를 정적 자산으로 로드

React 앱 만들기를 사용하면 개발자가 정적 자산을 public 폴더에 유지할 수 있습니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 React 보고서 뷰어 컴포넌트의 report 속성에 상대 보고서 파일 경로를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

이 방법의 단계별 지침은 ActiveReportsJS 보고서 뷰어 React 컴포넌트 시작하기 페이지를 참조하십시오.

또는 viewer.open 메서드를 통해 보고서 템플릿의 URL을 전달할 수 있습니다.

function App() {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current.Viewer;
    viewerInstance.open('report.rdlx-json');
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};

이 방법을 사용하는 전체 예제는 보고서 로드 라이브 데모를 참조하십시오.

Vue 응용 프로그램에서 보고서를 정적 자산으로 로드

Vue CLI를 사용하면 개발자가 정적 자산을 public 폴더에 유지할 수 있습니다. 따라서 보고서 템플릿을 해당 폴더에 복사한 후 Vue 보고서 뷰어 컴포넌트의 report 속성에 상대 보고서 파일 경로를 사용할 수 있습니다. 예를 들면 다음과 같습니다.

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

이 방법의 단계별 지침은 ActiveReportsJS 보고서 뷰어 Vue 컴포넌트 시작하기 페이지를 참조하십시오.

또는 viewer.open 메서드를 통해 보고서 템플릿의 URL을 전달할 수 있습니다.

<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";


export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open('report.rdlx-json');
  }
};

이 방법을 사용하는 전체 예제는 보고서 로드 라이브 데모를 참조하십시오.

JavaScript 응용 프로그램에서 보고서를 정적 자산으로 로드

해당 응용 프로그램에서 보고서 템플릿을 응용 프로그램의 배포 폴더에 복사한 후 JavaScript 보고서 뷰어 컴포넌트의 open 메서드에 대한 인수에 상대 보고서 파일 경로를 사용할 수 있습니다.

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>

이 방법의 단계별 지침은 ActiveReportsJS 보고서 뷰어 JavaScript 컴포넌트 시작하기 페이지를 참조하십시오.