レポートのプレビュー
Webデザイナコンポーネントでは、レポートをプレビューする機能が用意されていません。そのためホストアプリケーションのコードで設定する必要があります。このトピックでは、いくつかの一般的なシナリオについて説明しています。
［プレビュー］ボタンを有効にする
Webデザイナコンポーネントでは、ツールバーに［プレビュー］ボタンが含まれています。ただし、これは既定で無効になっています。このボタンを有効にするには、コードでWebデザイナコンポーネントのインスタンスに対してonRenderアクションハンドラを設定する必要があります。詳細については、アクションハンドラを参照してください。ユーザーが［プレビュー］ボタンを押すと、デザイナはonRenderハンドラを呼び出します。デザイナは、表示されているレポートのID、表示名、およびレポート定義などを含む情報を最初の引数に渡します。onRenderハンドラは、ActiveReportJSビューワのインスタンスにレポート定義をロードするか、サポートされている形式でレポートをエクスポートします。詳細については、次のセクションを参照してください。
以下は、ReactアプリケーションでonRenderハンドラを使用して、現在表示されているレポートをActiveReportsJSビューワに表示するサンプルです。
import { Designer as ReportDesigner } from "@mescius/activereportsjs/reportdesigner";
import React from "react";
import {
RDLReportDefinition,
Viewer as ReportViewer,
} from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";
export const DesignerHost: React.FC = () => {
const designerRef = React.useRef<ReportDesigner | undefined>();
const viewerRef = React.useRef<ReportViewer | null>(null);
React.useEffect(() => {
designerRef.current = new ReportDesigner("#designer-host");
designerRef.current.setActionHandlers({
onRender(report) {
viewerRef.current?.Viewer.open(
report.definition as RDLReportDefinition
);
return Promise.resolve();
},
});
}, []);
return (
<div id="app-host">
<div id="designer-host"></div>
<div id="viewer-host">
<ReportViewer ref={viewerRef} />
</div>
</div>
);
};React、Angular、Vue、およびJavaScriptアプリケーションの完全な実装例については、デモを参照してください。
UIイベントに応じてレポートをプレビューする
ActiveReportJSデザイナのインスタンスのgetReportメソッドを使用して、表示されているレポートの情報を取得できます。このメソッドを使用して、サポートされている形式でレポートをエクスポートするカスタムの［プレビュー］ボタンを追加します。以下は、Reactアプリケーションでこの方法を実装するサンプルです。
import { Designer as ReportDesigner } from "@mescius/activereportsjs/reportdesigner";
import React from "react";
import "@mescius/activereportsjs/styles/ar-js-ui.css";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs/styles/ar-js-designer.css";
import { Core, PdfExport } from "@mescius/activereportsjs";
import "@mescius/activereportsjs-i18n";
export const DesignerHost: React.FC = () => {
const designerRef = React.useRef<ReportDesigner | undefined>();
const onPdfPreview = async () => {
const reportInfo = await designerRef.current?.getReport();
const report = new Core.PageReport();
await report.load(reportInfo?.definition);
const doc = await report.run();
const result = await PdfExport.exportDocument(doc);
result.download("exportedreport.pdf");
};
React.useEffect(() => {
designerRef.current = new ReportDesigner("#designer-host", );
}, []);
return (
<div id="app-host">
<button onClick={() => onPdfPreview()} id="btn-get-pdf">
Get PDF Report
</button>
<div id="designer-host"></div>
</div>
);
};React、Angular、Vue、およびJavaScriptアプリケーションの完全な実装例については、デモを参照してください。