APIを使用してレポートを作成する

ActiveReportsJSは、ビューワおよびWebデザイナコンポーネントに加えて、プログラムでレポートを作成し、PDF、Excel、およびHTML形式にエクスポートできるようにする一連のAPIを提供します。この機能は、カスタムデザイナまたはカスタムビューワを実装したり、対話的なUIを使用せずにレポートを作成、実行、およびエクスポートしたりするのに便利です。このチュートリアルでは、APIを使用してプログラムで簡単なレポートを作成し、PDFにエクスポートする方法を示します。フレームワークとしてReactjsとTypescriptを使用しているが、この手法は他のフレームワークにも適用されます。APIを最大限に活用するには、Typescriptを使用することをお勧めします。APIには、VSCodeまたはTypeScriptをサポートする他のIDEのIntelliSense機能で認識できる型宣言が用意されています。

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

新しいReactアプリケーションを作成する簡単な方法はパッケージランナーツールのcreate-react-appを使用することです。

次のコマンドを入力して、Typescriptテンプレートから新しいReactアプリケーションを作成します。

# npm 6.x
npm init react-app arjs-api --template typescript

# npm 7+ （追加のダブルハイフンが必要）
npm init react-app arjs-api -- --template typescript

npmパッケージをインストールする

API対応パッケージはnpmの@grapecity/activereportsパッケージに公開されています。このパッケージをインストールするには、アプリケーションのルートフォルダから次のコマンドを入力します。

npm install @grapecity/activereports

レポートサービスを実装する

srcフォルダに、reportService.tsという新しいファイルを作成し、以下の内容を設定します。

import { Rdl as ARJS, PageReport } from "@grapecity/activereports/core";
import { PdfExport } from "@grapecity/activereports";

export function buildReportDefinition(): ARJS.Report {
  const report: ARJS.Report = {};
  report.Width = "8.5in";
  report.Page = {
    TopMargin: "0.5in",
    BottomMargin: "0.5in",
    LeftMargin: "0.5in",
    RightMargin: "0.5in",
    PageWidth: "8.5in",
    PageHeight: "11in",
  };
  const textbox: ARJS.Textbox = { Type: "textbox", Name: "txtGreetings" };
  textbox.Value = "Hello, ActiveReportsJS";
  textbox.Style = {
    FontSize: "18pt",
  };
  textbox.Width = "7in";
  textbox.Height = "0.5in";
  report.Body = { ReportItems: [textbox] };
  return report;
}

export async function exportReport(
  reportDefinition: ARJS.Report
): Promise<PdfExport.PdfExportResult> {
  const pageReport = new PageReport();
  await pageReport.load(reportDefinition);
  const doc = await pageReport.run();
  return PdfExport.exportDocument(doc, {
    info: {
      title: "Generated by ActiveReportsJS",
    },
  });
}

最初の関数は、ActiveReportsJSのCore APIを使用してレポート定義を作成します。2番目の関数は、exportDocument関数を使用してレポートをPDFにエクスポートします。

レポートサービスを使用する

App.tsxファイルを開き、以下の内容を設定します。

import "./App.css";
import { buildReportDefinition, exportReport } from "./reportService";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <a
          className="App-link"
          href="."
          onClick={(e) => {
            e.preventDefault();
            const reportDefinition = buildReportDefinition();
            exportReport(reportDefinition)
              .then((result) => {
                result.download("ActiveReportsJSReport");
              })
              .catch(console.error);
          }}
        >
          Generate Report
        </a>
      </header>
    </div>
  );
}

export default App;

アプリケーションを実行する

次のコマンドを入力してReactアプリケーションを実行します。ページ上にWebデザイナコンポーネントが表示されます。レポートに、コントロールの追加、プロパティの設定、データソースを作成するなど、基本的な機能を確認できます。

npm start

Reactアプリケーションを実行する際、JavaScriptのメモリ割当が不足し、ヒープエラーが発生する場合があります。

このエラーを回避するには、package.jsonファイルを開き、startスクリプトに次の設定を追加します。

"start": "react-scripts --max_old_space_size=8192 start"