Loading reports as static assets

A static asset is a resource that a web-application handles without applying transformations such as minification, bundling together with other resources, or cache-busting. The application's code can refer to such a resource using its path relative to the compiled application's root folder. Images and fonts are typical static assets.

We recommend using static assets for report templates if

• report templates do not change often

• reports do not require modifications before loading

• report templates do not require runtime data binding

• exposing report templates for direct download is acceptable

Loading reports as static assets in an Angular application

The default assets configuration of an Angular application copies the src/assets folder to the output as-is. Hence, you can copy report templates to that folder and then use the relative report file path for the argument of the open method of the Angular Report Viewer component, for example:

import { Component, ViewChild } from '@angular/core';
import { ViewerComponent } from '@grapecity/activereports-angular';

@Component({
  selector: "app-root",
  template:
    '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </gc-activereports-viewer></div> ',
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent;
  onViewerInit() {
    this.reportViewer.open('assets/report.rdlx-json');
  }
}

Check the Get Started with ActiveReportsJS Report Viewer Angular Component page for the step-by-step guideline for this approach.

Loading reports as static assets in a React application

Create React App allows developers to keep static assets in the public folder. Hence, you can copy report templates to that folder and then use the relative report file path for the report property of the React Report Viewer component, for example:

import React from "react";
import "./App.css";
import { Viewer } from "@grapecity/activereports-react";

function App() {
  return (
    <div id="viewer-host">
      <Viewer report={{ Uri: 'report.rdlx-json' }} />
    </div>
  );
}

export default App;

Check the Get Started with ActiveReportsJS Report Viewer React Component page for the step-by-step guideline for this approach.

Alternatively you can pass the URL of the report template in the viewer.open method:

function App() {
  const viewerRef = React.useRef<Viewer>(null);
  React.useEffect(() => {
    const viewerInstance = viewerRef.current.Viewer;
    viewerInstance.open('report.rdlx-json');
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
};

Check the Loading Report Live Demo for the full example of using this approach.

Loading reports as static assets in a Vue application

Vue CLI allows developers to keep static assets in the public folder. Hence, you can copy report templates to that folder and then use the relative report file path for the report property of the Vue Report Viewer component, for example:

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

Check the Get Started with ActiveReportsJS Report Viewer Vue Component page for the step-by-step guideline for this approach.

Alternatively you can pass the URL of the report template in the viewer.open method:

<template>
  <div id="viewer-host">
    <JSViewer ref="reportViewer"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";


export default {
  name: "App",
  components: {
    JSViewer: Viewer
  },
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    viewer.open('report.rdlx-json');
  }
};

Check the Loading Report Live Demo for the full example of using this approach.

Loading reports as static assets in a JavaScript application

In such an application, you can copy report templates to the application's distribution folder and then use the relative report file path for the argument of the open method of the JavaScript Report Viewer component, for example:

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

Check the Get Started with ActiveReportsJS Report Viewer JavaScript Component page for the step-by-step guideline for this approach.