ビューワの使用（Svelte）
Svelteアプリケーションを作成する
新しいSvelteアプリケーションを作成する簡単な方法は、SvelteKitを使用することです。
SvelteKitを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。
コマンドプロンプトで次のコマンドを入力して、新しいSvelteアプリケーションを作成します。
npm create svelte@6.0.10 arjs-svelte-viewer-appコマンドを実行すると、いくつか質問されるのでそれぞれ下記のように入力していきます。
Which Svelte app template?……Skeleton project
Add type checking with TypeScript?……Yes, using TypeScript syntax
Select additional options (use arrow keys/space bar)
Add ESLint for code linting……No
Add Prettier for code formatting……Yes
Add Playwright for browser testing……No
Add Vitest for unit testing……No作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。
cd arjs-svelte-viewer-app次のコマンドを入力してActiveReportsJSのSvelte対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。
npm install @mescius/activereportsjs-svelte @mescius/activereportsjs-i18nsrc\routes\+page.svelteファイルを開き、その内容を次のように変更します。
<script lang="ts">
// ARJS関連インポート
import '@mescius/activereportsjs/styles/ar-js-ui.css';
import '@mescius/activereportsjs/styles/ar-js-viewer.css';
import {Viewer} from "@mescius/activereportsjs-svelte";
import '@mescius/activereportsjs-i18n';
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/xlsxexport";
import "@mescius/activereportsjs/tabulardataexport";
let viewerInst:Viewer;
</script>
<div id="viewer-host">
<Viewer report={{ Uri: 'reports/quick-start-sample.rdlx-json' }} language="ja" bind:this={viewerInst}></Viewer>
</div>
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>SvelteKitを使用してアプリケーションを作成した場合、サーバー上でページを作成・描画しクライアント側にHTMLを送信するサーバーサイドレンダリングで作成されますが、ActiveReportsJSはクライアント側でしか動作しません。そのためサーバー上の描画を無効にする必要があります。サーバー上のレンダリングを無効にするには、+page.svelteファイルを含むフォルダに+page.jsファイルを追加し、以下の内容を設定します。
export const prerender = false;
export const ssr = false;static\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。
次のコマンドを入力してSvelteアプリケーションを実行します。
npm run devブラウザで「localhost:5173」を参照し、アプリケーションを表示します。
