# HTML PDF Viewer

Learn how to use Wijmo's PdfViewer component in this documentation topic

## Content


The __wijmo.viewer__ module contains 2 types of viewers: __PdfViewer__ and __ReportViewer__. The __PdfViewer__ is a lightweight viewer used to display PDFs without any third party PDF reader or software. You can use it to display PDF documents in your web apps.

* Includes top document viewer features like thumbnail display, scrolling, paging, and zooming
* Print support
* Export features

## Features

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

* Print support
* Responsive viewer
* Thumbnails
* Search
* Pagination
* Full-screen and resizing options
* Continuous scrolling options

## Basics
To show the PDF file from C1 Web API PDFDocument Services, set the following basic properties:

1. __serviceUrl__: The url of C1 Web API PDFDocument Services. For example, ''.

2. __filePath__: The full path to the pdf file. For example, 'PdfRoot/DefaultDocument.pdf'.

    The 'PdfRoot' is the key of the pdf file disk storage provider, which is registered at server for locating the specified pdf file.
    The 'DefaultDocument.pdf' is the relative path of the pdf file, which can be located by the disk storage provider.

##### Example

```html
<body>
    ...
    <div id="pdfViewer"></div>
    ...
</body>
```

```javascript
let pdfViewer = new viewer.PdfViewer('#pdfViewer', {
        serviceUrl: 'https://developer.mescius.com/componentone/demos/aspnet/c1webapi/latest/api/pdf',
        filePath: 'PdfRoot/DefaultDocument.pdf',
        zoomFactorChanged: (sender) => {
            zoomFactor.value = sender.zoomFactor;
        }
});
```


The C1 Web API PDFDocument Services uses C1PdfDocumentSource to render and export pdf files. Please refer to How to set up C1 Web API PDFDocument Services for details.

Also the PdfViewer control has the following properties, which allow you to customize its appearance and behavior:

* __fullScreen__: Indicates whether the viewer is under full screen mode.
* __mouseMode__: Indicates the mouse behavior.
* __viewMode__: Indicates how to show the document pages.
* __zoomFactor__: Indicates the current zoom factor to show the document pages.

##### Example

```javascript
pdfViewer.fullScreen = true;
pdfViewer.mouseMode = wijmo.viewer.MouseMode.MoveTool;
pdfViewer.viewMode = wijmo.viewer.zoomMode.WholePage;
```