在 React 框架中集成 ActiveReportsJS

创建 React 应用

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

npx 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

添加 React 报表 Viewer 控件

修改 App.js(ts)代码:

import React from "react";
import "./App.css";
import "@grapecity/activereports/styles/ar-js-ui.css";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import { Viewer } from "@grapecity/activereports-react";

const report = {
  Type: "report",
  Body: {
    Name: "Body",
    Type: "section",
    ReportItems: [
      {
        Type: "textbox",
        Name: "textbox1",
        Style: { FontSize: "18pt" },
        Value: "Hello, ActiveReportsJS Viewer",
        Height: "10in",
      },
    ],
  },
  Name: "Report",
};

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

export default App;

在 index.css 文件中添加 viewer-host 元素：

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

运行

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

相关链接

• 功能演示
• React 开发向导