在 React 应用中展示报表数据

Posted 2021-09-04 LanLan_Guo

创建 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 命令运行项目，如果编译失败了，报以下错误，请删除node_modules 文件夹并重新运行 npm install 或 yarn命令来重新安装需要的包文件。

react-scripts start

internal/modules/cjs/loader.js:883
throw err;
^

Error: Cannot find module \'react\'
当应用程序启动时，ActiveReportsJS Viewer组件将出现在页面上。Viewer将显示显示“ Hello，ActiveReportsJS Viewer”文本的报表。您可以通过使用工具栏上的按钮或将报表导出为可用格式之一来测试。