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.

<template> <div id="viewer-host"> <Viewer :report="{ Uri: '/activereportsjs/demos/resource/reports/Frontstore.rdlx-json' }"></Viewer> </div> </template> <script setup> import { Viewer } from "@grapecity/activereports-vue"; import "@grapecity/activereports/pdfexport"; import "@grapecity/activereports/htmlexport"; import "@grapecity/activereports/tabulardataexport"; import { FontStore } from "@grapecity/activereports/core"; FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); </script> <style> #viewer-host { width: 100%; height: 600px; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.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/resource/themes/orange-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/resource/themes/orange-viewer.css" /> <script> System.import("$DEMOROOT$/en/lib/vue/license.ts"); System.import("./app.js"); </script> </head> <body style="margin: 0"> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'systemjs-plugin-babel', typescriptOptions: { "target": "es5", "module": "system", }, baseURL: './node_modules/', packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@grapecity/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "./node_modules/vue/dist/vue.esm-browser.js", "systemjs-babel-build": "systemjs-plugin-babel/systemjs-babel-browser.js", "@grapecity/activereports/pdfexport": "@grapecity/activereports/dist/ar-js-pdf.js", "@grapecity/activereports/tabulardataexport": "@grapecity/activereports/dist/ar-js-tabular-data.js", "@grapecity/activereports/htmlexport": "@grapecity/activereports/dist/ar-js-html.js", "@grapecity/activereports/xlsxexport": "@grapecity/activereports/dist/ar-js-xlsx.js", "@grapecity/activereports-vue": "@grapecity/activereports-vue/lib/index.js", "@grapecity/activereports/reportviewer": "@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/viewer": "@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/reportdesigner": "@grapecity/activereports/dist/ar-js-designer.js", "@grapecity/activereports/core": "@grapecity/activereports/dist/ar-js-core.js", "@grapecity/activereports/styles": "@grapecity/activereports/styles", "@grapecity/activereports-localization": "@grapecity/activereports-localization/dist/ar-js-locales.js", "@grapecity/ar-js-pagereport": "@grapecity/activereports/dist/ar-js-core.js", }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, './src/*.vue': { loader: "../plugin-vue/index.js" }, '*.vue': { loader: "./plugin-vue/index.js" }, }, packages: { "vue-demi": { defaultExtension: "mjs", main: "lib/index.mjs" } } }); })(this);