React—Viewer集成

本实例详细讲解了如何在React中集成ActiveReportsJS Viewer

创建 React 应用

创建 React 应用参考链接，如使用npx 包运行工具：

npx create-react-app arjs-react-viewer-app

如果您使用的是yarn，执行命令：

yarn create react-app arjs-react-viewer-app

更多创建 React方法可参考官方文档

安装 ActivereportsJS NPM 包

React 报表 Viewer 组件已经放在了npm @grapecity/activereports-react npm 中。 @grapecity/activereports 包提供了全部的核心功能。

运行以下命令安装包：

npm install @grapecity/activereports-react @grapecity/activereports

或使用yarn命令

yarn add @grapecity/activereports-react @grapecity/activereports

导入 ActiveReportsJS 样式

打开 src\App.css 文件并添加以下代码，导入Viewer 的默认样式，定义了元素宿主的样式React Report Viewer 控件：

@import "@grapecity/activereports/styles/ar-js-ui.css";
@import "@grapecity/activereports/styles/ar-js-viewer.css";

#viewer-host {
  width: 100%;
  height: 100vh;
}

添加 ActiveReportsJS 报表

ActiveReportsJS 使用 JSON格式和 rdlx-json扩展报表模板文件。在应用程序的public文件夹中，创建名为 report.rdlx-json 的新文件，并在该文件中插入以下JSON内容：

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

添加 React 报表 Viewer 控件

修改 src\App.js代码:

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host"> <Viewer report={{ Uri: 'report.rdlx-json' }} /> </div>
  );
}

export default App;

运行和调试

使用 npm start 或 yarn start 命令运行项目

运行结果

Demo下载

arjs-viewer.rar

页面树结构