Demos
Docs
API
More Samples
Download
Getting Started
Quick Start
React
V1
V1

ActiveReportsJS in React

Let us see how to create a web application in React framework that uses the ActiveReportsJS Viewer component.

Using Node Package Manager

Prerequisites

  • Node.js
  • npm
  • Create React App - Install the global tool for React application using
    npm install create-react-app -g

      or

   yarn global add create-react-app

The following steps create a React application.

  1. Create a new React application by typing following command in command console
   create-react-app arjs-react
  1. Make this directory your working directory
   cd arjs-react
  1. Install the following ActiveReportsJS modules in the project
   yarn add @grapecity/activereport
  1. Modify 'src/app.js' file to import required stylesheet and scripts:
   import React from 'react';
   import '@grapecity/activereports/styles/ar-js-viewer.css';
   import { Viewer } from '@grapecity/activereports';
   import { PdfExport, HtmlExport, XlsxExport, Core } from '@grapecity/activereports';

   class App extends React.Component {
     componentDidMount() {
         var v = new Viewer.Viewer('#ARJSviewerDiv');  
         v.open({
           "Type": "report",
           "Body": {
             "Name": "Body",
             "Type": "section",
             ReportItems: [
               { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReportsJS", Height: "10in" }
             ]
           },
           "Name": "Report"
         });
     }

     render() {
         return <div className="App" id="ARJSviewerDiv" style={{height: '800px'}} />;
     }
   }
   export default App;
  1. In the command console, type following command to run the application
   yarn start

You will get a running application in the browser.

Using Traditional HTML

  1. Download the React HTML template. You can download the template from https://reactjs.org/docs/try-react.html2.

  2. Add following ActiveReportsJS Viewer stylesheet and scripts to HTML template

    • ar-js-viewer.css
    • ar-js-core.js
    • ar-js-viewer.js

    To add export functionality, add following additional scripts:

    • ar-js-pdf.js
    • ar-js-xlsx.js
    • ar-js-html.js

  3. Modify the content of the HTML Page as shown.

<head>
    <meta charset="UTF-8" />
    <title>ActiveReportsJS Viewer in React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <link href="css/ar-js-viewer.css" rel="stylesheet" />
    <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script>
    <script type="text/javascript" src="scripts/ar-js-core.js"></script>
    <script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
    <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
    <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
    <script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body>
    <div id="ARJSviewerDiv" style="height:100%"></div>
    <script type="text/babel">
        class App extends React.Component {
        constructor(props) {
        super(props);
        }
        componentDidMount() {
        var viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
        viewer.open({
        "Type": "report",
        "Body": {
        "Name": "Body",
        "Type": "section",
        ReportItems: [
        { Type: "textbox", Name: "textbox1", Value: "Hello from ActiveReportsJS", Height: "10in" }
        ]
        },
        "Name": "Report"
        });
        }
        render() {
        return (
        <div ref="ARJSviewerDiv">
        </div>)
        }
        }
        ReactDOM.render(
        <App />,
        document.getElementById('ARJSviewerDiv')
        );
    </script>
</body>
  1. View the HTML Page in your browser.