ActiveReports 18 .NET Edition
Developers / Create Applications / Js Viewer Application / Load Reports
In This Topic
    Load Reports
    In This Topic

    This topic provides you with the code examples for loading a report in Js Viewer in different JavaScript frameworks.

    JS

    Index.cshtml
    Copy Code
    var viewer = new GrapeCity.ActiveReports.JSViewer.create({
        element: '#viewer-host'
    });
    viewer.openReport("DemoReport.rdlx");
    

    Angular
    app.component.ts
    Copy Code
    import { Component, OnInit } from '@angular/core';
    import { createViewer } from '@mescius/activereportsnet-viewer';
    import '@mescius/ar-viewer/dist/jsViewer.min.css'; 
    @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrl: './app.component.css'
     })
     export class AppComponent implements OnInit {
       title = "app";
     
       ngOnInit() {
         this.viewer = createViewer({
           element: '#viewer-host'
         });
         this.viewer.openReport("DemoReport.rdlx");
       }
       }
    

    React
    App.jsx
    Copy Code
    import { useEffect } from 'react';
     import './App.css';
     import { createViewer } from '@mescius/activereportsnet-viewer';
     import "@mescius/ar-viewer/dist/jsViewer.min.css";
    function App() {
        useEffect(() => {
             const viewer = createViewer({
                 element: '#viewer-host',
                 reportID: "DemoReport.rdlx"
             });
            return () => {
                 viewer.destroy();
             };
         }, []);
        return (
             <div id="viewer-host" className="viewer-host" />
         );
     }
    export default App;
    

    VueJS
    App.vue
    Copy Code
    <script>
         import { createViewer } from '@mescius/activereportsnet-viewer';
         import "@mescius/ar-viewer/dist/jsViewer.min.css";
         export default {
             name: 'app',
             mounted() {
                 let serverUrl = 'http://localhost:5151';
               
                 this.viewer = createViewer({
                     element: '#viewer-host',
                     reportService: {
                         url: serverUrl + '/api/reporting'
                     }
                 });
                 this.viewer.openReport("DemoReport.rdlx");
             }
         }
     </script>
     <style>
         #viewer-host {
             background-color: #e5e5e5;
             height: 100vh;
             float: right;
             width: 100%;
         }
     </style>
    

    To load the most updated version of the report in the viewer, use the Refresh button.