Documentation
Topics
Viewer
ReportViewer
5.20231.904
5.20231.904

HTML Report Viewer

Overview

The wijmo.viewer module contains 2 types of viewers: PdfViewer and ReportViewer. The ReportViewer is a lightweight viewer used to display reports from a ActiveReports or ComponentOne FlexReport. Use it view reports in your web apps.

Features

ReportViewer allows your users to display generated reports in web or hybrid mobile apps.

Every feature you’d expect from a document viewer is included out-of-the-box:

  • Print and page setup support
  • Responsive viewer
  • Thumbnails
  • Search
  • Pagination
  • Document map
  • Full-screen and resizing options
  • Continuous scrolling options
  • Export

Basics

Using a ReportViewer is similar to any other control, create a host element in markup and use javascript to create the control. When instantiating the ReportViewer, you will need to set the following properties to view a report:

  1. serviceUrl: The url of the report service.
  2. filePath: The full path to the FlexReport definition file, SSRS report or ActiveReports report on the server.
  3. reportName: The report name defined in the FlexReport definition file.
Example
<body>
    ...
    <div id="reportViewer"></div>
    ...
</body>

let reportViewer = new viewer.ReportViewer('#reportViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report'
    });

The ReportViewer control has the following properties which allow you to customize its appearance and behavior easily:

  1. fullScreen: Indicates whether viewer is under full screen mode.
  2. mouseMode: Indicates the mouse behavior.
  3. viewMode: Indicates how to show the document pages.
  4. zoomFactor: Indicates the current zoom factor to show the document pages.
Example
reportViewer.fullScreen = true;
reportViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;
reportViewer.viewMode = wijmo.viewer.zoomMode.WholePage;

Viewing Reports

The ReportViewer control can view reports from mulitple sources. The general approach to vieweing them is the same, but here are examples of connecting to the supported server-based reports.

FlexReport

FlexReport is a .NET reporting tool in the ComponentOne library. To show the content of FlexReport, you need to use the ComponentOne Web API Report Services. The C1 Web API Report Services uses C1FlexReport to render and export reports. You can learn how to set this up here: Configure FlexReports Web API

Here is an example of a ReportViewer connecting to C1 WebApi to display a FlexReport called "AlternateBackground":

let reportViewer = new viewer.ReportViewer('#reportViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report',
        filePath: 'ReportsRoot/Formatting/AlternateBackground.flxr',
        reportName: 'AlternateBackground'
    });

The ReportsRoot/ is the key of the report provider which is registered at server for locating specified report. The "Formatting/AlternateBackground.flxr" is the relative path of the FlexReport definition file which can be located by the report provider.

reportName field is only required for displaying FlexReports (.flxr files)

SSRS reports

You can also view SSRS reports with the ReportViewer. To do this, you need to use C1 Web API Report Services. The setup process is the same as above, but the server is configured to use ssrs reports instead of FlexReport.

The C1 Web API Report Services uses C1SSRSDocumentSource to connect with an SSRS server and render SSRS reports. It first fetches data from the server, then converts the report to the desired format (normally HTML5 SVG). Please see C1 Web API documentation for details.

Example:
let reportViewer = new viewer.ReportViewer('#reportViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/report',
        filePath: 'c1ssrs/AdventureWorks/Company Sales'
    });

AdventureWorks/Company Sales is the full path to the report on the server.

ActiveReports

ActiveReports is a powerful reporting tool that makes development of Reporting applications easier. The Wijmo ReportViewer control can diplay reports from ActiveReports as well. To view these ActiveReports, you must use GrapeCity ActiveReports Web Services.

To show the content of ActiveReports reports just set the serviceUrl and filePath properties.

Example:
let reportViewer = new viewer.ReportViewer('#reportViewer', {
        serviceUrl: 'https://ardemos.mescius.com/AR12-ReportsGallery/ActiveReports.ReportService.asmx',
        filePath: 'Reports/RDL Reports/Banded List Control/District Sales.rdlx'
    });