V2
V2V1

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

相关链接