[]
데모 도움말 API
Download
(Showing Draft Content)

Svelte 컴포넌트

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

ActiveReportsJS Svelte NPM 패키지

@mescius/activereportsjs-react npm 패키지를 통해 ActiveReportsJS Svelte 보고서 디자이너 컴포넌트가 포함된 라이브러리를 제공합니다. 이 패키지는 핵심 기능이 포함된 메인 @mescius/activereportsjs 패키지에 따라 달라집니다.

ActiveReportsJS Svelte 디자이너 컴포넌트

ActiveReportsJS Svelte 디자이너 컴포넌트를 응용프로그램의 Svelte 컴포넌트로 가져와서 마크다운에 포함할 수 있습니다. 예:

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="designer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</div>

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

속성

유형

설명

onInit

()=>DesignerConfig

디자이너의 초기화 옵션을 포함하는 DesignerConfig를 반환합니다.

dataSources

데이터 소스 템플릿 배열

사전 정의된 데이터 소스와 데이터 집합을 설정합니다.

reportList

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

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

imageList

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

이미지 보고서 항목에 대한 사전 정의된 이미지를 설정합니다.

onCreate

onCreate 함수

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

onOpen

onOpen 함수

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

onRender

onRender 함수

보고서 미리보기 버튼을 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다.

onSave

onSave 함수

보고서 저장 버튼을 보고서 도구 모음에 추가하고 관련된 클릭 핸들러를 설정합니다.

onSaveAs

onSaveAs 함수

다른 이름으로 저장 버튼을 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다.

onOpenFileMenu

onOpenFileMenu 함수

"파일" 메뉴를 보고서 도구 모음에 추가하고 해당 클릭 핸들러를 설정합니다.

report

report 객체

디자이너에 지정된 보고서를 불러옵니다.

documentChanged

(args: DocumentChangedEventArgs)=>void

디자이너에 로드된 보고서가 변경될 때 발생하는 이벤트에 대한 핸들러를 설정합니다.

또한, 디자이너 노드에 변수를 바인딩하여 Designer 클래스 인스턴스의 createReport, getReport, setReport, 그리고 processCommand 메서드에 접근할 수 있습니다. 예:

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
    import {onMount} from 'svelte';
    let designerInst: Designer;
    onMount(()=>{
        designerInst.setReport({ id: "report.rdlx-json", displayName: "my report" });
    })
</script>

<div id="designer-host">
    <Designer bind:this={designerInst}></Designer>
</div>