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. For more details, please visit the Loading Reports page. To view the code, scroll down the page.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Report Loading Sample</title> <!-- purejs sample--> <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://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <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" 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" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 500px; } </style> </head> <body> <div id="viewer-toolbar" class="container-fluid"> <div class="row mt-3 mb-3"> <button type="button" class="btn btn-outline-primary col-sm-2 ml-1" onclick="onLoadFromFile()" > Load Original Report </button> <button type="button" class="btn btn-outline-secondary col-sm-2 ml-1" onclick="onLoadFromDefinition()" > Load Modified Report </button> </div> </div> <div id="viewer-host"></div> <script> var viewer; function onLoadFromDefinition() { fetch("/activereportsjs/demos/resource/reports/Frontstore.rdlx-json") .then((data) => data.json()) .then((report) => { report.Body.Style.BackgroundImage = { Value: "background.svg" }; viewer.open(report); }); } function onLoadFromFile() { viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); } MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host"); viewer.theme="ActiveReports"; </script> <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>