UnoPDFAppearance
Overview
The <pdf-document> tag creates an invisible component that manages a single PDF document. Use it in conjunction with other components, such as a page viewer or thumbnail viewer, to display, modify, and save a PDF document.
The pdf-document component manages one PDF document. It can represent a stored document or a new document, plus any unsaved changes.
It does not hold any view state, such as the currently visible page. View state is stored by various view components.
Any number of pdf-document components may be constructed; each represents a separate PDF document. For example, to construct an application that copies pages from one document to another, two pdf-document components would be needed, one for the source document, one for the target document.
The pdf-document accepts a name property. This name is used by other components to reference the document and distinguish it from other pdf-document instances. Therefore, each pdf-document must have a unique name. If not specified, the name is assigned the value default. For example, this code:
html
<pdf-document name="document1" />
<pdf-document name="document2" />
<pdf-uploader document="document1" />declares a pdf-uploader component which will upload a document (from a local file system, for example) into the pdf-document component named "document1".
The pdf-document has four basic methods that operate on the entire PDF:
open(id: string)retrieves the named PDF from storage and opens it inside thepdf-documentcomponent.close()discards the current PDF document.new()creates a new, empty PDF document.save()commits unsaved changes to the PDF and saves the PDF to storage. If the document was new, a new ID is created for the document.
In addition, pdf-document offers other methods that operate on the document, for example, to set a field value. See the Methods section below for more information.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
name | name | Unique ID used by other components to reference this pdf-document component. | string | 'default' |
pdfid | pdfid | If specified, automatically opens the named document. A value of "new" creates a new document. | string | undefined | undefined |
Events
| Event | Description | Type |
|---|---|---|
formdatachanged | Form data has changed. | CustomEvent<{ fieldName: string; fieldValue: string | undefined; }[]> |
loaded | The document has loaded. All get methods such as getFields return expected values. | CustomEvent<string> |
unloaded | The document has unloaded. Methods such as getFields do not return expected values. | CustomEvent<void> |
Methods
close() => Promise<void>
Close the PdfDocument
Returns
Type: Promise<void>
download() => Promise<ApiRequest<void, string> | null>
Download document
Returns
Type: Promise<ApiRequest<void, string> | null>
downloadAs(format: 'docx' | 'pptx') => Promise<ApiRequest<void, string> | null>
This function converts the current PDF document to either DOCX or PPTX format and initiates a download.
Parameters
| Name | Type | Description |
|---|---|---|
format | "docx" | "pptx" |
Returns
Type: Promise<ApiRequest<void, string> | null>
getFields() => Promise<IPdfField[]>
Get document fields.
Use this method if you want to get access to the definitions of form fields in the Pdf document.
If you are only interested in the entered data use getFormData.
Returns
Type: Promise<IPdfField[]>
getFormData() => Promise<{ [key: string]: string; }>
Get form data.
Use this method if you want to get access to the data entered in form fields.
If you are interested in the field definitions of the form fields use getFields.
Returns
Type: Promise<{ [key: string]: string; }>
getSummary() => Promise<IPdfDocument | null>
Get document summary
Returns
Type: Promise<IPdfDocument | null>
new() => Promise<void>
Open a new PdfDocument
Returns
Type: Promise<void>
open(id: string) => Promise<IPdfDocument | null>
Open a PdfDocument by document id
Parameters
| Name | Type | Description |
|---|---|---|
id | string |
Returns
Type: Promise<IPdfDocument | null>
openFile(file: File) => Promise<IPdfDocument | null>
Load a PdfDocument from File
Parameters
| Name | Type | Description |
|---|---|---|
file | File |
Returns
Type: Promise<IPdfDocument | null>
save(fileName?: string) => Promise<null | IPdfDocument>
Save the PdfDocument. Note that after saving, the document always has a new ID.
Parameters
| Name | Type | Description |
|---|---|---|
fileName | string | undefined |
Returns
Type: Promise<IPdfDocument | null>
setFormData(data: { [key: string]: string; }) => Promise<void>
Set form data
Use this method if you want to set the data entered by a user in form fields.
Parameters
| Name | Type | Description |
|---|---|---|
data | { [key: string]: string; } |
Returns
Type: Promise<void>
setOptions(fieldName: string, options: ListOptionModel[]) => Promise<void>
Set options
Parameters
| Name | Type | Description |
|---|---|---|
fieldName | string | |
options | ListOptionModel[] |
Returns
Type: Promise<void>
Built with StencilJS