Demos
Code Samples
Viewer
Integration

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.

JavaScript
Angular
Vue
React
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 Integration Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="$DEMOROOT$/arjs/dist/ar-js-core.js"></script>
    <script src="$DEMOROOT$/arjs/dist/ar-js-viewer.js"></script>
    <script src="$DEMOROOT$/arjs/dist/ar-js-pdf.js"></script>
    <script src="$DEMOROOT$/arjs/dist/ar-js-tabular-data.js"></script>
    <script src="$DEMOROOT$/arjs/dist/ar-js-html.js"></script>
    <script src="$DEMOROOT$/lib/purejs/license.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="$DEMOROOT$/arjs/styles/ar-js-ui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="$DEMOROOT$/arjs/styles/ar-js-viewer.css"
    />
    <style>
      #viewer-host {
        margin: 0 auto;
        width: 100%;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="viewer-host"></div>
    <script>
      MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
        "$DEMOROOT$/resource/fontsConfig.json"
      );
      const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(
        "#viewer-host"
      );
      viewer.theme="ActiveReports";
      viewer.open("$DEMOROOT$/resource/reports/Frontstore.rdlx-json");
    </script>
  </body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Integration Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="$DEMOROOT$/arjs/dist/ar-js-core.js"></script> <script src="$DEMOROOT$/arjs/dist/ar-js-viewer.js"></script> <script src="$DEMOROOT$/arjs/dist/ar-js-pdf.js"></script> <script src="$DEMOROOT$/arjs/dist/ar-js-tabular-data.js"></script> <script src="$DEMOROOT$/arjs/dist/ar-js-html.js"></script> <script src="$DEMOROOT$/lib/purejs/license.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="$DEMOROOT$/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/arjs/styles/ar-js-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body> <div id="viewer-host"></div> <script> MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "$DEMOROOT$/resource/fontsConfig.json" ); const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer( "#viewer-host" ); viewer.theme="ActiveReports"; viewer.open("$DEMOROOT$/resource/reports/Frontstore.rdlx-json"); </script> </body> </html>