Viewer Component Integration

These samples show how to integrate the ActiveReportsJS Viewer component into Angular, React, Vue, and pure JavaScript applications. Visit the Integration page for more information. Scroll down the page to see the code.

import { Component, ViewChild } from "@angular/core"; import { ViewerComponent, AR_EXPORTS, PdfExportService, HtmlExportService, XlsxExportService, } from "@grapecity/activereports-angular"; @Component({ selector: "app-root", template: '<div id="viewer-host"><gc-activereports-viewer (init)="onViewerInit()"> </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: XlsxExportService, 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 { AppComponent } from './app.component'; import { ActiveReportsModule } from '@grapecity/activereports-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ActiveReportsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
(function (global) { System.config({ transpiler: "ts", typescriptOptions: { tsconfig: true, }, meta: { typescript: { exports: "ts", }, "*.css": { loader: "css" }, }, paths: { // paths serve as alias "npm:": "node_modules/", "arjs:": "node_modules/@grapecity/activereports/", }, // map tells the System loader where to look for things map: { "rxjs/operators": "rxjs-operators.js", rxjs: "npm:rxjs/bundles/rxjs.umd.min.js", "core-js": "npm:core-js/client/shim.min.js", zone: "npm:zone.js/dist/zone.min.js", "@angular/core": "npm:@angular/core/bundles/core.umd.min.js", "@angular/common": "npm:@angular/common/bundles/common.umd.min.js", "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.min.js", "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd.min.js", "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js", "@angular/http": "npm:@angular/http/bundles/http.umd.min.js", "@angular/common/http": "npm:@angular/common/bundles/common-http.umd.min.js", "@angular/router": "npm:@angular/router/bundles/router.umd.min.js", "@angular/forms": "npm:@angular/forms/bundles/forms.umd.min.js", "@grapecity/activereports-angular": "npm:@grapecity/activereports-angular/bundles/grapecity-activereports-angular.umd.js", "@grapecity/activereports/reportviewer": "npm:@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/reportdesigner": "npm:@grapecity/activereports/dist/ar-js-designer.js", "@grapecity/activereports/viewer": "npm:@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/pdfexport": "npm:@grapecity/activereports/dist/ar-js-pdf.js", "@grapecity/activereports/xlsxexport": "npm:@grapecity/activereports/dist/ar-js-xlsx.js", "@grapecity/activereports/htmlexport": "npm:@grapecity/activereports/dist/ar-js-html.js", "@grapecity/activereports": "npm:@grapecity/activereports/dist/ar-js-core.js", "@grapecity/activereports/core": "npm:@grapecity/activereports/dist/ar-js-core.js", "@grapecity/activereports-core": "npm:@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js", "@grapecity/activereports/styles": "npm:@grapecity/activereports/styles", "@grapecity/activereports-localization": "npm:@grapecity/activereports-localization/dist/ar-js-locales.js", "@grapecity/ar-js-pagereport": "npm:@grapecity/activereports/dist/ar-js-core.js", "bootstrap.css": "npm:bootstrap/dist/css/bootstrap.min.css", jszip: "npm:jszip/dist/jszip.min.js", typescript: "npm:typescript/lib/typescript.js", ts: "npm:plugin-typescript/lib/plugin.js", css: "npm:systemjs-plugin-css/css.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: "ts", }, rxjs: { defaultExtension: "js", }, node_modules: { defaultExtension: "js", }, }, }); })(this);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>GrapeCity ActiveReports for Javascript sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.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>