ActiveReportsJS Vue 보고서 디자이너
이 페이지에서는 ActiveReportsJS Vue 보고서 디자이너에 대해 자세히 살펴봅니다. 보고서 디자이너를 Vue 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.
ActiveReportsJS Vue NPM 패키지
@mescius/activereportsjs-vue npm 패키지를 통해 ActiveReportsJS Vue 보고서 디자이너를 포함한 라이브러리를 배포합니다. 기본 @mescius/activereportsjs 패키지는 핵심 기능을 제공합니다. Vue 2.0을 사용 중인 경우 ActiveReportsJS에서 @vue/composition-api 패키지를 설치해야 합니다.
ActiveReportsJS Vue 디자이너 컴포넌트
ActiveReportsJS Vue 디자이너 컴포넌트는 @mescius/activereportsjs-vue 패키지에서 가져와 부모 컴포넌트의 템플릿에 포함할 수 있습니다. 예를 들어 다음과 같습니다.
import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-vue";
new Vue({
el: "#app",
components: { "arjs-designer": Designer },
template: "<div style='width:100%;height: 100vh'><arjs-designer /></div>",
});디자이너 컴포넌트는 다음 속성을 허용합니다.
속성 | 유형 | 설명 |
|---|---|---|
onInit | ()=>DesignerConfig | 디자이너의 초기화 옵션이 포함된 DesignerConfig 객체를 반환합니다. |
hotkeysEnabled | boolean | 더 이상 사용되지 않음: 대신 |
language | string | 더 이상 사용되지 않음: 대신 |
customInitTemplates | 더 이상 사용되지 않음: 대신 | |
fontSet | "default" | "registered" | "all" | 더 이상 사용되지 않음: 대신 |
dataSources | 데이터 소스 템플릿의 배열 | 미리 정의된 데이터 소스 및 데이터 집합을 설정합니다. |
reportList | 보고서 리소스 정보 항목의 배열 | 하위 보고서의 미리 정의된 보고서 이름을 설정합니다. |
imageList | 이미지 리소스 정보 항목의 배열 | 이미지 보고서 항목의 미리 정의된 이미지를 설정합니다. |
onCreate | 디자이너 도구 모음에 새 보고서 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | |
onOpen | 디자이너 도구 모음에 보고서 열기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | |
onRender | 디자이너 도구 모음에 보고서 미리 보기 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | |
onSave | 디자이너 도구 모음에 보고서 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | |
onSaveAs | 디자이너 도구 모음에 다른 이름으로 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다. | |
onOpenFileMenu | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. | |
report | 디자이너에서 지정된 보고서를 로드합니다. | |
documentChanged | (args: DocumentChangedEventArgs)=>void | 디자이너에 로드된 보고서가 변경될 때 발생하는 이벤트에 대한 핸들러를 설정합니다. |
또한 디자이너 컴포넌트에 대한 ref를 생성하여 부모 컴포넌트에서 디자이너 클래스 인스턴스의 getReport, setReport 및 processCommand 메서드를 사용할 수 있습니다. 예를 들어 다음과 같습니다.
import Vue from "vue";
import { Designer } from "@mescius/activereportsjs-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"})
},
});