[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

加载报表

setReport 方法允许将特定的报表加载到ActiveReportsJS设计器组件的实例。 此方法接受应用程序内可访问的URL：setReport({<id: URL>}) 或报表定义对象： setReport({definition: <ReportDefinition>})：setReport（{definition：<ReportDefinition>}）可选地，传递给setReport方法的对象可以包含displayName属性，该属性指示报告的个性化名称。 id属性的值最初与setReport（{<id：URL>}）表单的URL匹配，并且可以与setReport（{definition：<ReportDefinition>}）的参数一起传递，传递形式也是如此。

该页面提供了几种常见方案实例。

设置最初显示的报表

默认情况下，ActiveReportsJS报表设计器组件的实例显示空白的RDL报表。 要更改此行为，请在设计器实例初始化后立即调用setReport方法。 查看 集成文档 页面， 以获取有关在各种应用程序类型中初始化设计器组件的更多信息。 这是在React应用程序中设置初始显示的报表的示例。 访问 功能演示 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  // set the initially displayed report to "company-template"
  designer.setReport({ id: "/reports/company-template.rdlx-json" });
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

启用 "新建报表" 按钮

ActiveReportsJS报表设计器组件在工具栏上包含新建报表按钮。 但是，默认情况下它未启用并且不可见。 该代码应为设计器组件实例设置"onCreate"动作处理程序以启用此按钮。 检查 Action Handlers 检查[Action Handlers]（Action-Handlers）页面以获取更多信息。 onCreate 处理程序应返回解析为报告链接或报告定义的Promise，这些对象的结构与上述setReport参数相同。 这是React应用程序的onCreate处理程序的示例。 访问功能演示 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

const initDesigner = (designerHostSelector) => {
  const designer = new ReportDesigner(designerHostSelector);
  designer.setActionHandlers({
    onCreate: function () {
      return Promise.resolve({ id: "/reports/company-template.rdlx-json" });
    },
  });
};

export const DesignerHost = () => {
  React.useEffect(() => initDesigner("#designer-host"), []);
  return <div id="designer-host"></div>;
};

启用 "打开报表" 按钮

ActiveReportsJS报表设计器组件在工具栏上包含打开按钮。 但是，默认情况下它未启用并且不可见。 该代码应为设计器组件实例设置onOpen动作处理程序以启用此按钮。 查看事件处理器页面以获取更多信息。 onOpen处理程序应返回解析为报告链接或报告定义的Promise，这些对象的结构与上述setReport参数相同。 访问 功能演示 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。

加载报表以响应UI事件

应用程序可以在任何时间使用setReport 方法加载报表。这是React应用程序的示例，该应用程序在位于设计器组件外部的按钮的click事件处理程序中调用setReport方法。访问 功能演示 以获取有关React，Angular，Vue和纯JavaScript应用程序的完整示例。

import React from "react";
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");
  }, []);
  const resetDesigner = (reportId: string) => {
    designerRef.current?.setReport({ id: reportId });
  };
  return (
    <Fragment>
      <button onClick={() => resetDesigner("/reports/company-template.rdlx-json")}>
        Set New Report
      </button>
      <div id="designer-host"></div>
    </Fragment>
  );
};

相关链接