Load Reports

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

JS

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

Angular

import { Component, OnInit } from '@angular/core';
import { createViewer } from '@mescius/activereportsnet-viewer';
import '@mescius/activereportsnet-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

import { useEffect } from 'react';
 import './App.css';
 import { createViewer } from '@mescius/activereportsnet-viewer';
 import "@mescius/activereportsnet-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

<script>
     import { createViewer } from '@mescius/activereportsnet-viewer';
     import "@mescius/activereportsnet-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.