# 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>