ActiveReportsJS ActiveReportsJS Vue 보고서 디자이너

이 페이지에서는 ActiveReportsJS Vue 보고서 디자이너에 대해 자세히 살펴봅니다. 보고서 디자이너를 Vue 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.

ActiveReportsJS Vue NPM 패키지

@grapecity/activereports-vue npm 패키지를 통해 ActiveReportsJS Vue 보고서 디자이너를 포함한 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다. Vue 2.0을 사용 중인 경우 ActiveReportsJS에서 @vue/composition-api 패키지를 설치해야 합니다.

ActiveReportsJS Vue 디자이너 컴포넌트

ActiveReportsJS Vue 디자이너 컴포넌트는 @grapecity/activereports-vue 패키지에서 가져와 부모 컴포넌트의 템플릿에 포함할 수 있습니다. 예를 들어 다음과 같습니다.

import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});

디자이너 컴포넌트는 다음 속성을 허용합니다.

또한 디자이너 컴포넌트에 대한 ref를 생성하여 부모 컴포넌트에서 디자이너 클래스 인스턴스의 getReport, setReport 및 processCommand 메서드를 사용할 수 있습니다. 예를 들어 다음과 같습니다.

import Vue from "vue";
import { Designer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-designer": Designer },
  template:
    "<div style='width:100%;height: 100vh'><arjs-designer ref='reportDesigner' /></div>",
  mounted: function () {
    this.$refs.reportDesigner.setReport({id: "report.rdlx-json"})
  },
});