与React框架集成报表Viewer
此页面提供了React的ActiveReportsJS报表查看器集成的详细概述。你可以查看入门指南教程，以获取有关将该包装程序集成到React应用程序的简明指南。
ActiveReportsJS React NPM软件包
我们通过@grapecity/activereports-react npm软件包分发了包含用于React组件的ActiveReportsJS报表查看器包装的库。主要的 @grapecity/activereports 软件包提供了核心功能。
ActiveReportsJS React Viewer 组件
ActiveReportsJS React Viewer组件可以导入到JSX（TSX）文件中，并包含在组件的渲染树中，例如：
import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
return (
<div>
<ReportViewer />
</div>
);
}
查看器组件接受以下属性。
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| availableExports | Array of strings | 设置查看器UI中应该可用的导出列表。 有关更多信息，请参见 导出 页面 | |
| mouseMode | 'Pan' | 'Selection' | 'Pan' | 设置查看器组件的鼠标模式。 |
| renderMode | 'Galley' | 'Paginated' | 'Paginated' | 设置查看器组件的渲染模式 |
| viewMode | 'Continuous' | 'SinglePage' | 'Continuous' | 设置查看器组件的查看模式 |
| zoom | 'FitWidth' | 'FitPage' | number | 100 | 设置查看器组件的缩放模式 |
| fullscreen | boolean | false | 指示查看器组件是否应以全屏模式显示内容 |
| toolbarVisible | boolean | true | 指示查看器组件的工具栏是否可见 |
| sidebarVisible | boolean | true | 指示Viewer组件的侧边栏是否可见 |
| panelsLayout | 'sidebar' | 'toolbar' | 'toolbar' | 指示“查看器”和“导出”功能在Viewer组件的UI中的位置 |
| parameterPanelLocation | 'default' | 'top' | 'bottom' | 'default' | 指示参数栏在Viewer组件的UI中的位置 |
| toolbarLayout | Object | 设置可用工具栏项目的列表。 有关更多信息，请参见自定义 页面 | |
| language | string | 设置查看器UI的语言。 有关更多信息，请参见[本地化]（本地化）页面 | |
| exportsSettings | object | 设置导出设置。 访问[导出设置]（“导出/导出设置”）页面以获取更多信息。 | |
| report | Object | 将报表加载到Viewer组件中。 有关更多信息，请参见加载报表部分 | |
| reportLoaded | (args: ReportLoadedEventArgs)=>void | 设置在加载报表但呈现之前发生的事件的处理程序 | |
| documentLoaded | (args: DocumentLoadedEventArgs)=>void | 设置报表呈现完成时发生的事件的处理程序 | |
| errorHandler | ()=> void | 设置如果报表呈现导致错误发生的事件的处理程序 |
您可以将这些输入属性绑定到动态值以完全覆盖查看器组件的默认UI，请查看自定义页面 以获取更多的信息。
同样，父组件可以通过为Viewer组件创建ref并使用其Viewer属性来访问 Report Viewer的方法和属性 例如：
import { Viewer as ReportViewer } from "@grapecity/activereports-react";
function App() {
const viewerRef = React.createRef();
const btnClick = function () {
viewerRef.current.Viewer.toggleFullScreen();
};
return (
<div id="viewer-host">
<button type="button" onClick={btnClick}>
Full Screen
</button>
<ReportViewer ref={viewerRef} />
</div>
);
}