Compatibility with AR.NET

OBSOLETE

Report type supported is .json.
State compatibility of report controls with older format (.rdlx)
Feature Comparison Table between AR.NET and ARJS

ARJS is represented on npm, and as with all npm packages, you need to have NodeJS installed on your computer to use it.

installation

The latest ARJS release version can be installed from npm by executing the following command from the NodeJS command prompt:

npm install @grapecity/arjs.purejs.all

This will install all of our pure JavaScript modules. If you want to install support for other frameworks or to install specific control modules, see: referencing npm.

Adding ARJS to your Application

First, add a host element to your application and give it an ID.

<div id="hostElement"></div>

ARJS package contains JavaScript modules in CommonJS format. You can use them along with tools that are capable of loading modules, like the Webpack bundler or SystemJS run-time module loader.

To import ARJS modules into your application backed by TypeScript or Babel you can use ES2015 import statements. All module names in import statements begin with the "@grapecity/" prefix, followed by the module name.

Referencing ActiveReportsJS from CDN

The ActiveRportsJS package is also published on CDN. In this case, there is nothing to download. Simply add the following lines to your HTML pages:

CDN LINKS UNAVAILABLE
<link href="https://cdn.grapecity.com/wijmo/5.20191.603/styles/wijmo.min.css" rel="stylesheet"/>

<head>
     <title>Export from custom buttons added on viewer toolbar</title>
    <meta charset="utf-8" />

     <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css">

    
    <script type="text/javascript" src="scripts/ie-polyfills.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-xlsx.js"></script>
    <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
    <script type="text/javascript" src="scripts/ar-js-html.js"></script> 
  <link rel="stylesheet" type="text/css" href="css/ar-js-viewer.css">

</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 600px ;width: 100%"></div>
    <script>
        function load() {
            viewer = new ActiveReports.Viewer('#ARJSviewerDiv'); 
                    
           // open rdlx-json file in viewer
            viewer.open('/reports/InvoiceList.rdlx-json');
        }
    </script>
</body>

### Using Traditional HTML

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,  
      * load React scripts,
      * add _div_ element to host the viewer (it requires container height to be defined),
      * create a react viewer component,   
      * open the report in viewer using [viewer.open()](@Api/classes/viewer.viewer-1.html#open) method and,
      * render the component.

The content of the HTML Page is as shown.

```xml
<html>
<head>
    <meta charset="UTF-8" />
    <title>ActiveReportsJS Viewer in React</title>
    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <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 src="scripts/ar-js-core.js"></script>
    <script src="scripts/ar-js-viewer.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');
        viewer.open("reports/InvoiceList.rdlx-json");
        }
        render() {
        return (
        <div ref="ARJSviewerDiv">
        </div>)
        }
        }
        ReactDOM.render(
        <App />,
        document.getElementById('ARJSviewerDiv')
        );
    </script>
</body>
</html>

View the HTML Page in your browser.