# HTML Report Viewer
Learn how to use Wijmo's ReportViewer component in this documentation topic
## Content
## 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
```html
...
...
```
```javascript
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
```javascript
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](http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html). 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](http://helpcentral.componentone.com/nethelp/C1WebAPI/Working%20with%20Reports.html)
Here is an example of a __ReportViewer__ connecting to C1 WebApi to display a FlexReport called "AlternateBackground":
```javascript
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](http://helpcentral.componentone.com/nethelp/C1WebAPI/ReportServices.html) documentation for details.
##### Example:
```javascript
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](https://developer.mescius.com/en/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](https://help.mescius.com/activereports/webhelp/AR13/webframe.html#arWLKDocumentWebService.html).
To show the content of ActiveReports reports just set the __serviceUrl__ and __filePath__ properties.
##### Example:
```javascript
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'
});
```