The easiest way to include these scripts is to use CDN references, for example:
<link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script> <script src="https://cdn.grapecity.com/activereportsjs/2.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
styles folders of the download package, respectively.
Finally, @grapecity/activereports package can be installed in an application's folder and these scripts can be referenced from
Once scripts and styles are loaded, Viewer component can be initialized by invoking
ActiveReports.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 ActiveReports.Viewer("#viewer-host"); </script> </body>
The instance of
ActiveReports.Viewer exposes methods and properties that can be used to customize viewer appearance, preview reports, print or export them.