保存报表

报表的存储类型以及保存在ActiveReportsJS设计器实例中显示的报表的确切方式取决于应用程序的体系结构。该页面提供了几种常见方案的实例。

启动 "保存" 和 "另存为" 按钮

ActiveReportsJS报表设计器组件在工具栏上包含“保存”和“另存为”按钮。

它们没有启用，默认情况下不可见。该代码应为设计器组件实例设置onSave和onSaveAs动作处理程序，以启用这些按钮。检查事件处理器页面以获取更多信息。页面以获取更多信息。 onSaveAs处理程序应返回Promise，该Promise解析为包含报告的id和可选displayName属性的对象-前者唯一标识报告，后者显示在设计器组件的顶部栏中。 onSave处理程序应返回Promise，该Promise解析为包含报告的可选displayName属性的对象。这是onSave和onSaveAs处理程序的示例，它们将报告保存在React应用程序的内存中。您可以使用类似的方法通过将请求发送到REST API来保存报告，因为这些处理程序是saync函数，它们返回Promise对象。

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

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  const counter = React.useRef<number>(0);
  const [reportStorage, setReportStorage] = React.useState(new Map());

  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");
    designerRef.current.setActionHandlers({
      onSave: function (info) {
        const reportId = info.id || `report${counter.current++}`;
        setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
        return Promise.resolve({displayName: reportId});
      },
      onSaveAs: function (info) {
        const reportId = info.id || `report${counter.current++}`;
        setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
        return Promise.resolve({id: reportId, displayName: reportId });
      },
    });
  }, []);
  return (
    <div id="designer-host"></div>
  );
};

请访问功能演示有关React，Angular，Vue和纯JavaScript应用程序的完整示例。

自动保存

ActiveReportsJS报表设计器组件实例的 processCommand方法接受save, saveAs, create, open, 和 render 之一。检查动作处理器页面以获取更多信息。设计器组件的getReport方法返回当前报告的信息，其中包括isDirty 标志，该标志指示自上次保存以来报告是否已更改。可以通过同时使用这两种方法来实现自动保存功能。这是React应用程序的这种方法的示例，Angular，Vue或纯JavaScript应用程序可以使用相同的技术。

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

export const DesignerHost: React.FC = () => {
  const designerRef = React.useRef<ReportDesigner | undefined>();
  React.useEffect(() => {
    designerRef.current = new ReportDesigner("#designer-host");

    // onSave and onSave handlers are defined here just as shown above

    const saveIntervalId = setInterval(async () => {
      const reportInfo = await designerRef.current?.getReport();
      if (reportInfo?.isDirty) {
        designerRef.current?.processCommand("save");
      }
    }, 2000);
    return () => clearInterval(saveIntervalId);
  }, []);
  return (
   <div id="designer-host"></div>
  );
};

保存报表

启动 "保存" 和 "另存为" 按钮

自动保存

相关链接