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.
index.html
Copy to CodeMine
<!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>
Feedback
Submit and view feedback for