        [{"id":"bf522b5c-b992-4910-b9a3-7d4c6a711342","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"fd92c740-60f2-42bc-b108-133c0baaec15","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1809c8ed-488b-4fb9-b402-aabe76f0c6d2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8aa13734-ff9b-43f5-b44f-de331adbb3d7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"8faaa45c-575e-4bf0-9034-634fac906bb8","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"56faca6f-14d3-42b0-9706-7df8e339ef70","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"eb780c12-7575-42ef-916d-9d1d66cd0152","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"3918314b-5267-494d-b520-203125daf2a2","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"97d3eeb1-76c4-4c11-bc62-db5413d6819f","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e93f9124-e327-4056-9264-f62378c3ebb5","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"90683712-67eb-49c8-96cb-96a228a99d11","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"cf1d42c1-fe4a-4f31-83f7-97c9c7ea9b76","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"e6222e08-3705-44f2-9027-b80b72dd3a85","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5f8d0a4e-e3c5-4f38-91ee-c0d4aa8f116d","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"1ab019cd-705f-4371-a3f3-f2925cf92826","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"2ebee074-0c53-44bf-89c4-c0deb0d210f7","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"488a368a-fad1-4022-8e64-03442a912d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9aa35d28-77db-4dbd-ade0-17163a1782be","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5a8c2832-0b00-47dc-aa9c-2579f4d9e04c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"c19b5fcc-8f2a-4f44-9eeb-345cbb4815a6","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"92556861-b9b0-454e-a493-4750e9d90d2c","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"5ca1a599-fa29-4d8a-8cb4-80352932149f","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"7a947fc6-0187-4b9d-b9cc-800def67c597","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"b74ce673-ba64-42ea-b124-fc006b6b727e","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"a201d71e-7541-4e64-ac8b-3ed714e41a81","tags":[{"product":null,"links":null,"id":"fe610228-9cf6-417f-813a-dcbfd25406c3","name":"upd","color":"#7e678a","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]},{"id":"9efb31b1-f5f2-4214-a36d-c3415649a7a0","tags":[{"product":null,"links":null,"id":"4d7b6a40-ab32-4c71-a381-58f3ffd2653e","name":"new","color":"#ed7422","productId":"d699a6af-e150-4da3-ab30-25fd97934601"}]}]

ActiveReportsJS Report Viewer component

This page provides a detailed overview of the ActiveReportsJS Report Viewer component. You can check Get Started tutorial for a concise guide for integrating this component to a pure JavaScript application.

ActiveReportsJS scripts and styles

To use ActiveReportsJS Viewer component in a pure JavaScript application, it should include the following scripts and styles:

ar-js-core.js: required, provides the core functionality
ar-js-viewer.js: required, provides the viewer component
ar-js-ui.css: required, provides the common style for ActiveReportsJs components
ar-js-viewer.css: required, provides the default style for viewer component
ar-js-pdf.js: optional, provides export to PDF
ar-js-tabular-data.js: optional, provides export to Tabular Data(CSV) format.
ar-js-html.js : optional, provides export to HTML

The easiest way to include these scripts is to use CDN references, for example:

<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="https://cdn.mescius.com/activereportsjs/5.latest/styles/ar-js-viewer.css"
  type="text/css"
/>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/5.latest/dist/ar-js-html.js"></script>

Alternatively, you can download these scripts and styles from the ActiveReportsJS Download Page. You can find them in the dist and styles folders of the download package, respectively.

Finally, @mescius/activereportsjs package can be installed in an application's folder and these scripts can be referenced from node_modules\@mescius/activereportsjs\dist\ and node_modules\@mescius/activereportsjs\styles\ folders

Initializing ActiveReportsJS Viewer Component

Once scripts and styles are loaded, the Viewer component can be initialized by invoking MESCIUS.ActiveReportsJS.ReportViewer.Viewer constructor and passing the CSS selector of the hosting element into it, for example:

<body>
    <div id="viewer-host"></div>
    <script>
        var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host");
    </script>
</body>

The instance of MESCIUS.ActiveReportsJS.ReportViewer.Viewer exposes methods and properties that can be used to customize viewer appearance, preview reports, print, or export them.