ActiveReports 15 .NET Edition
ActiveReports 15 User Guide / Preview Reports / JavaScript / Loading Reports in JSViewer
In This Topic
    Loading Reports in JSViewer
    In This Topic

    This topic provides you the code snippets for loading a report in JSViewer in different JavaScript frameworks.

    PureJS

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

    Angular
    app.component.ts
    Copy Code
    export class AppComponent implements AfterViewInit {
          title = "app";
          viewer: any;
           ngAfterViewInit() {
               this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
                  element: '#viewer-host'
               });
               this.viewer.openReport("DemoReport.rdlx");
           }
    }
    

    React
    App.js
    Copy Code
    export default class app extends Component {
        GrapeCity: any;
        constructor(props) {
            super(props);
        }
        componentDidMount() {
            this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewer-host',
                reportID: DemoReport.rdlx'
            });
        }
        componentDidUpdate() {
            this.viewer.openReport("DemoReport.rdlx");
        }
    }
    

    VueJS
    App.vue
    Copy Code
    export default {
      name: 'app',
      mounted() {
          this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
              element: '#viewer-host'
          });
          this.viewer.openReport("DemoReport.rdlx");
      }
    }
    

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