# Svelte 컴포넌트

## Content

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

### ActiveReportsJS Svelte NPM 패키지

[@mescius/activereportsjs-svelte](https://www.npmjs.com/package/@mescius/activereportsjs-svelte) npm 패키지를 통해 Svelte용 ActiveReportsJS 보고서 뷰어 래퍼를 포함하는 라이브러리를 제공합니다. 이 패키지는 핵심 기능이 포함된 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지에 의존합니다.

### ActiveReportsJS Svelte 뷰어 컴포넌트

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

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

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

뷰어 구성 요소는 다음 속성을 허용합니다.

| 속성 | 유형 | 기본값 | 설명 |
| --- | --- | --- | --- |
| availableExports | string 배열 |  | 뷰어 UI에서 사용할 수 있는 내보내기 목록을 설정합니다. 자세한 내용은 [내보내기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export) 페이지를 참조하세요. |
| 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 |  | 사용 가능한 도구 모음 항목 목록을 설정합니다. 자세한 내용은 [사용자 정의](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Customization) 페이지를 참조하세요. |
| language | string |  | 뷰어 UI의 언어를 설정합니다. 자세한 정보는 [지역화](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Localization) 페이지를 참조하세요. |
| exportsSettings | object |  | 내보내기 설정을 설정합니다. 자세한 내용은 [내보내기 설정](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export/Export-Settings) 페이지를 참조하세요. |
| report | Object |  | 뷰어 컴포넌트에 로드할 보고서를 설정합니다. 자세한 내용은 [보고서 로드](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Loading-Reports) 섹션을 참고하세요. |
| reportLoaded | (args: [ReportLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#reportloadeventargs))=>void |  | 보고서가 로드되지만 렌더링이 시작되기 전에 발생하는 이벤트에 대한 핸들러를 설정합니다. |
| documentLoaded | (args: [DocumentLoadEventArgs](https://developer.mescius.com/activereportsjs/api/modules/ReportViewer#documentloadeventargs)=>void |  | 보고서 렌더링이 완료될 때 발생하는 이벤트에 대한 핸들러를 설정합니다. |
| errorHandler | ()=> void |  | 보고서 렌더링으로 인해 오류가 발생하는 경우 발생하는 이벤트에 대한 핸들러를 설정합니다. |
| showParametersOnOpen | 'auto'\|'always' | 'auto' | `auto` 값은 보고서의 매개변수에 기본 값이 있더라도 보고서가 로드될 때 `매개변수 패널`이 자동으로 열려야 함을 나타냅니다. |
| animations | AnimationSettings |  | 애니메이션 구성을 지정합니다. |
| themeConfig | UIThemeConfig |  | 테마 구성을 지정합니다. |
| theme | ColorTheme or built-in theme ID |  | 활성화된 테마를 지정합니다. |

이러한 입력 속성을 동적 값에 바인딩하여 뷰어 구성 요소의 기본 UI를 완전히 덮어쓸 수 있습니다. 더 자세한 사항은 [사용자 정의 페이지](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Customization)를 참고하세요.
또한, 부모 컴포넌트는 변수를 Viewer 노드에 바인딩하고 `Viewer()` 메서드를 사용하여 Viewer 클래스의 [메서드 및 속성](/activereportsjs/api/modules/ReportViewer)에 액세스할 수 있습니다. 예:

```javascript
<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>
```

### 관련 링크

* [보고서 로드](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Loading-Reports)
* [사용자 정의](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Customization)
* [지역화](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Localization)
* [인쇄](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Print)
* [내보내기](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Export)
* [테마](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Themes)