[]
        
(Showing Draft Content)

Vue용 ActiveReportsJS 보고서 뷰어 래퍼

이 페이지에서는 Vue용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Vue 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.

ActiveReportsJS Vue NPM 패키지

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

ActiveReportsJS Vue 뷰어 컴포넌트

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

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: "<div style='width:100%;height: 100vh'><arjs-viewer /></div>",
});

뷰어 컴포넌트는 다음 속성을 허용합니다.

속성 유형 기본값 설명
availableExports 문자열의 배열 뷰어 UI에서 사용할 수 있는 내보내기 목록을 설정합니다. 자세한 내용은 내보내기 페이지를 참조하십시오.
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 사용 가능한 도구 모음 항목의 목록을 설정합니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오.
language string UI 언어를 설정합니다. 자세한 내용은 지역화 페이지를 참조하십시오.
exportsSettings object 내보내기 설정을 지정합니다. 자세한 내용은 내보내기 설정 페이지를 참조하십시오.
report Object 뷰어 컴포넌트에서 로드할 보고서를 설정합니다.
reportLoaded (args: ReportLoadEventArgs)=>void 보고서가 로드되면 렌더링이 시작되기 전에 발생하는 이벤트의 처리기를 설정합니다.
documentLoaded (args: DocumentLoadEventArgs)=>void 보고서 렌더링이 완료되면 발생하는 이벤트의 처리기를 설정합니다.
errorHandler ()=> void 보고서 렌더링이 오류를 일으키는 경우 발생하는 이벤트의 처리기를 설정합니다.

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 컴포넌트의 기본 UI를 완전히 덮어쓸 수 있습니다. 자세한 내용은 사용자 정의 페이지를 참조하십시오.

또한 부모 컴포넌트가 뷰어 컴포넌트에 대한 ref를 만든 다음 해당 뷰어 기능을 사용하여 뷰어 클래스 인스턴스의 메서드 및 속성에 액세스할 수 있습니다. 예를 들어 다음과 같습니다.

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:
    "<div style='width:100%;height: 100vh'><arjs-viewer ref='reportViewer' /></div>",
  mounted: function () {
    this.$refs.reportViewer.Viewer().toggleFullScreen();
  },
});

관련 링크

X

카카오톡 채널 추가를 통해 GrapeCity의 최신 정보를 빠르게 받아 보세요!