# ActiveReportsJS ActiveReportsJS Vue 보고서 디자이너

## Content



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

### ActiveReportsJS Vue NPM 패키지

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


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

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

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

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

| 속성       | 유형                                                                                                         | 설명                                                                                                                                                        |
|----------------|--------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| hotkeysEnabled | boolean                                                                                                      | 저장 및 열기 핫키가 사용하도록 설정되어 있는지 여부를 나타냅니다.                                                                                                            |
| language       | string                                                                                                       | 디자이너 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 [지역화](localization) 페이지를 확인하십시오.                                                |
| fontSet        | "default" | "registered" | "all"                                                                           | 사용 가능한 글꼴 집합을 나타냅니다. 자세한 내용은 [글꼴 구성](/activereportsjs/docs/v2.2/GettingStarted/FontConfiguration#configure-report-designer-component)을 참조하십시오. |
| dataSources    | [데이터 소스 템플릿](@api/modules/reportdesigner.html#datasourcetemplate)의 배열        | [미리 정의된 데이터 소스 및 데이터 집합](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Add-Predefined-Datasources-Datasets)을 설정합니다.                                                                            |
| reportList    | [보고서 리소스 정보 항목](@api/modules/reportdesigner.html#reportresourceinfo)의 배열   | [하위 보고서의 미리 정의된 보고서 이름](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)을 설정합니다.                                                                                          |
| imageList     | [이미지 리소스 정보 항목](@api/modules/reportdesigner.html#imageresourceinfo)의 배열     | [이미지 보고서 항목의 미리 정의된 이미지](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Use-Shared-Resources)를 설정합니다.                                                                                       |
| onCreate       | [onCreate 함수](@api/interfaces/reportdesigner.actionhandlers.html#oncreate)             | 디자이너 도구 모음에 [새 보고서 버튼](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-new-report-button)을 추가하고 해당 클릭 처리기를 설정합니다.                        |
| onOpen         | [onOpen 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopen)                 | 디자이너 도구 모음에 [보고서 열기 버튼](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Create-New-Report#enabling-the-open-report-button)을 추가하고 해당 클릭 처리기를 설정합니다.                      |
| onRender       | [onRender 함수](@api/interfaces/reportdesigner.actionhandlers.html#onrender)             | 디자이너 도구 모음에 [보고서 미리 보기 버튼](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Preview-Reports)을 추가하고 해당 클릭 처리기를 설정합니다.                                                 |
| onSave         | [onSave 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsave)                 | 디자이너 도구 모음에 [보고서 저장 버튼](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다.                                                       |
| onSaveAs       | [onSaveAs 함수](@api/interfaces/reportdesigner.actionhandlers.html#onsaveas)             | 디자이너 도구 모음에 [다른 이름으로 저장 버튼](/activereportsjs/docs/v2.2/DeveloperGuide/ActiveReportsJSDesignerComponent/Save-Reports)을 추가하고 해당 클릭 처리기를 설정합니다.                                                         |
| onOpenFileMenu | [onOpenFileMenu 함수](@api/interfaces/reportdesigner.actionhandlers.html#onopenfilemenu) | 디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다.                                                                              |
| report         | [보고서 개체](@api/modules/reportdesigner.html#report)                                     | 디자이너에서 지정된 보고서를 로드합니다.

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

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