预览报表

ActiveReportsJS报表设计器没有现成的预览功能，因此托管应用程序的代码必须进行设置。该页面提供了几种常见方案的。

启动 "预览" 按钮

ActiveReportsJS报表设计器组件在工具栏上包含“预览”按钮。但是，默认情况下它未启用并且不可见。该代码应为设计器组件实例设置onRender动作处理程序以启用此按钮。检查事件处理器页面以获取更多信息。当用户单击“预览”按钮时，ActiveReportsJS设计器将调用onRender处理程序。设计器在第一个参数中传递当前显示的报表信息，该信息包括id，显示名称和报表定义。 onRender处理程序可以在ActiveReportJS查看器实例中加载报表定义，也可以将报表导出为支持的格式之一。有关更多信息，请检查以下页面：

这是一个React应用程序的onRender处理程序示例，该应用程序在ActiveReportsJS Report Viewer中显示当前显示的报表。

import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "react";
import {
  RDLReportDefinition,
  Viewer as ReportViewer,
} from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/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方法来获取当前显示的报表信息。使用此方法可以添加自定义的“预览报表” UI，该UI可以将报表导出为支持的格式之一。这是React应用程序的这种实现的示例。

import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import { Core, PdfExport } from "@grapecity/activereports";
import "@grapecity/activereports-localization";

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应用程序的完整示例。

预览报表

启动 "预览" 按钮

预览报表以响应UI事件

相关链接