Get Started with ActiveReportsJS Report Viewer JavaScript Component

Create a JavaScript Application

Such an application consists of HTML markup, CSS styles, and JavaScript code. You can create an index.html file in your favorite text editor and insert the following code into that file.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>ARJS Report Viewer</title>
    <meta name="description" content="ARJS Report viewer" />
    <meta name="author" content="GrapeCity" />
  </head>

  <body></body>
</html>

Install ActivereportsJS

We distribute ActiveReportJS scripts and styles via both CDN and NPM. The easiest way to install the ActiveReportsJS report viewer for a JavaScript application is to add CDN-based references inside the HTML page's head tag. Check Installation for more information about required scripts and styles.

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

Add the Report Viewer Host element

Add the div element that will host the report viewer inside the body tag.

<div id="viewer-host"></div>

Add styles for the viewer-host element inside the head tag.

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

Add ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files.

In the application's root folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

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

Initialize Report Viewer component

Add the following script in the body tag right after the viewer-host element so that this script would run after the element is rendered. This code initializes the instance of the Report Viewer Component and opens the report template that you added in the previous step.

<script>
  var viewer = new ActiveReports.Viewer("#viewer-host");
  viewer.open("report.rdlx-json");
</script>

Run and test the application

You can use any static web-server to run the application. For example, if the http-server package is installed globally, you can run the http-server command from the application's root folder. Make sure that you open the app that runs on the localhost.

When the application starts, the ActiveReportsJS Viewer component will appear on the page. The viewer will display the report that shows "Hello, ActiveReportsJS Viewer" text. You can test the basic functionality by using buttons on the toolbar or exporting a report to one of the available formats.