# 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>](/library/action-nodes/generate-document.md) or uploaded from your device using [Open URL](/library/action-nodes/open-url.md).

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/pdf-reader.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.