Show Report in HTML Viewer

This example shows how to show the HTML Report Viewer on the page and view a report. First, you need to add the JavaScript libraries and CSS styles to the Web page. For example, create the viewer.php file and add links to all necessary files:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Stimulsoft Reports.PHP - JS Report Viewer</title>

<!-- Report Office2013 style -->
<link href="/css/stimulsoft.viewer.office2013.css" rel="stylesheet">

<!-- Stimusloft Reports.JS -->
<script src="/scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="/scripts/stimulsoft.viewer.js" type="text/javascript"></script>
</head>
<body>
<div id="viewerContent"></div>
</body>
</html>


To communicate the Viewer with the PHP server-side, some functions are needed. To add them to the Web page, it is enough to call StiHelper::initialize() static PHP function in the <head> section. This function can be found in the helper.php file, so add this file import to the top of the Web page:

<?php
require_once 'stimulsoft/helper.php';
?>

...

<?php StiHelper::initialize(); ?>


Use the following JavaScript code to create the object with Viewer options and set the required values. For example, show Viewer in Full Screen Mode by default. Next, create the Viewer object, and pass options to it. The viewer.renderHtml() method renders the Viewer content into the specified HTML element:

var options = new Stimulsoft.Viewer.StiViewerOptions();
options.appearance.fullScreenMode = true;

var viewer = new Stimulsoft.Viewer.StiViewer(options, "StiViewer", false);
viewer.renderHtml("viewerContent");


To load report and assign it to the Viewer, you can use the following JavaScript code:

var report = new Stimulsoft.Report.StiReport();
report.loadFile("reports/SimpleList.mrt");
viewer.report = report;


In the screenshot below you can see the result of the sample code.

JS Viewer