Viewer Component - Loading Reports

These samples show how to load a report into the ActiveReportsJS Viewer component with Angular, React, Vue, and pure JavaScript applications. "Load Original Report" button loads the report from the URL, "Load Modified Report" button fetches the report first, adds the background image, and then loads the resulting report definition. Visit the Loading Reports page for more information. Scroll down the page to see the code.

<template> <div> <div id="viewer-toolbar" class="container-fluid"> <div class="row mt-3 mb-3"> <button type="button" class="btn btn-primary col-sm-2 ml-1" v-on:click="onLoadFromFile" > Load Original Report </button> <button type="button" class="btn btn-secondary col-sm-2 ml-1" v-on:click="onLoadFromDefinition" > Load Modified Report </button> </div> </div> <div id="viewer-host"> <JSViewer ref="reportViewer"></JSViewer> </div> </div> </template> <script> import Vue from "vue"; import { Viewer } from "@grapecity/activereports-vue"; import "@grapecity/activereports/pdfexport"; import "@grapecity/activereports/htmlexport"; import "@grapecity/activereports/tabulardataexport"; import { FontStore } from "@grapecity/activereports/core"; const app = { name: "App", components: { JSViewer: Viewer, }, methods: { onLoadFromFile: function () { this.$refs.reportViewer .Viewer() .open("/activereportsjs/demos/resource/reports/Frontstore.rdlx-json"); }, onLoadFromDefinition: function () { fetch("/activereportsjs/demos/resource/reports/Frontstore.rdlx-json") .then((data) => data.json()) .then((report) => { report.Body.Style.BackgroundImage = { Value: "background.svg" }; this.$refs.reportViewer.Viewer().open(report); }); }, }, }; FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); new Vue({ render: (h) => h(app), }).$mount("#app"); </script> <style> #viewer-host { width: 100%; height: 500px; } </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 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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> <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="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <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("./app.vue"); </script> </head> <body style="margin: 0"> <div id="app"></div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous" ></script> </body> </html>
(function (global) { System.config({ transpiler: "plugin-babel", babelOptions: { es2015: true, }, meta: { "*.css": { loader: "css" }, "*.vue": { loader: "vue-loader" }, }, paths: { // paths serve as alias "npm:": "node_modules/", }, // map tells the System loader where to look for things map: { jszip: "npm:jszip/dist/jszip.js", css: "npm:systemjs-plugin-css/css.js", vue: "npm:vue/dist/vue.min.js", "vue-demi": "npm:vue-demi/lib/index.cjs.js", "@vue/composition-api": "npm:@vue/composition-api/dist/vue-composition-api.js", "vue-loader": "npm:systemjs-vue-browser/index.js", "plugin-babel": "npm:systemjs-plugin-babel/plugin-babel.js", "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", "@grapecity/activereports/pdfexport": "npm:@grapecity/activereports/dist/ar-js-pdf.js", "@grapecity/activereports/tabulardataexport": "npm:@grapecity/activereports/dist/ar-js-tabular-data.js", "@grapecity/activereports/htmlexport": "npm:@grapecity/activereports/dist/ar-js-html.js", "@grapecity/activereports/xlsxexport": "npm:@grapecity/activereports/dist/ar-js-xlsx.js", "@grapecity/activereports-vue": "npm:@grapecity/activereports-vue/lib/index.js", "@grapecity/activereports/reportviewer": "npm:@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/viewer": "npm:@grapecity/activereports/dist/ar-js-viewer.js", "@grapecity/activereports/reportdesigner": "npm:@grapecity/activereports/dist/ar-js-designer.js", "@grapecity/activereports/core": "npm:@grapecity/activereports/dist/ar-js-core.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", }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: "js", }, node_modules: { defaultExtension: "js", }, }, }); })(this);