ビューワの組み込み（Vite.js）

Vite.jsは、次世代のフロントエンドWeb開発用ビルドツールであり、ネイティブESモジュール（ESM）を活用して、開発エクスペリエンスを向上させ、高度に最適化されたビルドを作成します。このチュートリアルでは、Vite.js ReactアプリケーションでActiveReportsJSビューワを使用する方法を説明します。

新しいVite.js Reactアプリケーションを作成する簡単な方法はスキャフォールディングツールのcreate-viteを使用することです。

create-viteを使用するためには事前にNodeJSがコンピュータにインストールされている必要があります。 create-vite をインストールするにはコマンドプロンプトで次のコマンドを入力してインストールします。

# npm 6.x
npm init vite@latest arjs-vite-react-app --template react

# npm 7+ （追加のダブルハイフンが必要です）
npm init vite@latest arjs-vite-react-app -- --template react

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

npx create vite arjs-vite-react-app

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

cd arjs-vite-viewer-app

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

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

4.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;

5.アプリケーションのルートフォルダにあるvite.config.jsファイルを開き、以下内容を設定します。

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";

export default defineConfig({
  plugins: [reactRefresh()],
  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"
        ),
      },
    ],
  },
});

6.src\App.cssファイルを開き、以下のスタイルを追加します。

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}

7.テンプレートファイルに対して、ルートフォルダーに、「report.rdlx-json」という新しいファイルを作成し、そのファイルに次のJSONコンテンツを挿入します。

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

8.src\App.jsxファイルを開き、以下内容を設定します。

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

9.public\reportsディレクトリを作成し、サンプルレポートを作成するで作成したquick-start-sample.rdlx-jsonファイルを配置します。

10.次のコマンドを入力してVite.js Reactアプリケーションを実行します。

npm run dev

注意事項

Vite.js Reactアプリケーションを実行またはビルドする際、「'vite'は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」というエラーが発生する場合があります。

このエラーを回避するには、node_modulesフォルダを削除し、npm installを実行して必要なすべてのパッケージを再インストールします。次に、npm run devを再度実行します。