Viewing Reports using HTML5 Viewer

The following steps describe how to view reports in the HTML5 Viewer.

Copy the following files from the ...\ActiveReports 9 Server\SDK\HTML5 Viewer.Source folder to a folder accessible from the target HTML page:
- GrapeCity.ActiveReports.Viewer.Html.js
- GrapeCity.ActiveReports.Viewer.Html.min.js
- GrapeCity.ActiveReports.Viewer.Html.cs

In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its dependencies:

jQuery 1.9.0 or higher
Bootstrap 3.0
Knockout.js 2.3.0 or higher

Note: You can access the dependencies like jQuery in a Content Delivery Network (CDN) or copy them locally.

HTML	Copy Code
<link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" > <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script> <script type="text/javascript"> </script>

HTML

Copy Code

<link rel="stylesheet" href="GrapeCity.ActiveReports.Viewer.Html.css" >
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js" type="text/javascript"></script>
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>
<script type="text/javascript">
</script>

In the target HTML page, add the DIV element that will contain the HTML5 Viewer.

HTML	Copy Code
<div id="viewer" style="width:600px;height:480px;"></div>

Add the following code to initialize the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component. To learn how to get a security token for the reportService, see Get a Security Token.

Javascript	Copy Code
$(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "myreport" }, reportService: { url: 'http://myAR9server.com/ReportService.svc/json/', securityToken: securityToken, resourceHandler : 'http://myAR9server.com/TemporaryResource.axd/' }, uiType: 'desktop', documentLoaded: function reportLoaded() { console.log(viewer.pageCount); }, reportLoaded: function (reportInfo) { console.log(reportInfo.parameters); }, error: function (error) { console.log("error"); } }); });

Javascript

Copy Code

$(function ()
{
   var viewer = GrapeCity.ActiveReports.Viewer(
   {
      element: '#viewer',
      report: {
         id: "myreport"

      },
      
      reportService: {
          url: 'http://myAR9server.com/ReportService.svc/json/', 
          securityToken: securityToken, 
          resourceHandler : 'http://myAR9server.com/TemporaryResource.axd/'
      },
      uiType: 'desktop',
      documentLoaded: function reportLoaded()
      {
         console.log(viewer.pageCount);
      },
      reportLoaded: function (reportInfo)
      {
         console.log(reportInfo.parameters);
      },

      error: function (error)
      {
         console.log("error");
      }

   });
});

Add the following code to the system.webServer section of the web.config file of your ActiveReports 9 Server web site.

XML	Copy Code
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Authorization, Origin, Content-Type, Accept, X-Requested-With" /> </customHeaders> </httpProtocol> ... </system.webServer>

XML

Copy Code

<system.webServer>

        <httpProtocol>

                <customHeaders>

                        <add name="Access-Control-Allow-Origin" value="*" />

                        <add name="Access-Control-Allow-Headers" value="Authorization, Origin, Content-Type, Accept, X-Requested-With" />

                </customHeaders>

        </httpProtocol>

...

</system.webServer>

SDK Tutorials

Work with the HTML5 Viewer using Javascript