Loading reports as JSON resources

Suppose you plan to keep report templates on the server-side and fetch them at runtime on demand. ActiveReportsJS uses JSON format and the rdlx-json extension for report template files. Therefore an application can fetch a report template like any other JSON resource. Once the template's JSON is delivered, you can pass it to the viewer.open method. The following examples show the code of Angular, React, and Vue TypeScript components using the described approach. These examples assumed that the /reports/Invoice request returns the report template content. They also show how to modify a report before loading it into the Report Viewer.

Angular component

import { ViewerComponent } from "@grapecity/activereports-angular";
@Component({
  selector: "app-root",
  template:
    "<gc-activereports-viewer (init)='onViewerInit()'> </gc-activereports-viewer>",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  @ViewChild(ViewerComponent) reportViewer: ViewerComponent;
  onViewerInit() {
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        this.report.open(report);
      });
  }
}

Check the Angular Viewer Component page for more information on how to integrate ActiveReportsJS viewer in an Angular application.

React component

import { Viewer } from "@grapecity/activereports-react";

function App() {
  const viewerRef = React.useRef();

  React.useEffect(() => {
    async function loadReport() {
      await fetch("/reports/Invoice")
        .then((data) => data.json())
        .then((report) => {
          report.Page.PageOrientation = "Landscape";
          viewerRef.current.Viewer.open(report);
        });
    }
    loadReport();
  }, []);
  return (
    <div id="viewer-host">
      <Viewer ref={viewerRef} />
    </div>
  );
}

Check the React Viewer Component page for more information on how to integrate ActiveReportsJS viewer in a React application.

Vue component

import { Viewer as ReportViewer } from "@grapecity/activereports-vue";

new Vue({
  el: "#app",
  components: { "arjs-viewer": ReportViewer },
  template: "<arjs-viewer ref='reportViewer' />",
  mounted() {
    const viewer = this.$refs.reportViewer.Viewer();
    fetch("/reports/Invoice")
      .then((data) => data.json())
      .then((report) => {
        report.Page.PageOrientation = "Landscape";
        viewer.open(report);
      });
  },
});

Check the Vue Viewer Component page for more information on how to integrate ActiveReportsJS viewer in a Vue application.

JavaScript component

var viewer = new ActiveReports.Viewer("#viewer-host");
fetch("/reports/Invoice")
  .then((data) => data.json())
  .then((report) => {
    report.Page.PageOrientation = "Landscape";
    viewer.open(report);
  });

Check the Pure JavaScript integration page for more information on how to integrate ActiveReportsJS viewer in a pure javascript application.

Visit the Live Demo for the complete code examples.