Viewer Component Integration

These samples show how to integrate the ActiveReportsJS Viewer component into Angular, React, Vue, and pure JavaScript applications. For more details, please visit the Integration page. To view the code, scroll down the page.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
app.component.ts
app.component.css
app.module.ts
index.html
Copy to CodeMine
loading...
import { Component, ViewChild } from "@angular/core"; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; @Component({ selector: "app-root", template: '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()" theme="ActiveReports"> </gc-activereports-viewer></div> ', styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; onViewerInit() { this.reportViewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } }
import { Component, ViewChild } from "@angular/core"; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, TabularDataExportService, } from "@mescius/activereportsjs-angular"; @Component({ selector: "app-root", template: '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()" theme="ActiveReports"> </gc-activereports-viewer></div> ', styleUrls: ["src/app.component.css"], providers: [ { provide: AR_EXPORTS, useClass: PdfExportService, multi: true, }, { provide: AR_EXPORTS, useClass: HtmlExportService, multi: true, }, { provide: AR_EXPORTS, useClass: TabularDataExportService, multi: true, }, ], }) export class AppComponent { @ViewChild(ViewerComponent, { static: false }) reportViewer: ViewerComponent; onViewerInit() { this.reportViewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } }
#viewer-host { width: 100%; height: 600px; }
import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core"; import { ReactiveFormsModule } from "@angular/forms"; import { AppComponent } from "./app.component"; import { ActiveReportsModule } from "@mescius/activereportsjs-angular"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, ReactiveFormsModule, ActiveReportsModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
(function (global) { SystemJS.config({ transpiler: './plugin-typescript.js', typescriptOptions: { "target": "ES2022", "module": "system", "emitDecoratorMetadata": true, "experimentalDecorators": true, }, baseURL: './node_modules/', meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'systemjs-plugin-css' } }, packageConfigPaths: [ '/node_modules/*/package.json', "/node_modules/@angular/*/package.json", "/node_modules/@mescius/*/package.json" ], map: { 'typescript': 'typescript/lib/typescript.js', "rxjs": "rxjs/dist/bundles/rxjs.umd.js", "rxjs/operators": "rxjs/dist/bundles/rxjs.umd.js", "@angular/core/primitives/signals": "@angular/core/fesm2022/primitives/signals.mjs", "@angular/common/http": "@angular/common/fesm2022/http.mjs", "@mescius/activereportsjs/core": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs": "./activereports.js", "@mescius/activereportsjs/reportdesigner":"./activereports.js", "@mescius/ar-js-pagereport": "@mescius/activereportsjs/dist/ar-js-core.js", "@mescius/activereportsjs-i18n": "@mescius/activereportsjs-i18n/dist/ar-js-locales.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: 'ts' }, "node_modules": { defaultExtension: 'js' }, "@angular/core": { defaultExtension: 'mjs', "main": "fesm2022/core.mjs" }, "@angular/platform-browser": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser.mjs" }, "@angular/common": { defaultExtension: 'mjs', "main": "fesm2022/common.mjs" }, "@angular/compiler": { defaultExtension: 'mjs', "main": "fesm2022/compiler.mjs" }, "@angular/forms": { defaultExtension: 'mjs', "main": "fesm2022/forms.mjs" }, "@angular/localize": { defaultExtension: 'mjs', "main": "fesm2022/localize.mjs" }, "@angular/platform-browser-dynamic": { defaultExtension: 'mjs', "main": "fesm2022/platform-browser-dynamic.mjs" }, "@mescius/activereportsjs-angular": { defaultExtension: "mjs", main: "fesm2022/grapecity-activereports-angular.mjs", }, } }); })(this);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Integration Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Polyfills --> <script src="node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <script> System.import("./src/app.main"); </script> </head> <body> <app-root></app-root> </body> </html>