Display report data in react application

Time:2021-7-25

Create react app

Create a reference link for react application, such as using NPX package to run tools:

npx create-react-app arjs-react-viewer-app
If you are using yarn, execute the command:

yarn create react-app arjs-react-viewer-app
For more ways to create react, please refer to the official documentation

Install activereportsjs NPM package

The react report viewer component has been placed in NPM @ gravity / activereports react [email protected] The graicity / activereports package provides all the core functionality.

Run the following command to install the package:

npm install @grapecity/activereports-react @grapecity/activereports
Or use the yarn command

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

Import activereportsjs style

Open the SRC \ app.css file and add the following code to import the default style of the viewer and define the style of the element host: react report viewer control:

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

viewer-host {

width: 100%;
height: 100vh;
}

Add activereportsjs Report

Activereports JS uses JSON format and rdlx JSON to extend report template files. In the public folder of the application, create a new file named report.rdlx-json, and insert the following JSON content into the file:

{
“Name”: “Report”,
“Body”: {

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

}
}

Add react report viewer control

Modify SRC \ app.js Code:

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;

Operation and commissioning

Use NPM start or yarn start to run the project. If the compilation fails, the following error is reported. Please delete the node_ Modules folder and rerun the NPM install or yarn command to reinstall the required package files.

react-scripts start

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

Error: Cannot find module ‘react’
When the application starts, the activereportsjs viewer component appears on the page. The viewer displays a report that displays the Hello, activereportsjs viewer text. You can test by using the buttons on the toolbar or exporting the report to one of the available formats.