[{"id":"5f98443c-9d59-4351-81ad-0910eb2535e7","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50134b23-c8f4-4c83-8c49-4f7a4d307585","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"61551de1-9a9f-4a08-b71e-49ca882827f5","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ebf0ce82-0782-496c-bd66-90f5433e31f2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"50e4fa24-000f-45f0-8f09-9026e40c30ca","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"64f01bad-a9ca-47a2-b134-b485adffed2c","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"57569d12-0bea-4995-9743-1b5efb7dfda6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"712bddae-c316-4524-add9-6dd487152146","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"afb74359-e66d-40e1-a5e2-f7a22468165d","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cccfa340-c8a6-43ef-b2cd-f9fe44ce22dc","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d404d4eb-0b25-4650-be78-033cc4aa3445","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d778e74c-622b-47d6-b0b1-32e741ee6d1a","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3103635f-71c9-4a28-8786-45ae6de6a49f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d56fe97-9840-41da-931f-ad23201cd9e2","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c90cdefc-81dd-4d8d-b8fa-ed93585c4b23","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"5d5d62ca-5108-4421-a925-f2c187eb2aeb","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e588ca95-4aba-4e50-a99f-833a98531489","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cc378615-c853-4f3e-994b-9a2260cc06a2","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"4a60e156-0f10-43a2-88bc-9d9691f15137","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"938d62d7-9526-479f-9798-31d0f9f58588","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9e4f342b-5dcb-4548-a84c-afe71cf5d736","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0d50ab1e-81c0-49b2-b8cb-1f50a6f3e12b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0a0c904c-bbb2-4abe-a626-a06200fb57fe","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"224e6263-b410-4f17-8822-e19f965c509d","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"74546345-b13f-4465-a716-7bc0f9c19730","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"60452ec3-5f68-4e01-b8f0-22ea893bf4ce","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8c3493e9-e62c-45b7-9268-825db731f79b","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
이 페이지에서는 Vue용 ActiveReportsJS 보고서 뷰어 래퍼에 대해 자세히 설명합니다. Vue 응용 프로그램에 래퍼 통합을 위한 간단한 가이드는 시작하기 자습서를 확인하십시오.
@grapecity/activereports-vue npm 패키지를 통해 Vue용 ActiveReportsJS 보고서 뷰어 래퍼가 포함된 라이브러리를 배포합니다. 기본 @grapecity/activereports 패키지는 핵심 기능을 제공합니다. Vue 2.0을 사용 중인 경우 ActiveReportsJS에서 @vue/composition-api 패키지를 설치해야 합니다.
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();
},
});