ビューワの使用（Svelte）

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

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

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

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

npm create svelte@latest arjs-svelte-viewer-app

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

√ Which Svelte app template? » Skeleton project
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ 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のパッケージ、およびビューワを日本語化するためのローカライズパッケージをインストールします。

npm install @grapecity/activereports @grapecity/activereports-localization

SvelteKitを使用した場合、最初からVite.jsと連携する形でアプリケーションが作成されます。ActiveReportsJSをVite.jsで使用するには設定を追加する必要があります。プロジェクトのルートフォルダに「alias.js」を作成し、以下の内容を設定します。

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

アプリケーションのルートフォルダにあるvite.config.jsファイルの内容を次のように変更します。

import { sveltekit } from '@sveltejs/kit/vite';
import path from "path";

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: [
      {
        find: /^moment$/,
        replacement: path.resolve(__dirname, "./alias.js"),
      },
      {
        find: /^gc-dv$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
        ),
      },
      {
        find: /^\@grapecity\/ar-js-pagereport$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
        ),
      },
      {
        find: /^barcodejs$/,
        replacement: path.resolve(
          __dirname,
          "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
        ),
      },
    ],
  },
};
export default config;

src\routes\+page.svelteファイルを開き、その内容を次のように変更します。

<script lang="ts">
    import "@grapecity/activereports/styles/ar-js-ui.css";
    import "@grapecity/activereports/styles/ar-js-viewer.css";    
    import {Viewer} from "@grapecity/activereports/reportviewer";
    import {PdfExport, HtmlExport, TabularDataExport} from "@grapecity/activereports";
    import { onMount } from 'svelte';
	import "@grapecity/activereports-localization";
   
    onMount(() => {
        let viewer = new Viewer("#viewer-host", { language: "ja" });
        viewer.open("reports/quick-start-sample.rdlx-json");
    });
</script>

<div id="viewer-host"></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」を参照し、アプリケーションを表示します。