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

1. import React, { Fragment } from "react";
   
2. import {
   
3.   Designer as ReportDesigner,
   
4. } from "@grapecity/activereports/reportdesigner";
   
5. 
   
6. export const DesignerHost: React.FC = () => {
   
7.   const designerRef = React.useRef<ReportDesigner | undefined>();
   
8.   const counter = React.useRef<number>(0);
   
9.   const [reportStorage, setReportStorage] = React.useState(new Map());
   
10. 
    
11.   React.useEffect(() => {
    
12.     designerRef.current = new ReportDesigner("#designer-host");
    
13.     designerRef.current.setActionHandlers({
    
14.       onSave: function (info) {
    
15.         const reportId = info.id || `report${counter.current++}`;
    
16.         setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    
17.         return Promise.resolve({displayName: reportId});
    
18.       },
    
19.       onSaveAs: function (info) {
    
20.         const reportId = info.id || `report${counter.current++}`;
    
21.         setReportStorage(new Map(reportStorage.set(reportId, info.definition)));
    
22.         return Promise.resolve({id: reportId, displayName: reportId });
    
23.       },
    
24.     });
    
25.   }, []);
    
26.   return (
    
27.     <div id="designer-host"></div>
    
28.   );
    
29. };
    

复制代码

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

1. import {
   
2.   Designer as ReportDesigner,
   
3.   templates,
   
4. } from "@grapecity/activereports/reportdesigner";
   
5. import React, { Fragment } from "react";
   
6. import "@grapecity/activereports/styles/ar-js-ui.css";
   
7. import "@grapecity/activereports/styles/ar-js-designer.css";
   
8. 
   
9. export const DesignerHost: React.FC = () => {
   
10.   const designerRef = React.useRef<ReportDesigner | undefined>();
    
11.   React.useEffect(() => {
    
12.     designerRef.current = new ReportDesigner("#designer-host");
    
13. 
    
14.     // onSave and onSave handlers are defined here just as shown above
    
15. 
    
16.     const saveIntervalId = setInterval(async () => {
    
17.       const reportInfo = await designerRef.current?.getReport();
    
18.       if (reportInfo?.isDirty) {
    
19.         designerRef.current?.processCommand("save");
    
20.       }
    
21.     }, 2000);
    
22.     return () => clearInterval(saveIntervalId);
    
23.   }, []);
    
24.   return (
    
25.    <div id="designer-host"></div>
    
26.   );
    
27. };

复制代码

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

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

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

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

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