「Next.js」とActiveReportsJSで帳票を出力する | MESCIUS.devlog

JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」の最新バージョンV4Jでは新たに、Next.js、Nuxt.js、Svelteの3つのJavaScriptフレームワークをサポートに追加しました。今回はその中からReactベースのレンダリングフレームワークであるNext.jsと、ActiveReportsJSで帳票アプリケーションを作成する方法をご紹介いたします。

※ ActiveReportsJSでは「Next.js」や「Nuxt.js」といったレンダリングフレームワークのサポートはCSR（Client Side Rendering）のみとなります。

Next.jsアプリの作成
ActiveReportsJSのインストール
帳票ビューワコンポーネントの追加
ソースコードの修正
レポートファイルとフォントファイルの配置
アプリケーションの実行
さいごに

※ 以下、Node.jsが環境にインストールされていることが前提となります。インストールしていない場合は、あらかじめこちらより推奨版をインストールしてください。また、エディタとしてVisual Studio Codeを使用します。

Next.jsアプリの作成

Next.jsアプリの作成には、CLIツール「create-next-app」を使用します。

以下のコマンドを実行し、「nextjs-reporting-app」という名前のプロジェクトを作成します。

npx create-next-app@latest nextjs-reporting-app

実行すると、複数のプリセットの選択肢が表示されるので、次の画像のように設定します。

プロジェクトが作成されたら、以下のコマンドを実行し、プロジェクトのフォルダ配下に移動します。

cd nextjs-reporting-app

次に以下のコマンドを実行して開発サーバー上でアプリケーションを実行します。

npm run dev

ブラウザで「http://localhost:3000/」を参照すると以下のような画面が表示されます。また、ソースファイルを変更すると自動的に変更が反映されます。

ActiveReportsJSのインストール

次に以下のコマンドを実行し、ActiveReportsJSのReact用のパッケージおよびビューワを日本語化するためのローカライズパッケージをインストールします。
※ 2023年5月時点の最新の日本語版「V4J」をインストールします。

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

バージョンを指定せずに最新版をインストールする場合は以下のようにコマンドを実行します。

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

帳票ビューワコンポーネントの追加

次にアプリケーションのルート配下に「components」フォルダを作成し、その中に「ReportViewer.tsx」ファイルを追加し、以下の内容を記述します。

"use client";

import { Viewer } from "@grapecity/activereports-react";
import { Props as ViewerProps } from "@grapecity/activereports-react";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports-localization";
import React from "react";

// レポートビューワのデフォルトのテーマをインポートします。
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";

const ViewerWrapper = (props: ViewerWrapperProps) => {
  const ref = React.useRef<Viewer>(null);
  React.useEffect(() => {
    ref.current?.Viewer.open(props.reportUri);
  }, [props.reportUri]);
  return <Viewer {...props} ref={ref} />;
};
export type ViewerWrapperProps = ViewerProps & { reportUri: string };
export default ViewerWrapper;

ソースコードの修正

次に、「app/page.tsx」を次のように書き換えます。「components/ReportViewer.tsx」ファイルを動的インポートし、その際{ ssr: false }オプションを指定することで対象ファイルをSSR（サーバーサイドレンダリング）しないように設定します。

import type { NextPage } from "next";
import React from "react";
import { ViewerWrapperProps } from "../components/ReportViewer";

// 動的インポートを使用して、レポートビューワのラッパーをロードします。詳細については、「https://nextjs.org/docs/advanced-features/dynamic-import」を参照してください。
import dynamic from "next/dynamic";
const Viewer = dynamic<ViewerWrapperProps>(
  async () => {
    return (await import("../components/ReportViewer")).default;
  },
  { ssr: false }
);

const Home: NextPage = () => {
  return (
    <div
      style={{ width: "100%", height: "100vh" }}
    >
      <Viewer reportUri="reports/Invoice_green_ipa.rdlx-json" language="ja" />
    </div>
  );
};

export default Home;

レポートファイルとフォントファイルの配置

表示するレポートファイルは「public」フォルダ配下に配置します。また、PDFエクスポートを行う場合はフォントファイルも同フォルダ配下に配置します。

以下のGitHubで公開しているサンプルレポート（Invoice_green_ipa.rdlx-json）を「public/reports」フォルダに、フォントファイル（ipag.ttf）を「public/fonts」フォルダにそれぞれコピーして下さい。

配置したフォントファイルを読み込ませる為、「components/ReportViewer.tsx」へ次のコード（強調部分）を追加します。

"use client";

import { Viewer } from "@grapecity/activereports-react";
import { Props as ViewerProps } from "@grapecity/activereports-react";
import { FontStore } from "@grapecity/activereports/core";
import "@grapecity/activereports/pdfexport";
import "@grapecity/activereports-localization";
import React from "react";

// レポートビューワのデフォルトのテーマをインポートします。
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";

const ViewerWrapper = (props: ViewerWrapperProps) => {
  const ref = React.useRef<Viewer>(null);
  React.useEffect(() => {
    ref.current?.Viewer.open(props.reportUri);
    FontStore.registerFonts({
        name: "IPAゴシック",
        source: "fonts/ipag.ttf",
      });
  }, [props.reportUri]);
  return <Viewer {...props} ref={ref} />;
};
export type ViewerWrapperProps = ViewerProps & { reportUri: string };
export default ViewerWrapper;

アプリケーションの実行

以上でアプリケーションの作成は完了です。以下のコマンドを実行して、開発サーバー上でアプリケーションを起動します。

npm run dev

ブラウザで「http://localhost:3000/」を参照すると、ActiveReportsJSの帳票ビューワが表示され、作成した帳票の閲覧や、PDFなど各種形式への保存が実行できます。

さいごに

以上がNext.jsでActiveReportsJSを使用して帳票を出力する方法でした。ActiveReportsJSでは今回ご紹介したレンダリングフレームワークのNext.js以外にも、ReactやVue.js、AngularといったJSフロントエンドフレームワークでもご利用可能です。詳しくは以下の記事もご覧ください。

また、製品Webサイトでは、無料で試せるデモアプリケーションやトライアル版も公開しています。トライアル版では今回ご紹介できなかった帳票デザイナを含めたすべての機能が使用可能なほか、手元で動かして試せるサンプルも付属していますので、気になった方は是非一度お試しいただけますと幸いです。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／