ActiveReportsJS v2.0 beta版—使用ActiveReportsJS设计器预览报表
本帖最后由 KearneyKang 于 2020-11-17 17:55 编辑使用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
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "react";
import {
RDLReportDefinition,
Viewer as ReportViewer,
} from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
export const DesignerHost: React.FC = () => {
const designerRef = React.useRef<ReportDesigner | undefined>();
const viewerRef = React.useRef<ReportViewer | null>(null);
React.useEffect(() => {
designerRef.current = new ReportDesigner("#designer-host");
designerRef.current.setActionHandlers({
onRender(report) {
viewerRef.current?.Viewer.open(
report.definition as RDLReportDefinition
);
return Promise.resolve();
},
});
}, []);
return (
<div id="app-host">
<div id="designer-host"></div>
<div id="viewer-host">
<ReportViewer ref={viewerRef} />
</div>
</div>
);
};预览报告以响应UI事件
应用程序可以使用ActiveReportJS设计器实例的 [getReport方法](@api/classes/reportdesigner.designer.html#getreport) 来获取当前显示的报表信息。 使用此方法可以添加自定义的“预览报表” UI，该UI可以将报表导出为支持的格式之一。 这是React应用程序的这种实现的示例。
javascript
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
import React from "react";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports/styles/ar-js-designer.css";
import { Core, PdfExport } from "@grapecity/activereports";
import "@grapecity/activereports-localization";
export const DesignerHost: React.FC = () => {
const designerRef = React.useRef<ReportDesigner | undefined>();
const onPdfPreview = async () => {
const reportInfo = await designerRef.current?.getReport();
const report = new Core.PageReport();
await report.load(reportInfo?.definition);
const doc = await report.run();
const result = await PdfExport.exportDocument(doc);
result.download("exportedreport.pdf");
};
React.useEffect(() => {
designerRef.current = new ReportDesigner("#designer-host", );
}, []);
return (
<div id="app-host">
<button onClick={() => onPdfPreview()} id="btn-get-pdf">
Get PDF Report
</button>
<div id="designer-host"></div>
</div>
);
};
页:
[1]