# ActiveReportsJS Vue 보고서 디자이너

## Content

이 페이지에서는 ActiveReportsJS Vue 보고서 디자이너에 대해 자세히 살펴봅니다. 보고서 디자이너를 Vue 응용 프로그램으로 통합하는 간단한 가이드는 [시작하기](/activereportsjs/docs/GettingStarted/QuickStart-ARJS-Designer-Component/QuickStart-Vue) 자습서를 확인할 수 있습니다.

### ActiveReportsJS Vue NPM 패키지

[@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) npm 패키지를 통해 ActiveReportsJS Vue 보고서 디자이너를 포함한 라이브러리를 배포합니다. 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지는 핵심 기능을 제공합니다. Vue 2.0을 사용 중인 경우 ActiveReportsJS에서 [@vue/composition-api](https://composition-api.vuejs.org/) 패키지를 설치해야 합니다.

### ActiveReportsJS Vue 디자이너 컴포넌트

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

```javascript
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](/activereportsjs/api/modules/ReportDesigner) | 디자이너의 초기화 옵션이 포함된 [DesignerConfig](/activereportsjs/api/modules/ReportDesigner) 객체를 반환합니다. |
| hotkeysEnabled | boolean | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| language | string | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| customInitTemplates |  | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| fontSet | "default" \| "registered" \| "all" | **더 이상 사용되지 않음**: 대신 `onInit` 콜백을 사용하세요. |
| dataSources | [데이터 소스 템플릿](@api/modules/reportdesigner.html#datasourcetemplate)의 배열 | [미리 정의된 데이터 소스 및 데이터 집합](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets)을 설정합니다. |
| reportList | [보고서 리소스 정보 항목](@api/modules/reportdesigner.html#reportresourceinfo)의 배열 | [하위 보고서의 미리 정의된 보고서 이름](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)을 설정합니다. |
| imageList | [이미지 리소스 정보 항목](@api/modules/reportdesigner.html#imageresourceinfo)의 배열 | [이미지 보고서 항목의 미리 정의된 이미지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)를 설정합니다. |
| onCreate | [onCreate 함수](@api/interfaces/reportdesigner.actionhandlers.html#oncreate) | 디자이너 도구 모음에 [새 보고서 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpen | [onOpen 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopen) | 디자이너 도구 모음에 [보고서 열기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onRender | [onRender 함수](@api/interfaces/reportdesigner.actionhandlers.html#onrender) | 디자이너 도구 모음에 [보고서 미리 보기 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSave | [onSave 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsave) | 디자이너 도구 모음에 [보고서 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onSaveAs | [onSaveAs 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsaveas) | 디자이너 도구 모음에 [다른 이름으로 저장 버튼](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다. |
| onOpenFileMenu | [onOpenFileMenu 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopenfilemenu) | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다. |
| report | [보고서 개체](@api/modules/reportdesigner.html#report) | 디자이너에서 지정된 보고서를 로드합니다. |
| documentChanged | (args: DocumentChangedEventArgs)=>void | 디자이너에 로드된 보고서가 변경될 때 발생하는 이벤트에 대한 핸들러를 설정합니다. |

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

```javascript
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"})
  },
});
```