ActiveReportsJS v2.0 beta版—使用ActiveReportsJS设计器保存报表

登录

使用ActiveReportsJS设计器保存报表
报表的存储类型以及保存在ActiveReportsJS设计器实例中显示的报表的确切方式取决于应用程序的体系结构。该页面提供了几种常见方案的实例。
启动 "保存" 和 "另存为" 按钮
ActiveReportsJS报表设计器组件在工具栏上包含“保存”和“另存为”按钮。

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

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>
);
};

复制代码

自动保存
ActiveReportsJS报表设计器组件实例的 [processCommand](@api/classes/reportdesigner.designer.html#processcommand)方法接受`save,` `saveAs,` `create,` `open,` 和 `render` 之一。检查 [动作处理器](Action-Handlers) 页面以获取更多信息。设计器组件的`getReport`方法返回当前报告的信息，其中包括`isDirty` 标志，该标志指示自上次保存以来报告是否已更改。可以通过同时使用这两种方法来实现自动保存功能。这是React应用程序的这种方法的示例，Angular，Vue或纯JavaScript应用程序可以使用相同的技术。
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>
);
};

复制代码

唐唐唐 · 唐唐唐

有纯js版本的吗，后端开发不懂react。

KearneyKang · KearneyKang

你好，纯JS版本的没有。你现在使用的是Vue还是其他前端框架

fumasoft · fumasoft

VUE如何自动保存，麻烦提供一下案例

Bella.Yuan · Bella.Yuan

fumasoft 发表于 2022-1-17 14:12
VUE如何自动保存，麻烦提供一下案例

您好，方便的话重新发个帖子，帮您看看哦！

		自动登录	找回密码
密码			立即注册

ActiveReportsJS v2.0 beta版—使用ActiveReportsJS设计器保存报表

本帖子中包含更多资源

5 个回复

圣诞拼拼乐

微信认证勋章

讲师达人

悬赏达人

元老葡萄

Wyn高级认证

Wyn认证