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.

import React, { Fragment } from "react"; import ReactDOM from "react-dom"; import "@grapecity/activereports/styles/ar-js-ui.css"; import "@grapecity/activereports/styles/ar-js-viewer.css"; import { Viewer } from "@grapecity/activereports-react"; import "@grapecity/activereports/pdfexport"; import "@grapecity/activereports/htmlexport"; import "@grapecity/activereports/tabulardataexport"; import { FontStore } from "@grapecity/activereports/core"; function App() { const viewerRef = React.useRef(null); function onLoadFromDefinition() { fetch("/activereportsjs/demos/resource/reports/Frontstore.rdlx-json") .then((data) => data.json()) .then((report) => { report.Body.Style.BackgroundImage = { Value: "background.svg" }; viewerRef.current.Viewer.open(report); }); } function onLoadFromFile() { viewerRef.current.Viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } return ( <Fragment> <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" onClick={() => onLoadFromFile()} > Load Original Report </button> <button type="button" class="btn btn-secondary col-sm-2 ml-1" onClick={() => onLoadFromDefinition()} > Load Modified Report </button> </div> </div> <div id="viewer-host"> <Viewer ref={viewerRef} /> </div> </Fragment> ); } FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); ReactDOM.render(<App />, document.getElementById("root"));
<!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" /> <link rel="stylesheet" href="index.css" /> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import("./src/app"); </script> </head> <body> <div id="root"></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, react: true, }, meta: { "*.css": { loader: "css" }, }, paths: { // paths serve as alias "npm:": "node_modules/", }, // map tells the System loader where to look for things map: { css: "npm:systemjs-plugin-css/css.js", react: "npm:react/umd/react.production.min.js", "react-dom": "npm:react-dom/umd/react-dom.production.min.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-react": "npm:@grapecity/activereports-react/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", "plugin-babel": "npm:systemjs-plugin-babel/plugin-babel.js", "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", }, // packages tells the System loader how to load when no filename and/or no extension packages: { "./src": { defaultExtension: "jsx", }, node_modules: { defaultExtension: "js", }, }, }); })(this);