# PDF

The `PDF` component is a simple pdf reader that allows you to display uploaded supplier documents, your candidate's CV or product specifications. The only thing it requires is a url pointing to the pdf document.

### Properties

The `Modal` component offers the following configuration properties.

<table><thead><tr><th width="158">Property</th><th width="158">Type</th><th width="139">Default value</th><th>Behavior</th></tr></thead><tbody><tr><td>Page scale</td><td><code>'width' | 'height'</code></td><td><code>width</code></td><td>Determines if the component scales the pdf to its width or heigth, i.e. if the full width or height of the component should be visible.</td></tr><tr><td>Show footer</td><td><code>boolean</code></td><td><code>true</code></td><td>Determines if the footer should be visible. If the footer is shown, the pdf is paginated, i.e. the user can navigate to a different page of the pdf with the errors in the footer. If the footer is hidden, the pages are reachable by scroll. Additionally, a download button is available in the footer.</td></tr><tr><td>URL</td><td><code>stringWithJs</code></td><td><pre data-overflow="wrap"><code>'https://assets-staging.uify.io/pdf/sample.pdf'
</code></pre></td><td>Defines the path of the url to be displayed in the component. By using <code>{{ }}</code>, the url can be set programmatically e.g. through a select.</td></tr></tbody></table>

### Events

`PDF` does not offer any events.

### API

The `PDF` exposes the following API in the JavaScript runtime environment.

<table><thead><tr><th width="271">Property / Function</th><th width="210">Type</th><th>Behavior</th></tr></thead><tbody><tr><td><code>backgroundColor</code></td><td><code>string</code></td><td>Current color of the brackground if any</td></tr><tr><td><code>borderColor</code></td><td><code>string</code></td><td>Current color of the border if any</td></tr><tr><td><code>pageScale</code></td><td>"<code>width" | "height"</code></td><td>Whether the dimensions scale to the width or the height of the pdf</td></tr><tr><td><code>setBackgroundColor(value)</code></td><td><code>(value: string) => void</code></td><td>Sets the background color</td></tr><tr><td><code>setBorderColor(value)</code></td><td><code>(value: string) => void</code></td><td>Sets the border color</td></tr><tr><td><code>setPageScale(value)</code></td><td><code>(value: "width" | "height") => void</code></td><td>Sets the page scale to either <code>width</code> or <code>height</code></td></tr><tr><td><code>setShowFooter(value)</code></td><td><code>(value: boolean) => void</code></td><td>Defines if the footer should be displayed</td></tr><tr><td><code>setUrl(value)</code></td><td><code>(value: string) => void</code></td><td>Sets the url of the pdf</td></tr><tr><td><code>showFooter</code></td><td><code>boolean</code></td><td>Whether the footer is visible or not</td></tr><tr><td><code>url</code></td><td><code>string</code></td><td>Url of the pdf document</td></tr></tbody></table>


---

# 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.uify.io/component-reference/pdf.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.