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

ActiveReportsJS in PureJS

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

ExpressJS application

Prerequisite:

  • Node.js
  • Express: Install by typing following command in command prompt
   yarn add express

The following steps create an ExpressJS application.

  1. Create a new directory to contain your application - in the command console, type
   Mkdir arjs-js
  1. Make this directory your working directory
   cd arjs-js
  1. Install the ActiveReportsJS module
   yarn add @grapecity/activereports
  1. Create 'index.html' with following content:
   <head>
       <title>ActiveReportsJS Viewer</title>
       <meta charset="utf-8" />

       <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
       <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.full.js"></script> <!--to run in IE-->
       <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
       <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
   </head>
   <body onload="load()">
       <div id="ARJSviewerDiv" style="height: 100%"></div>
       <script>
           function load() {
               const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
               viewer.open('/reports/InvoiceList.rdlx-json');
         }
       </script>
   </body>
  1. Create web server by adding file 'server.js' with following content:
   const express = require('express'); //import Express.js module
   const app = express();
   const path = require('path'); 
   app.use(express.static(path.join(__dirname)));
   app.listen(8085);
  1. In the command console, type
   node .\server.js
  1. Open 'localhost:8085' in your browser.
    You will get a running application.

ASP.Net Web application

The following steps create an ASP.NET Web application.

  1. Create an Empty ASP.Net Web Application.

  2. Add an HTML Page to your project.

  3. Create 'scripts' folder in your project's root and include following ActiveReportsJS scripts:

    • 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

  4. Create 'css' folder in your project's root and include ar-js-viewer.css stylesheet.

  5. Create 'reports' folder and include the report you want to view.

  6. Modify the content of the added HTML Page to

    • add necessary references of the viewer scripts and css styles,
    • add div element to host the viewer (it requires container height to be defined),
    • initialize the viewer component, and,
    • open the report in viewer using viewer.open() method.

The content of the HTML Page is as shown.

    <head>
        <title>ActiveReportsJS Viewer</title>
        <meta charset="utf-8" />

        <link rel="stylesheet" href="css/ar-js-viewer.css" />
        <script type="text/javascript" src="scripts/ie-polyfills.full.js"></script> <!--to run in IE-->
        <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 onload="load()">
        <div id="ARJSviewerDiv" style="height: 100%"></div> <!--define container height-->
        <script>
            function load() {
                const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
                viewer.open('/reports/InvoiceList.rdlx-json');
            }
        </script>
    </body>
  1. View the HTML Page in your browser. You will get a running application.

Configure ARJS Viewer

Note:
• The ar-js-core.js script must be loaded before 'ar-js-viewer.js' script.
• If Internet Explorer 11 support is required, you need to add ie-polyfills.full.js script above 'ar-js-core.js' and 'ar-js-viewer.js' scripts.
• You may need to add .rdlx-json MIMEType to your web configuration file depending on the web server, as shown

 <system.webServer>
     <staticContent>
       <mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
     </staticContent>
 </system.webServer>