# Vue용 ActiveReportsJS 보고서 뷰어 래퍼
## Content
이 페이지에서는 Vue용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Vue 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 [시작하기](/activereportsjs/docs/v4.1/GettingStarted/QuickStart/QuickStart-Vue) 자습서를 확인하십시오.
### ActiveReportsJS Vue NPM 패키지
[@grapecity/activereports-vue](https://www.npmjs.com/package/@grapecity/activereports-vue) npm 패키지를 통해 Vue용 ActiveReportsJS 보고서 뷰어 래퍼가 포함된 라이브러리를 배포합니다. 기본 [@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 { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";
new Vue({
el: "#app",
components: { "arjs-viewer": ReportViewer },
template: "",
});
```
뷰어 컴포넌트는 다음 속성을 허용합니다.
| 속성 | 유형 | 기본값 | 설명 |
| ---------------------- | --------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| availableExports | 문자열의 배열 | | 뷰어 UI에서 사용할 수 있는 내보내기 목록을 설정합니다. 자세한 내용은 [내보내기](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Export#enable-report-viewer-export-sidebar-in-vue-applications) 페이지를 참조하십시오. |
| mouseMode | 'Pan' | 'Selection' | 'Pan' | 뷰어 컴포넌트의 마우스 모드를 설정합니다. |
| renderMode | 'Galley' | 'Paginated' | 'Paginated' | 뷰어 컴포넌트의 렌더링 모드를 설정합니다. |
| viewMode | 'Continuous' | 'SinglePage' | 'Continuous' | 뷰어 컴포넌트의 보기 모드를 설정합니다. |
| zoom | 'FitWidth' | 'FitPage' | number | 100 | 뷰어 컴포넌트의 확대/축소 모드를 설정합니다. |
| fullscreen | boolean | false | 뷰어 컴포넌트가 콘텐츠를 전체 화면 모드에서 표시해야 하는지 여부를 나타냅니다. |
| toolbarVisible | boolean | true | 뷰어 컴포넌트의 도구 모음 표시 여부를 나타냅니다. |
| sidebarVisible | boolean | true | 뷰어 컴포넌트의 세로 막대 표시 여부를 나타냅니다. |
| panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' | 뷰어 컴포넌트의 UI 내에서 검색 및 내보내기 기능의 위치를 나타냅니다. |
| parameterPanelLocation | 'default' | 'top' | 'bottom' | 'default' | 뷰어 컴포넌트의 UI 내에서 매개 변수 모음의 위치를 나타냅니다. |
| toolbarLayout | Object | | 사용 가능한 도구 모음 항목의 목록을 설정합니다. 자세한 내용은 [사용자 정의](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Customization) 페이지를 참조하십시오. |
| language | string | | UI 언어를 설정합니다. 자세한 내용은 [지역화](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Localization) 페이지를 참조하십시오. |
| exportsSettings | object | | 내보내기 설정을 지정합니다. 자세한 내용은 [내보내기 설정](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하십시오. |
| report | Object | | 뷰어 컴포넌트에서 로드할 보고서를 설정합니다. |
| reportLoaded | (args: [ReportLoadEventArgs](@api/modules/reportviewer.html#reportloadeventargs))=>void | | 보고서가 로드되면 렌더링이 시작되기 전에 발생하는 이벤트의 처리기를 설정합니다. |
| documentLoaded | (args: [DocumentLoadEventArgs](@api/modules/reportviewer.html#documentloadeventargs))=>void | | 보고서 렌더링이 완료되면 발생하는 이벤트의 처리기를 설정합니다. |
| errorHandler | ()=> void | | 보고서 렌더링이 오류를 일으키는 경우 발생하는 이벤트의 처리기를 설정합니다. |
이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 [사용자 정의 페이지](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Customization)를 참조하십시오.
또한 부모 컴포넌트가 뷰어 컴포넌트에 대한 `ref`를 만든 다음 해당 `뷰어` 기능을 사용하여 [뷰어 클래스 인스턴스의 메서드 및 속성](@api/classes/reportviewer.viewer.html)에 액세스할 수 있습니다. 예를 들어 다음과 같습니다.
```javascript
import Vue from "vue";
import { Viewer as ReportViewer } from "@grapecity/activereports-vue";
import "@grapecity/activereports/styles/ar-js-viewer.css";
new Vue({
el: "#app",
components: { "arjs-viewer": ReportViewer },
template:
"",
mounted: function () {
this.$refs.reportViewer.Viewer().toggleFullScreen();
},
});
```
### 관련 링크
- [라이브 데모](/activereportsjs/demos/features/viewer-integration/vue)
- [사용자 정의](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Customization)
- [지역화](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Localization)
- [인쇄](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Print)
- [내보내기](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Export)
- [테마](/activereportsjs/docs/v4.1/DeveloperGuide/ActiveReportsJSViewer/Themes)