UnoPDFAppearance
Overview
The pdf-pages component displays pages of a single PDF document.
This component can display pages in one of two modes:
- PageMode.Single: one page is displayed in the component's frame at a time. Scrolling moves to a new page immediately; there is no continuous scrolling, where a portion of a preceding or subsequent page is displayed.
- PageMode.Multi: the component's frame displays all pages of the document in a scrolling window. Scrolling is continuous; the window can display portions of adjacent pages.
This component maintains a zoom factor, which controls the magnification of the document's pages, expressed as a percentage of the original page size. The zoom factor defaults to 100%.
Usage
When declaring a <pdf-pages> component, set the document property to reference the desired <pdf-document> component. (This is not necessary if there is only one pdf-document component.)
Sample usage:
html
<pdf-document name="invoice" />
<pdf-pages document="invoice" pageMode="single" />>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
debugUserMode | debug-user-mode | Debug user mode - shows a border for userMode | boolean | false |
document | document | Reference to the pdf-document component, whose PDF pages this viewer will display. This value should match the value of the desired document's name property. | string | undefined | 'default' |
focusWidget | -- | This widget has input focus. May be null. | IPdfWidget | null | null |
name | name | Unique ID used by other components to reference this pdf-pages component. | string | undefined | 'default' |
pageMode | page-mode | View mode - PageMode.Single or PageMode.Multi - determines if the viewer shows one page or multiple. | PageMode.Multi | PageMode.Single | PageMode.Multi |
showCustomWidget | -- | If this function returns true, then the passed widget, when it has input focus, is replaced with a custom widget. A custom widget is provided as a child element of this component. Attribute slot must be set to customWidget. | (widget: IPdfWidget) => boolean | () => false |
Events
| Event | Description | Type |
|---|---|---|
focuswidgetchanged | The widget that has input focus changes. May be null. | CustomEvent<IPdfWidget | null> |
pageindexchanged | The pageIndex of the PdfViewer has changed | CustomEvent<number> |
rectangleselect | The user finished drawing a selection rectangle | CustomEvent<{ pageIndex: number; x: number; y: number; width: number; height: number; }> |
usermodechanged | The mode of the PdfViewer has changed | CustomEvent<UserMode.DrawSelectionRectangle | UserMode.Show> |
zoomfactorchanged | The zoomFactor of the PdfViewer has changed | CustomEvent<number> |
Methods
addImage(pageIndex: number, bottom: number, left: number, width: number, height: number, image: any) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
pageIndex | number | |
bottom | number | |
left | number | |
width | number | |
height | number | |
image | any |
Returns
Type: Promise<void>
addText(pageIndex: number, bottom: number, left: number, text: string, fontName: string, fontSize: number, color: string) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
pageIndex | number | |
bottom | number | |
left | number | |
text | string | |
fontName | string | |
fontSize | number | |
color | string |
Returns
Type: Promise<void>
getFocusWidget() => Promise<IPdfWidget | null>
Returns
Type: Promise<IPdfWidget | null>
getPageIndex() => Promise<number | null>
Get the index of the current page of the PdfViewer
Returns
Type: Promise<number | null>
getPageMode() => Promise<PageMode>
Get the page mode of the PdfViewer
Returns
Type: Promise<PageMode>
getUserMode() => Promise<UserMode | undefined>
Returns
Type: Promise<UserMode | undefined>
getZoomFactor() => Promise<number | null>
Get the zoom factor of the PdfViewer
Returns
Type: Promise<number | null>
gotoPage(pageIndex: number) => Promise<void>
Make page with given zero-based index current.
Parameters
| Name | Type | Description |
|---|---|---|
pageIndex | number |
Returns
Type: Promise<void>
setHighlightFields(highlight: boolean) => Promise<void>
Set highlight fields for the PdfViewer
Parameters
| Name | Type | Description |
|---|---|---|
highlight | boolean |
Returns
Type: Promise<void>
setPageMode(mode: PageMode) => Promise<void>
Set the page mode of the PdfViewer
Parameters
| Name | Type | Description |
|---|---|---|
mode | PageMode |
Returns
Type: Promise<void>
setUserMode(userMode: UserMode) => Promise<void>
Parameters
| Name | Type | Description |
|---|---|---|
userMode | UserMode |
Returns
Type: Promise<void>
toggleLayer(name: string) => Promise<void>
Toggle the visibility of a layer in the PdfViewer
Parameters
| Name | Type | Description |
|---|---|---|
name | string |
Returns
Type: Promise<void>
zoom(factor: number) => Promise<void>
Sets the zoom or magnification factor of the page. The factor is a floating point number representing the amount of magnification to apply to the display of the page.
For example:
- a value of 1.0 displays the page at original size.
- a value of 2.0 displays it at twice the original size.
- a value of 0.5 displays it at half the original size.
Parameters
| Name | Type | Description |
|---|---|---|
factor | number |
Returns
Type: Promise<void>
Built with StencilJS