[{"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)

Svelte 컴포넌트

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

ActiveReportsJS Svelte NPM 패키지

We provide the library that contains the ActiveReportsJS Report Viewer Wrapper for Svelte via the @mescius/activereportsjs-svelte npm 패키지를 통해 Svelte용 ActiveReportsJS 보고서 뷰어 래퍼를 포함하는 라이브러리를 제공합니다. 이 패키지는 핵심 기능이 포함된 기본 @mescius/activereportsjs 패키지에 의존합니다.

ActiveReportsJS Svelte 뷰어 컴포넌트

ActiveReportsJS Svelte 뷰어 컴포넌트는 Svelte 컴포넌트로 가져와서 마크다운에 포함될 수 있습니다. 예:

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

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</div>

The viewer component accepts the following properties.

속성

유형

기본값

설명

availableExports

string 배열


뷰어 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


보고서 렌더링으로 인해 오류가 발생하는 경우 발생하는 이벤트에 대한 핸들러를 설정합니다.

showParametersOnOpen

'auto'|'always'

'auto'

auto 값은 보고서의 매개변수에 기본 값이 있더라도 보고서가 로드될 때 매개변수 패널이 자동으로 열려야 함을 나타냅니다.

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 구성 요소의 기본 UI를 완전히 덮어쓸 수 있습니다. 더 자세한 사항은 사용자 정의 페이지를 참고하세요.

또한, 부모 컴포넌트는 변수를 Viewer 노드에 바인딩하고 Viewer() 메서드를 사용하여 Viewer 클래스의 메서드 및 속성에 액세스할 수 있습니다. 예:

<script lang="ts">
    import {Viewer} from "@mescius/activereportsjs-svelte";
    import { onMount } from 'svelte';
    let viewerInst:Viewer;
    onMount(() => {
        viewerInst.Viewer().toggleFullScreen();
    });        
</script>

<div id="viewer-host">
    <Viewer report = {{ Uri: 'report.rdlx-json' }} bind:this={viewerInst}></Viewer>
</div>

관련 링크