ビューワの組み込み（Svelte）
このトピックではSvelteフレームワークでビューワを使用する際のラッパーコンポーネントであるSvelte対応パッケージについて説明します。Svelte対応パッケージからビューワをWebアプリケーションに組み込む方法については、クイックスタート > ビューワの使用 > Svelteを参照してください。
npmからインストール
Svelte対応パッケージはnpmを利用してインストールすることができます。
@mescius/activereportsjs-svelteパッケージをプロジェクトにインストールすると、ビューワを使用できます。
Svelte対応パッケージは@mescius/activereportsjsパッケージに依存しており、Svelte対応パッケージをインストールすると同時にインストールされます。
Svelteのビューワ
Svelteのビューワは、次のようにSvelteコンポーネントにインポートして、マークダウンに含めることができます。
<script lang="ts">
import {Viewer} from "@mescius/activereportsjs-svelte";
</script>
<div id="viewer-host">
<Viewer report = {{ Uri: 'report.rdlx-json' }}></Viewer>
</div>ビューワには、次のプロパティが用意されています。
プロパティ | 型 | デフォルト値 | 説明 |
|---|---|---|---|
availableExports | string配列 | エクスポート設定を定義します。 | |
mouseMode | 'Pan' | 'Selection' | 'Pan' | ビューワのマウスモードを設定します。 |
renderMode | 'Galley' | 'Paginated' | 'Paginated' | ビューワの描画モードを設定します。 |
viewMode | 'Continuous' | 'SinglePage' | 'Continuous' | 複数ページのレポートを表示するモードを設定します。 |
zoom | 'FitWidth' | 'FitPage' | number | 100 | レポートの表示倍率を設定します。 |
fullscreen | boolean | false | Trueに設定されている場合、ビューワをフルスクリーンで表示します。 |
toolbarVisible | boolean | true | ツールバーを表示するかを設定します。 |
sidebarVisible | boolean | true | サイドバーを表示するかを設定します。 |
panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' | 検索およびエクスポートのパネル位置を設定します。 |
parameterPanelLocation | 'default' | 'top' | 'bottom' | 'default' | パラメータパネルの表示位置を設定します。 |
toolbarLayout | Object | ツールバー設定を定義します。詳細については、ツールバーのカスタマイズを参照してください。 | |
language | string | ビューワの表示言語を設定します。詳細については、表示言語を設定するを参照してください。 | |
exportSettings | object | エクスポート設定を定義します。 | |
report | object | ビューワに読み込むレポートを設定します。詳細については、レポートの読み込みを参照してください。 | |
reportLoaded | (args: ReportLoadedEventArgs)=>void | ビューワにレポートを読み込み、レンダリングが開始される前に発生するイベントのハンドラを設定します。 | |
documentLoaded | (args: DocumentLoadedEventArgs)=>void | レポートのレンダリングが完了した時に発生するイベントのハンドラを設定します。 | |
errorHandler | ()=> void | ビューワでエラーが発生したときに呼び出されるイベントのハンドラを設定します。 | |
showParametersOnOpen | 'auto' | 'always' | 'auto' | 'always'に設定すると、レポートパラメータに初期値が設定されている場合でも、レポートの読込時にパラメータパネルが自動的に表示されます。 |
上記のプロパティに動的な値をバインドして、ビューワのインターフェイスをカスタマイズすることができます。
また、親コンポーネントは、ビューワ参照を作成し、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>