웹 애플리케이션에 React 보고서 뷰어를 추가하는 방법

If you already have a react app created, let’s start by installing the @grapecity/activereports-react package in your app through the terminal in Visual Studio Code with the following command:

    npm install @grapecity/activereports-react

If you don’t have a react app created, please create one first using the following command:

    npm init react-app arjs-viewer-app

Once the dependencies are installed into our project, we can add the styles to our App.css file to ensure the viewer component displays nicely. We will also style the #viewer-div element that will be hosting our viewer:

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

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

For the next step, we want to add an ARJS report file to our application. For now, let’s do this either by creating one through code or by dragging a designer-created report into our project folder. Either way, let’s put the report file into the /public directory within our app.

Since our reports use the .rdlx-json extension, we can format the properties and controls that will display within our report by using JSON syntax. For example, we can create a new file through the solution explorer by right-clicking the public folder and selecting 'New File'. Let’s name it ‘report-test.rdlx-json’. Within that file, add the following code:

    {
      "Name": "report-test",
      "Body": {
        "ReportItems": [
          {
            "Type": "textbox",
            "Name": "TextBox1",
            "Value": "Testing the textbox!",
            "Style": {
              "FontSize": "20pt"
            },
            "Width": "8.5in",
            "Height": "1.5in"
          }
        ]
      }
    }

Now in the App.js file, let’s add the following code to get the viewer component to show on our page. This will also link the report we just made to our viewer component.

    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;

Occasionally, we will encounter an error that blocks us from using ‘npm start’ while debugging our project. To fix this, change the start script in the package.json file to the following:

    "start": "react-scripts --max_old_space_size=8192 start"