ActiveReportsJS v2.0 beta版—使用ActiveReportsJS设计器预览报表

使用ActiveReportsJS设计器预览报表
ActiveReportsJS报表设计器没有现成的预览功能，因此托管应用程序的代码必须进行设置。该页面提供了几种常见方案的。
启动 "预览" 按钮
ActiveReportsJS报表设计器组件在工具栏上包含“预览”按钮。 但是，默认情况下它未启用并且不可见。 该代码应为设计器组件实例设置`onRender`动作处理程序以启用此按钮。 检查 [动作处理器](Action-Handlers) 页面以获取更多信息。 当用户单击“预览”按钮时，ActiveReportsJS设计器将调用`onRender`处理程序。 设计器在第一个参数中传递当前显示的报表信息，该信息包括id，显示名称和报表定义。 `onRender`处理程序可以在ActiveReportJS查看器实例中加载报告定义，也可以将报表导出为支持的格式之一。 有关更多信息，请检查以下页面：
- [从JSON定义加载报告](../ActiveReportsJSViewer/Loading-Reports#loading-a-report-from-the-json-definition)
- [导出报告，而无需将它们加载到查看器中](../ActiveReportsJSViewer/Export/Export/index#export-reports-without-loading-them-in-the-viewer)
这是一个React应用程序的`onRender`处理程序示例，该应用程序在ActiveReportsJS Report Viewer中显示当前显示的报表。
javascript

1. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
2. import React from "react";
   
3. import {
   
4.   RDLReportDefinition,
   
5.   Viewer as ReportViewer,
   
6. } from "@grapecity/activereports-react";
   
7. import "@grapecity/activereports/styles/ar-js-ui.css";
   
8. import "@grapecity/activereports/styles/ar-js-viewer.css";
   
9. import "@grapecity/activereports/styles/ar-js-designer.css";
   
10. 
    
11. export const DesignerHost: React.FC = () => {
    
12.   const designerRef = React.useRef<ReportDesigner | undefined>();
    
13.   const viewerRef = React.useRef<ReportViewer | null>(null);
    
14. 
    
15.   React.useEffect(() => {
    
16.     designerRef.current = new ReportDesigner("#designer-host");
    
17.     designerRef.current.setActionHandlers({
    
18.       onRender(report) {
    
19.         viewerRef.current?.Viewer.open(
    
20.           report.definition as RDLReportDefinition
    
21.         );
    
22.         return Promise.resolve();
    
23.       },
    
24.     });
    
25.   }, []);
    
26. 
    
27.   return (
    
28.     <div id="app-host">
    
29.       <div id="designer-host"></div>
    
30.       <div id="viewer-host">
    
31.         <ReportViewer ref={viewerRef} />
    
32.       </div>
    
33.     </div>
    
34.   );
    
35. };

复制代码

预览报告以响应UI事件
应用程序可以使用ActiveReportJS设计器实例的 [getReport方法](@api/classes/reportdesigner.designer.html#getreport) 来获取当前显示的报表信息。 使用此方法可以添加自定义的“预览报表” UI，该UI可以将报表导出为支持的格式之一。 这是React应用程序的这种实现的示例。
javascript

1. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
2. import React from "react";
   
3. import "@grapecity/activereports/styles/ar-js-ui.css";
   
4. import "@grapecity/activereports/styles/ar-js-viewer.css";
   
5. import "@grapecity/activereports/styles/ar-js-designer.css";
   
6. import { Core, PdfExport } from "@grapecity/activereports";
   
7. import "@grapecity/activereports-localization";
   
8. 
   
9. export const DesignerHost: React.FC = () => {
   
10.   const designerRef = React.useRef<ReportDesigner | undefined>();
    
11. 
    
12.   const onPdfPreview = async () => {
    
13.     const reportInfo = await designerRef.current?.getReport();
    
14.     const report = new Core.PageReport();
    
15.     await report.load(reportInfo?.definition);
    
16.     const doc = await report.run();
    
17.     const result = await PdfExport.exportDocument(doc);
    
18.     result.download("exportedreport.pdf");
    
19.   };
    
20. 
    
21.   React.useEffect(() => {
    
22.     designerRef.current = new ReportDesigner("#designer-host", );
    
23.   }, []);
    
24. 
    
25.   return (
    
26.     <div id="app-host">
    
27.       <button onClick={() => onPdfPreview()} id="btn-get-pdf">
    
28.         Get PDF Report
    
29.       </button>
    
30.       <div id="designer-host"></div>
    
31.     </div>
    
32.   );
    
33. };

复制代码