Let us see how to create a web application in PureJS that uses the ActiveReportsJS Viewer component. For information on adding references, see Referencing ActiveReportsJS topic.
Prerequisites:
The following steps create an ExpressJS application.
Mkdir arjs-js
cd arjs-js
npm install express
or
yarn add express
npm install @grapecity/activereports
or
yarn add @grapecity/activereports
index.html
' with following content:If you simply want to view an existing report, place the report in the 'reports
' folder near 'index.html
' file, and use following content
<html>
<head>
<title>ActiveReportsJS Viewer</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px"></div>
<script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open('/reports/InvoiceList.rdlx-json');
}
</script>
</body>
</html>
If you have a report definition in json format and want to see it in viewer, use following content
<html>
<head>
<title>ActiveReportsJS Viewer</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" />
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ie-polyfills.js"></script> <!--to run in IE-->
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script>
<script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px"></div>
<script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open({
Type: 'report',
Body: {
Name: 'Body',
Type: 'section',
ReportItems: [
{ Type: 'textbox', Name: 'textbox1', Value: 'Hello from ActiveReportsJS', Height: '10in' }
]
},
Name: 'Report'
});
}
</script>
</body>
</html>
server.js
' with following content: const express = require('express'); //import Express.js module
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname)));
app.listen(8085);
node .\server.js
localhost:8085
' in your browser. You will get a running application.The following steps create an ASP.NET Web application.
Create an Empty ASP.Net Web Application.
Add an HTML Page to your project.
Create 'scripts
' folder in your project's root and include following ActiveReportsJS scripts:
To add export functionality, add following additional scripts:
Create 'css
' folder in your project's root and include ar-js-viewer.css
stylesheet.
Create 'reports
' folder and include the report you want to view.
Modify the content of the added HTML Page to
The content of the HTML Page is as shown.
<html>
<head>
<title>ActiveReportsJS Viewer</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ar-js-viewer.css" />
<script type="text/javascript" src="scripts/ie-polyfills.js"></script> <!--to run in IE-->
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px"></div> <!--define container height-->
<script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open('/reports/InvoiceList.rdlx-json');
}
</script>
</body>
</html>
Note:
ar-js-core.js
script must be loaded before 'ar-js-viewer.js' script.ie-polyfills.js
script above 'ar-js-core.js' and 'ar-js-viewer.js' scripts.application/json
' for .rdlx-json report to your web configuration file, depending on the web server. For example, the below snippet shows the configuration for IIS web server. <system.webServer>
<staticContent>
<mimeMap fileExtension=".rdlx-json" mimeType="application/json" />
</staticContent>
</system.webServer>