[]
示例 参考文档 主题编辑器 API文档
立即试用
(Showing Draft Content)

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

相关链接