v2.0.0
v2.1.0v2.0.0v1.2.0

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 Report Viewer Component page for more information on how to integrate ActiveReportsJS viewer into 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 Report Viewer Component page for more information on how to integrate ActiveReportsJS viewer into 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 Report Viewer Component page for more information on how to integrate ActiveReportsJS viewer into 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 JavaScript Report Viewer Component page for more information on how to integrate ActiveReportsJS viewer into a JavaScript application.

Visit the Live Demo for the complete code examples.