ビューワの使用（Svelte）

Svelteアプリケーションを作成する

新しいSvelteアプリケーションを作成する簡単な方法は、SvelteKitを使用することです。

SvelteKitを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。

コマンドプロンプトで次のコマンドを入力して、新しいSvelteアプリケーションを作成します。

npx sv create arjs-svelte-viewer-app

コマンドを実行すると、いくつか質問されるのでそれぞれ下記のように入力していきます。

┌  Welcome to the Svelte CLI! 
│
◇  Which template would you like?
│  SvelteKit minimal (barebones scaffolding for your new app)
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  What would you like to add to your project? (use arrow keys/space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  npm

作成したディレクトリを作業ディレクトリとします。次のコマンドを入力して作業ディレクトリに移動します。

cd arjs-svelte-viewer-app

次のコマンドを入力してActiveReportsJSのSvelte対応パッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @mescius/activereportsjs-svelte@6.0.1 @mescius/activereportsjs@6.0.1 @mescius/activereportsjs-i18n@6.0.1

src\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/xlsxadvexport";
    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」を参照し、アプリケーションを表示します。

quick-start-viewer

上記手順でブラウザ上に表示したレポートをPDFエクスポートすると、エクスポートしたPDFにて文字化けが発生します。これはPDFにフォントが埋め込まれていないため発生します。
エクスポートしたPDFで日本語を表示するための詳細は以下のトピック、およびナレッジベースをご参照ください。
フォント登録
PDFにフォントを埋め込む方法