# PDF reader

This UI component is an inline **PDF Reader** used to display the content of PDF files.

{% hint style="info" %}
A full example setup of a PDF Reader is available in our [Showroom](https://showroom.appfarm.app/ui-components/pdfreader)! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

## Usage 

A PDF Reader allows you to **preview a PDF document** that you either generated in your app by using [<mark style="color:blue;">Generate document</mark>](https://docs.appfarm.io/library/action-nodes/generate-document) or uploaded from your device using [Open URL](https://docs.appfarm.io/library/action-nodes/open-url).

The data source holding the document needs to be of type *File Object Class*, and it has to be of *Cardinality: One*.&#x20;

{% hint style="warning" %}
Are you having trouble displaying a PDF? The PDF reader sometimes needs to have a fixed width or height, or it must explicitly be set to stretch horizontally.  The UI Component is not able to calculate its own width or height based on the content.
{% endhint %}

## Built-in properties

### File

In this section, you data-bind the *File Content* property of the File Object Data Source that holds the document you wish to preview.&#x20;

### Default view-mode

This setting gives us two options:

* **Continuous:** Gives you the ability to scroll over all the pages of the document in preview
* **Single page:** Only one page is visible per time, but we can still shift in between pages if the Nav Toolbar is enabled

### Current Page

Visible when **Single Page** is selected.

A two-way data binding that tracks and controls the current page in single-page view mode. Invalid page numbers will automatically redirect to page 1.&#x20;

### Page Fit

Here we can set up the default preview to fit either the **Height** or **Width** of the document.&#x20;

Notice that you can always zoom in and out, as well as scroll vertically or horizontally if the document's size overflows or is of a different landscape than the PDF Reader.

### Enable Nav Toolbar

A checkbox that enables a bottom line overview of the number of pages, as well as arrows for switching pages of the document in preview.