V2
V2V1

保存报表

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

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

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

ARJS设计器

它们没有启用,默认情况下不可见。 该代码应为设计器组件实例设置onSaveonSaveAs动作处理程序,以启用这些按钮。 检查 事件处理器 页面以获取更多信息。 页面以获取更多信息。 onSaveAs处理程序应返回Promise,该Promise解析为包含报告的id和可选displayName属性的对象-前者唯一标识报告,后者显示在设计器组件的顶部栏中 。 onSave处理程序应返回Promise,该Promise解析为包含报告的可选displayName属性的对象。 这是onSaveonSaveAs处理程序的示例,它们将报告保存在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>
  );
};

相关链接