[{"id":"d1ffb4db-74d8-4220-a972-c13d6fa8123b","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"1ea0de02-4d95-4f9a-bd1e-e4f1e58e5146","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"cd911f7e-e532-41c5-b415-fd5a1a83b8d6","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"54a4a5be-ed96-43df-a901-6a53495a4ff7","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fe055276-b12c-40ab-9569-c2d9ebd4f5b8","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"71be3f0b-8a29-45e8-8d43-4965d3e0897e","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"ea12b649-a786-495c-ad0f-7ef38ce94a9e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9582e49d-f693-4f0d-96b3-7f4accc2bb6e","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a6f863bb-031a-44cc-8a12-fc91219e8c15","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c5da505a-f378-4333-b85f-2429d057b519","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"7daee9d7-e908-4166-9d62-2ca3e93547fb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8659262c-9b4e-4e31-9c6c-b97d1d0e0740","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"966a73cf-5b72-4f4b-8939-e7a06e0863da","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"6c63e26a-a944-4aa9-a190-ecc8ac767287","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"3af6c981-53ee-41ba-8ef7-03efb56a8fff","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"8f1b28f2-c419-43fb-b765-5fde0a36fb08","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"d67bf68e-cb2e-4b6f-9253-68ca0ee46560","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e23050c1-7dc0-4265-a2d9-eaaf938c2d35","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"c9c6aa74-7d95-41b4-9702-98774683bf0a","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"83a0368a-9a1a-4b31-8081-d2edc554d42f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"0e562678-2dd4-4972-ab4d-e718f050accb","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"9965a8b8-f6c2-4727-a6d6-4cf12bd5b14f","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"e805fe27-20e5-4468-85b9-078665b18438","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"a1a9a9bc-d0b6-4d18-8abf-5c6f2a7cfa40","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"fdcc0c41-acb5-4465-9b66-7e06200a48c4","tags":[{"product":null,"links":null,"id":"7fcf2480-6c1f-4a24-a5be-35a201d1532b","name":"upd","color":"#7e678a","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]},{"id":"05d00001-6629-4aea-be2a-ddc570ca6a09","tags":[{"product":null,"links":null,"id":"27b05819-810b-4ea2-b5ea-2857947ce8be","name":"New","color":"#ed7422","productId":"486064ee-5a7c-4d44-b127-1e19810242b2"}]}]
데모 도움말 API
Download
(Showing Draft Content)

ActiveReportsJS Vue 보고서 디자이너

이 페이지에서는 ActiveReportsJS Vue 보고서 디자이너에 대해 자세히 살펴봅니다. 보고서 디자이너를 Vue 응용 프로그램으로 통합하는 간단한 가이드는 시작하기 자습서를 확인할 수 있습니다.

ActiveReportsJS Vue NPM 패키지

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

ActiveReportsJS Vue 디자이너 컴포넌트

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

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

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

속성

유형

설명

hotkeysEnabled

boolean

저장 및 열기 핫키가 사용하도록 설정되어 있는지 여부를 나타냅니다.

language

string

디자이너 컴포넌트 인터페이스의 언어를 설정합니다. 자세한 내용은 지역화 페이지를 확인하십시오.

fontSet

"default"

"registered"

dataSources

데이터 소스 템플릿의 배열

미리 정의된 데이터 소스 및 데이터 집합을 설정합니다.

reportList

보고서 리소스 정보 항목의 배열

하위 보고서의 미리 정의된 보고서 이름을 설정합니다.

imageList

이미지 리소스 정보 항목의 배열

이미지 보고서 항목의 미리 정의된 이미지를 설정합니다.

onCreate

onCreate 함수

디자이너 도구 모음에 새 보고서 버튼을 추가하고 해당 클릭 처리기를 설정합니다.

onOpen

onOpen 함수

디자이너 도구 모음에 보고서 열기 버튼을 추가하고 해당 클릭 처리기를 설정합니다.

onRender

onRender 함수

디자이너 도구 모음에 보고서 미리 보기 버튼을 추가하고 해당 클릭 처리기를 설정합니다.

onSave

onSave 함수

디자이너 도구 모음에 보고서 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다.

onSaveAs

onSaveAs 함수

디자이너 도구 모음에 다른 이름으로 저장 버튼을 추가하고 해당 클릭 처리기를 설정합니다.

onOpenFileMenu

onOpenFileMenu 함수

디자이너 도구 모음에 "파일" 메뉴를 추가하고 해당 클릭 처리기를 설정합니다.

report

보고서 개체

디자이너에서 지정된 보고서를 로드합니다.

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

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