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

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

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

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 컴포넌트 시작하기 페이지를 참조하십시오.