diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md index defa21701..5f1da9097 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/mobile-view.md @@ -9,11 +9,11 @@ documentation: ug # Redaction in Mobile View in Vue PdfViewer Component -The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the Vue PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. +The Redaction Tool enables permanent marking and removal of sensitive content from PDF documents in mobile view using the Vue PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices. ![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png) -N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens. +N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. The mobile layout activates automatically on small screens. ## Adding Redaction in Mobile View @@ -110,11 +110,10 @@ When you enter redaction mode in mobile view, a specialized redaction toolbar ap ### Redaction Annotation Tool -The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content: +The Redaction Annotation tool is the primary redaction feature that allows drawing redaction rectangles on specific content. -Function: Creates visual redaction annotations that mark content for permanent removal -Usage: -Touch and drag to draw rectangular redaction overlays on any content area. +Function: Creates visual redaction annotations that mark content for permanent removal. +Usage: Touch and drag to draw rectangular redaction overlays on any content area. Process: - Selected content appears with a customizable overlay (default black) @@ -129,8 +128,8 @@ The Page Redaction tool enables batch redaction of entire pages based on specifi ![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png) -Function: Redacts complete pages or page ranges with a single action -Options Available: +Function: Redacts complete pages or page ranges with a single action. +Options available: - Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.) - Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.) - Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7) @@ -148,7 +147,7 @@ The Redaction Properties tool allows customization of redaction appearance befor ![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png) Function: Customize the visual appearance of redaction overlays and text replacement -Customizable Properties: +Customizable properties: - Fill Color: Change the redaction overlay color (default: black) - Outline Color: Set outline color for redaction boxes (optional) - Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL") diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md index 288120519..76ac89cd1 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/overview.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Redaction in Vue PdfViewer -Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Vue PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action. +Redaction annotations hide confidential or sensitive information in a PDF. The Syncfusion Vue PDF Viewer (EJ2) enables marking regions or entire pages for redaction, customizing appearance, and permanently applying redaction with a single action. ## Enable the redaction toolbar @@ -100,49 +100,47 @@ export default { {% endhighlight %} {% endtabs %} -N> Prerequisites: Add the PdfViewer control to your Vue application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. +N> Add the PdfViewer control to the Vue application and ensure the redaction feature is included in the installed package version. Once applied, redaction permanently removes the selected content. ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png) ## Add Redaction Annotations -You can mark specific content for redaction using the toolbar or through code. +Mark specific content for redaction using the toolbar or programmatically. -Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity. +Select the **Redaction tool** and draw over text or graphics to hide. Optionally add overlay text (for example, “Confidential”) and adjust style properties: fill color, border color, and opacity. ![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png) ## Delete Redaction Annotations -Redaction annotations can be removed easily: +Remove redaction annotations using the toolbar or keyboard shortcuts: -- Click the **Delete** button on the toolbar, or +- Click the **Delete** button on the toolbar, or - Select the annotation and press the **Delete** key. ![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png) ## Redact Entire Pages -The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically. +The viewer supports redacting entire pages that contain sensitive information. Use the built-in dialog to select specific pages, page ranges, or all pages, or invoke the same behavior programmatically. ![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png) ## Apply Redaction -Once annotations are added, you can permanently apply them to the document. This action cannot be undone. - -Use the **Apply Redaction** button on the toolbar or call the API method: +After adding redaction annotations, permanently apply them to the document using the **Apply Redaction** toolbar button or the corresponding API method. - The button is disabled until at least one redaction annotation exists. - It becomes active when redaction annotations are present. ![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. +A confirmation dialog appears before applying redaction to ensure acknowledgement of the irreversible action. ![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png) -N> After redaction is applied, the original content cannot be recovered. +N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. ## Comment Support diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md index ce7852ed7..da2ab0274 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/programmatic-support.md @@ -9,7 +9,7 @@ documentation: ug # Programmatic support for redaction in Vue PdfViewer -The Syncfusion Vue PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. +The Syncfusion Vue `PdfViewer` control provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel. ## Enable the redaction toolbar @@ -216,7 +216,7 @@ export default { ## Delete redaction annotations programmatically -Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code. +Redaction annotations can be removed using the `deleteAnnotationById` method or by selecting and deleting them through code. {% tabs %} {% highlight html tabtitle="App.vue" %} @@ -621,7 +621,7 @@ export default { {% endhighlight %} {% endtabs %} -N> Applying redaction is irreversible. Once applied, the original content cannot be recovered. +N> Applying redaction is irreversible. Before calling `redact()`, save or export a backup copy of the document; the original content cannot be recovered. ## Configure default redaction annotation properties @@ -729,7 +729,7 @@ export default { The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel. -![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) +![Redaction property panel showing overlay text and color options](../redaction/redaction-annotations-images/redaction-property-panel-icon.png) ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md index 1a8b6884c..fd1dfe053 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/search-redact.md @@ -8,18 +8,17 @@ documentation: ug domainurl: ##DomainURL## --- -# Search text and redact in Vue PdfViewer +# Search text and redact in Vue PDF Viewer -You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result. +You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and places redaction annotations for every result. -N> Prerequisites: Add the PdfViewer control to your Vue application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content. +N> Prerequisites: Add the PDF Viewer control to your Vue application and ensure a document is loaded. Confirm the redaction feature is available in the viewer version in use and that text extraction is enabled (`isExtractText: true`). Redaction is permanent once applied. -## Steps to add Redaction annotations on search Text Bounds +## Steps to add redaction annotations on search text bounds -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/Vue/getting-started) to create a simple PDF Viewer sample. +**Step 1:** Follow the steps in [PDF Viewer - Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF Viewer sample. - -**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds. +**Step 2:** Use the following code snippets to add redaction annotations to search text bounds. {% tabs %} {% highlight html tabtitle="App.vue" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md index 008242e72..08b0bac5b 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/toolbar.md @@ -9,11 +9,11 @@ documentation: ug # Redaction toolbar customization in Vue -The redaction toolbar in the Syncfusion Vue PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items. +The redaction toolbar in the Syncfusion Vue PDF Viewer can be customized by rearranging items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions within the existing toolbar. ## Enable the redaction toolbar -To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**. +To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the `RedactionEditTool`. The following example shows how to enable the redaction toolbar: @@ -105,17 +105,17 @@ Refer to the following image for the toolbar view: ## Show or hide the redaction toolbar -You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. +The redaction toolbar can be toggled using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method. ### Display the redaction toolbar using the toolbar icon -When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. +When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar. ![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png) ### Display the redaction toolbar programmatically -You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`. +Programmatic control is available via the viewer instance. For example, call `this.pdfViewer.toolbar.showRedactionToolbar(true)` to display the redaction toolbar, or `this.pdfViewer.toolbar.showRedactionToolbar(false)` to hide it. The following example demonstrates toggling the redaction toolbar programmatically: diff --git a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md index c50de00d7..66fc9459a 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md @@ -1,13 +1,13 @@ --- layout: post title: Redaction UI interactions in Vue PDF Viewer | Syncfusion -description: Learn about UI interactions in Redaction annotations of the Syncfusion Vue PDF Viewer component. +description: Learn about the various UI interactions in Redaction annotations of the Syncfusion Vue PDF Viewer component and more platform: document-processing control: PDF Viewer documentation: ug --- -# Redaction UI interactions in Vue PdfViewer +# Redaction UI interactions in Vue PDF Viewer ## Add redaction annotations from the toolbar @@ -27,21 +27,21 @@ N> The redaction tool is hidden by default. Customize the toolbar to include it. ## Add redaction annotations using the context menu -In addition to the toolbar, you can add redaction annotations directly from the context menu. Select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. +In addition to the toolbar, redaction annotations can be added directly from the context menu. To add from the context menu, select the text or region, right‑click (or long‑press on mobile), and choose the **Redact Annotation** option. This creates a redaction mark over the selected content. ![Context menu showing Redact Annotation option](redaction-annotations-images/redact-text-context-menu.png) ## Update redaction properties -After adding a redaction annotation, you can update its properties through the property panel or programmatically. +After adding a redaction annotation, properties can be updated through the property panel or programmatically. ### Update using the property panel -When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark. +When a redaction annotation is selected, a two‑tab property panel (General and Appearance) allows customization of text and styling. Changes are reflected instantly on the redaction mark. The property panel can be opened in two ways: -* By clicking the **redaction property panel** icon in the toolbar. +* By clicking the **Redaction property panel** icon in the toolbar. ![Redaction Property Panel Icon](redaction-annotations-images/redaction-property-panel-icon.png) * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu. @@ -62,7 +62,7 @@ Use the General tab to define how the content will look after redaction. These s ![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png) -Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes. +N> Hovering over a redaction annotation shows a preview of the final look. After Apply Redaction is selected, these settings are flattened into the page and cannot be edited. Tip: Select Save in the dialog to persist changes. #### Appearance tab @@ -78,12 +78,12 @@ Note: The Appearance tab affects only the temporary annotation. The final look a ### What changes after applying redaction? -When you click Apply Redaction: +When Apply Redaction is selected: * The selected content is permanently removed from the page. * The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color. * If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region. -* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply. +* All properties become read‑only. Overlay text, fill color, outline, and opacity cannot be edited after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before applying. ## Delete redaction annotations @@ -107,7 +107,7 @@ Entire pages can be marked for redaction using the **Redact Pages** option in th * **Even Pages Only** – Redacts all even‑numbered pages. * **Specific Pages** – Enter page numbers or ranges (e.g., 1, 3–5, 7) to redact. -After choosing the range, click **Save** to apply redaction marks to the selected pages. +After choosing the range, select **Save** to apply redaction marks to the selected pages. ![Page Redaction Panel](redaction-annotations-images/page-redaction-panel.png) @@ -120,7 +120,7 @@ The **Apply Redaction** button permanently removes all marked content from the d ![Redact Button Icon](redaction-annotations-images/redact-button-icon.png) -A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process. +A confirmation dialog appears before applying redaction to ensure acknowledgement of the irreversible nature of the process. ![Apply Redaction Dialog](redaction-annotations-images/apply-redaction-dialog.png) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md index b16ada99e..34a078dff 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Accessibility in Syncfusion Vue PDF Viewer -The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The PDF Viewer component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility. The accessibility compliance for the PDF Viewer component is summarized below. @@ -62,7 +62,7 @@ Note: Mobile device support is marked as partial due to platform-level constrain ## Keyboard interaction -The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component. +The PDF Viewer follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline to support users who rely on assistive technologies (AT) or keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer. | **Press (Windows)** |**Press (Macintosh)** | **To do this** | | --- | --- | --- | @@ -97,7 +97,15 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W |Shift + H |Shift + H |Enable pan mode| |Shift + V |Shift + V |Enable text selection mode| -The PDF Viewer supports custom keyboard commands through a `commandManager`, which handles commands triggered by specific key gestures. Custom commands are defined by users and executed accordingly. The `commandManager` includes a `keyboardCommand` collection to hold custom keyboard commands. Each custom command is represented by a `KeyboardCommand` entry, containing the command name and associated keyboard combination. Additionally, the `keyboardCustomCommands` parameter utilizes an event callback to handle keyboard events and trigger methods when specific key combinations are pressed. +The PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, and annotation deletion. + +Additional keyboard shortcuts are available for common actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, thumbnails). + +To support custom key bindings, the viewer provides a `commandManager` configuration object that handles custom commands triggered by specified key gestures. Custom commands are defined by name and executed when their associated key gesture is detected. + +The `commandManager` configuration includes a `keyboardCommand` collection that holds user-defined keyboard commands. Each command is represented by a `KeyboardCommand` object containing a `name` and an associated `gesture` describing the key combination. + +The `keyboardCustomCommands` parameter is an event callback invoked when a custom key combination is detected; handlers can perform application-specific actions in response. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -370,7 +378,7 @@ Key modifiers used in gestures: - Shift corresponds to the Shift key (value `4`). - Meta corresponds to the Command key on macOS or the Windows key on Windows (value `8`). -This setup enables users to perform custom actions within the PDF Viewer by pressing specific key combinations, improving navigation and interaction efficiency. +This enables custom actions within the PDF Viewer when specific key combinations are pressed, improving navigation and interaction efficiency. ## Ensuring accessibility diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md index b20dc92e0..e1ddf0e70 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md @@ -8,38 +8,40 @@ documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Annotation events in Vue +# PDF Viewer annotation events in Vue -The PDF Viewer component triggers various events based on user interactions and changes in the component's state. These events can be used to perform actions when a specific event occurs. This section describes the events available in the PDF Viewer component. +The PDF Viewer control supports several annotation events that enable applications to respond to user interactions—adding, moving, resizing, selecting, and removing annotations. Examples in this article reference the resource URL shown in the code samples. + +The annotation events supported by the PDF Viewer control are: | Event | Description | | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | -| [`annotationAdd`](#annotationadd) | Triggers when an annotation is added to a page in the PDF document. | -| [`annotationDoubleClick`](#annotationdoubleclick) | Triggers when an annotation is double-clicked. | -| [`annotationMouseLeave`](#annotationmouseleave) | Triggers when the mouse pointer moves away from an annotation object. | -| [`annotationMouseover`](#annotationmouseover) | Triggers when the mouse pointer moves over an annotation object. | -| [`annotationMove`](#annotationmove) | Triggers when an annotation is moved on a page in the PDF document. | -| [`annotationMoving`](#annotationmoving) | Triggers while an annotation is being moved. | -| [`annotationPropertiesChange`](#annotationpropertieschange) | Triggers when the properties of an annotation are modified on a PDF page. | -| [`annotationRemove`](#annotationremove) | Triggers when an annotation is removed from a page in the PDF document. | -| [`annotationResize`](#annotationresize) | Triggers when an annotation is resized on a page in the PDF document. | -| [`annotationSelect`](#annotationselect) | Triggers when an annotation is selected on a page in the PDF document. | -| [`annotationUnSelect`](#annotationunselect) | Triggers when an annotation is unselected on a page in the PDF document. | -| [`beforeAddFreeText`](#beforeaddfreetext) | Triggers before adding a text in the freeText annotation. | -| [`addSignature`](#addsignature) | Triggers when a signature is added to a page in the PDF document. | -| [`removeSignature`](#removesignature) | Triggers when a signature is removed from a page in the PDF document. | -| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized on a page in the PDF document. | -| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when the properties of a signature are changed on a page in the PDF document. | -| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected on a page in the PDF document. | -| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected on a page in the PDF document. | +| [annotationAdd](#annotationadd) | Triggers when an annotation is added. | +| [annotationDoubleClick](#annotationdoubleclick) | Triggers when an annotation is double-clicked. | +| [annotationMouseLeave](#annotationmouseleave) | Triggers when the mouse cursor leaves an annotation. | +| [annotationMouseover](#annotationmouseover) | Triggers when the mouse cursor moves over an annotation. | +| [annotationMove](#annotationmove) | Triggers when an annotation is moved. | +| [annotationMoving](#annotationmoving) | Triggers while an annotation is being moved. | +| [annotationPropertiesChange](#annotationpropertieschange) | Triggers when an annotation's properties are changed. | +| [annotationRemove](#annotationremove) | Triggers when an annotation is removed. | +| [annotationResize](#annotationresize) | Triggers when an annotation is resized. | +| [annotationSelect](#annotationselect) | Triggers when an annotation is selected. | +| [annotationUnselect](#annotationunselect) | Triggers when an annotation is unselected. | +| [beforeAddFreeText](#beforeaddfreetext) | Triggers before adding free text. | +| [addSignature](#addsignature) | Triggers when a signature is added. | +| [removeSignature](#removesignature) | Triggers when a signature is removed. | +| [resizeSignature](#resizesignature) | Triggers when a signature is resized. | +| [signaturePropertiesChange](#signaturepropertieschange) | Triggers when signature properties change. | +| [signatureSelect](#signatureselect) | Triggers when a signature is selected. | +| [signatureUnselect](#signatureunselect) | Triggers when a signature is unselected. | | ### annotationAdd -The [annotationAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs/) event is triggered when an annotation is added to a PDF document's page. +The [annotationAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationadd) event triggers when an annotation is added to a PDF document's page. #### Event Arguments -For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs/). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`. +For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationAddEventArgs). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`. The following example illustrates how to handle the `annotationAdd` event. @@ -114,11 +116,11 @@ The following example illustrates how to handle the `annotationAdd` event. ### annotationDoubleClick -The [annotationDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/) event is triggered when an annotation is double-clicked. +The [annotationDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationdoubleclick) event triggers when an annotation is double-clicked. #### Event Arguments -For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/). +For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs). The following example illustrates how to handle the `annotationDoubleClick` event. @@ -191,11 +193,11 @@ The following example illustrates how to handle the `annotationDoubleClick` even ### annotationMouseLeave -The [annotationMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/) event is triggered when the user's mouse pointer moves away from an annotation object. +The [annotationMouseLeave](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmouseleave) event triggers when the mouse cursor leaves an annotation. #### Event Arguments -For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/). +For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs). The following example illustrates how to handle the `annotationMouseLeave` event. @@ -268,11 +270,11 @@ The following example illustrates how to handle the `annotationMouseLeave` event ### annotationMouseover -The [annotationMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/) event is triggered when the mouse is moved over an annotation object. +The [annotationMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmouseover) event triggers when the mouse cursor moves over an annotation. #### Event Arguments -For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/). +For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs). The following example illustrates how to handle the `annotationMouseover` event. @@ -345,11 +347,11 @@ The following example illustrates how to handle the `annotationMouseover` event. ### annotationMove -The [annotationMove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs/) event is triggered when an annotation is moved over the page of the PDF document. +The [annotationMove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmove) event triggers when an annotation is moved. #### Event Arguments -For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs/). +For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs). The following example illustrates how to handle the `annotationMove` event. @@ -422,11 +424,11 @@ The following example illustrates how to handle the `annotationMove` event. ### annotationMoving -The [annotationMoving](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/) event is triggered while an annotation is being moved. +The [annotationMoving](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationmoving) event triggers while an annotation is being moved. #### Event Arguments -For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/). +For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs). The following example illustrates how to handle the `annotationMoving` event. @@ -499,11 +501,11 @@ The following example illustrates how to handle the `annotationMoving` event. ### annotationPropertiesChange -The [annotationPropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/) event is triggered when an annotation's property is modified on a PDF document page. +The [annotationPropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationpropertieschange) event triggers when an annotation’s properties are changed. #### Event Arguments -For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`. +For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs). It provides properties such as `annotationId`, `pageNumber`, and `action`. The following example illustrates how to handle the `annotationPropertiesChange` event. @@ -578,11 +580,11 @@ The following example illustrates how to handle the `annotationPropertiesChange` ### annotationRemove -The [annotationRemove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs/) event is triggered when an annotation is removed from a PDF document's page. +The [annotationRemove](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationremove) event triggers when an annotation is removed. #### Event Arguments -For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`. +For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs). It provides properties such as `annotationId` and `pageNumber`. The following example illustrates how to handle the `annotationRemove` event. @@ -655,11 +657,11 @@ The following example illustrates how to handle the `annotationRemove` event. ### annotationResize -The [annotationResize](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs/) event is triggered when an annotation is resized on a PDF document page. +The [annotationResize](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationresize) event triggers when an annotation is resized. #### Event Arguments -For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs/). +For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs). The following example illustrates how to handle the `annotationResize` event. @@ -732,11 +734,11 @@ The following example illustrates how to handle the `annotationResize` event. ### annotationSelect -The [annotationSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs/) event is triggered when an annotation is selected on a PDF document's page. +The [annotationSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationselect) event triggers when an annotation is selected. #### Event Arguments -For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs/). +For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs). The following example illustrates how to handle the `annotationSelect` event. @@ -809,11 +811,11 @@ The following example illustrates how to handle the `annotationSelect` event. ### annotationUnselect -The [annotationUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs/) event is triggered when an annotation is unselected from the PDF document's page. +The [annotationUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#annotationunselect) event triggers when an annotation is unselected. #### Event Arguments -For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs/). +For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs). The following example illustrates how to handle the `annotationUnselect` event. @@ -886,11 +888,11 @@ The following example illustrates how to handle the `annotationUnselect` event. ### beforeAddFreeText -The [beforeAddFreeText](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/) event is triggered before adding a text in the freeText annotation. +The [beforeAddFreeText](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#beforeaddfreetext) event triggers before adding free text to the PDF Viewer. #### Event Arguments -For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/). +For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs). The following example illustrates how to handle the `beforeAddFreeText` event. @@ -969,11 +971,11 @@ The following example illustrates how to handle the `beforeAddFreeText` event. ### addSignature -The [addSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs/) event is triggered when a signature is added to a page of a PDF document. +The [addSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#addsignature) event triggers when a signature is added to the PDF Viewer. #### Event Arguments -For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`. +For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs). It provides properties such as `pageNumber`. The following example illustrates how to handle the `addSignature` event. @@ -1046,11 +1048,11 @@ The following example illustrates how to handle the `addSignature` event. ### removeSignature -The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/) event is triggered when the signature is removed from the page of a PDF document. +The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#removesignature) event triggers when a signature is removed from the PDF Viewer. #### Event Arguments -For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`. +For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs). It provides properties such as `pageNumber`. The following example illustrates how to handle the `removeSignature` event. @@ -1123,11 +1125,11 @@ The following example illustrates how to handle the `removeSignature` event. ### resizeSignature -The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/) event is triggered when the signature is resized and placed on a page of a PDF document. +The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resizesignature) event triggers when a signature is resized in the PDF Viewer. #### Event Arguments -For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/). +For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs). The following example illustrates how to handle the `resizeSignature` event. @@ -1200,11 +1202,11 @@ The following example illustrates how to handle the `resizeSignature` event. ### signaturePropertiesChange -The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/) event is triggered when the property of the signature is changed in the page of the PDF document. +The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signaturepropertieschange) event triggers when signature properties are changed in the PDF Viewer. #### Event Arguments -For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). +For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs). The following example illustrates how to handle the `signaturePropertiesChange` event. @@ -1277,11 +1279,11 @@ The following example illustrates how to handle the `signaturePropertiesChange` ### signatureSelect -The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/) event is triggered when signature is selected over the page of the PDF document. +The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureselect) event triggers when a signature is selected in the PDF Viewer. #### Event Arguments -For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/). +For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs). The following example illustrates how to handle the `signatureSelect` event. @@ -1354,11 +1356,11 @@ The following example illustrates how to handle the `signatureSelect` event. ### signatureUnselect -The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs/) event is triggered when signature is unselected over the page of the PDF document. +The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureunselect) event triggers when a signature is unselected in the PDF Viewer. #### Event Arguments -For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs/). +For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs). The following example illustrates how to handle the `signatureUnselect` event. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md index 75875a422..cac0c5d9f 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md @@ -9,114 +9,116 @@ domainurl: ##DomainURL## --- # Annotations in mobile view in Vue PDF Viewer control +This article describes how to use annotation tools in the Syncfusion Vue PDF Viewer on touch-enabled (mobile) devices. It covers enabling the annotation toolbar, adding common annotation types, adjusting annotation properties, using comments, and removing annotations. + ## Open the annotation toolbar -**Step 1:** Tap Edit Annotation on the toolbar to enable the annotation toolbar. +**Step 1:** Tap the Edit Annotation icon on the main toolbar to enable the annotation toolbar. ![Enable the annotation toolbar](../images/editAnnotation.png) -**Step 2:** The annotation toolbar appears below the main toolbar. +**Step 2:** The annotation toolbar opens below the main toolbar, showing available annotation tools for touch interaction. ![Annotation toolbar displayed](../images/after-enabling-annotation-toolbar.png) ## Add sticky note annotations -**Step 1:** Tap the Sticky Notes icon, then tap the page where the note should be placed. +**Step 1:** Tap the Sticky Notes icon to activate the sticky note tool, then tap the target location on the page to place a note. ![Open sticky note tool](../images/add-sticky-notes.png) -**Step 2:** Tap the page to add the sticky note annotation. +**Step 2:** A sticky note annotation is added at the tapped location; tap the note to open or edit its content. ![Sticky note annotation added on the page](../images/sticky-notes-in-page.png) ## Add text markup annotations -**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup. +**Step 1:** Tap a text markup tool (for example, highlight or underline), then drag to select the text to be marked. ![Select text for markup](../images/select-text.png) -**Step 2:** The text markup annotation is applied to the selected text. +**Step 2:** Tap the selected area or use the toolbar action to apply the markup; the selected text is then annotated accordingly. ![Text markup applied on the page](../images/add-text-markup.png) ## Add shape and measurement annotations -**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar. +**Step 1:** Tap the Shape or Measure icon to open the shape/measurement toolbar. ![Open shape and measurement tools](../images/add-shapes.png) -**Step 2:** Choose a shape or measurement type, then draw it on the page. +**Step 2:** Choose a shape or measurement type, then draw the annotation on the page using touch gestures. ![Select measurement type](../images/open-radius.png) -**Step 3:** The annotation appears on the PDF page. +**Step 3:** The shape or measurement annotation is added to the PDF and can be adjusted via its property toolbar. ![Measurement annotation placed on the page](../images/radius-annotation.png) ## Add stamp annotations -**Step 1:** Tap the Stamp icon and select a stamp type from the menu. +**Step 1:** Tap the Stamp icon, then choose a stamp type from the presented menu. ![Open stamp tool](../images/open-stamp.png) -**Step 2:** Tap the page to place the stamp annotation. +**Step 2:** Tap the desired location on the page to place the stamp annotation. ![Stamp annotation added on the page](../images/add-revised.png) ## Add signature annotations -**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it. +**Step 1:** Tap the Signature icon to open the signature canvas. Draw the signature, tap Create, then tap the viewer to place the signature on the page. ![Open signature canvas](../images/add-signature.png) -**Step 2:** The signature is added to the page. +**Step 2:** The signature annotation is added and can be positioned or resized using standard touch controls. ![Signature placed on the page](../images/adding-signature.png) ## Add ink annotations -**Step 1:** Tap the Ink tool and draw on the page. +**Step 1:** Tap the Ink tool and draw directly on the page using a finger or stylus. ![Open ink tool](../images/open-ink.png) -**Step 2:** The ink annotation appears on the page. +**Step 2:** The ink strokes are saved as an ink annotation and remain editable until committed. ![Ink annotation drawn on the page](../images/ink-annotation.png) ## Change annotation properties (before adding) -**Step 1:** Change properties before placing the annotation. +**Step 1:** Open the annotation property toolbar prior to placing an annotation to set attributes such as color, opacity, stroke thickness, font, or measurement units. -**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page. +**Step 2:** With the desired properties selected in the property toolbar, place the annotation on the page; the chosen settings apply to the new annotation. ![Adjust fill color before adding](../images/open-fillcolor.png) ## Change annotation properties (after adding) -**Step 1:** Change annotation properties after adding the annotation. +**Step 1:** Select an existing annotation to reveal its property toolbar. -**Step 2:** Select the annotation to show the property toolbar, then adjust the properties. +**Step 2:** Adjust properties such as color, opacity, stroke, or edit text; changes are applied immediately to the selected annotation. ![Edit annotation properties after adding](../images/change-property.png) ## Delete annotations -**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it. +**Step 1:** Select the annotation to display its property toolbar, then tap the Delete icon to remove the annotation from the page. ![Delete icon in the property toolbar](../images/delete-icon.png) ## Open the comment panel -**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar. +**Step 1:** Tap the comment icon in the property toolbar or the annotation toolbar to open the comment panel for the selected annotation. ![Open the comment panel](../images/open-comment.png) -**Step 2:** The comment panel appears. +**Step 2:** The comment panel appears, showing existing comments and allowing new comments to be added. ![Comment panel displayed](../images/comment-panel.png) ## Close the comment panel -**Step 1:** Tap the Close button to close the comment panel. +**Step 1:** Tap the Close button in the comment panel to dismiss it and return to the document view. ![Close the comment panel](../images/close-comment-panel.png) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md index c090a66a9..aad161cf0 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md @@ -107,6 +107,8 @@ Edit comments and replies in the following ways: ![CommentDelete](../images/commentsdelete.png) +N> Deleting the root comment from the comment panel also deletes the associated annotation. + ## How to check the comments added by the user Comments added to the PDF document can be read using the annotation's `comments` property. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md index 6aa2605d3..bb51d3ef1 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Free text annotation in Vue PDF Viewer control -The PDF Viewer control provides options to add, edit, and delete free text annotations. +The PDF Viewer control supports adding, editing, and deleting free text annotations. This article explains how to add free text annotations using the toolbar and programmatically, modify their properties, and manage selection and focus. ## Add a free text annotation to the PDF document @@ -20,7 +20,7 @@ Free text annotations can be added to the PDF document using the annotation tool * Select the **Free Text Annotation** button to enable free text annotation mode. * Add text anywhere on the pages of the PDF document. -When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. +When in pan mode, selecting free text annotation switches the PDF Viewer to text-selection mode. ![Free text tool in the annotation toolbar](../images/freetext_tool.png) @@ -601,61 +601,61 @@ export default { N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. -## Edit the properties of free text annotations +## Edit free text annotation properties -Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. +Free text annotation properties that can be modified using the annotation toolbar include font family, font size, font styles, font color, text alignment, fill color, stroke color, border thickness, and opacity. The toolbar provides dedicated controls for each of these settings. -### Edit font family +## Font family -Edit the font family by selecting a font in the Font Family tool. +Choose a font family from the Font Family tool to update the annotation text. ![Change font family](../images/fontfamily.png) -### Edit font size +### Font size -Edit the font size by selecting a size in the Font Size tool. +Choose a size from the Font Size tool to update the annotation text size. ![Change font size](../images/fontsize.png) -### Edit font color +### Font color -Edit the font color using the color palette in the Font Color tool. +Select a color from the Font Color palette to change the font color. ![Change font color](../images/fontcolor.png) -### Edit the text alignment +### Text alignment -Align text by selecting an option from the Text Align tool. +Use the Text Align tool to set the annotation text alignment. ![FreeTextAnnotation](../images/textalign.png) -### Edit text styles +### Font styles -Edit text styles by selecting options in the Font Style tool. +Enable bold, italic, or underline using the Font Style tool. ![Change text styles](../images/fontstyle.png) -### Edit fill color +### Fill color -Edit the fill color using the color palette in the Edit Color tool. +Set the annotation background using the Edit Color tool. ![Change fill color](../images/fillcolor.png) -### Edit stroke color +### Stroke color -Edit the stroke color using the color palette in the Edit Stroke Color tool. +Set the annotation border color using the Edit Stroke Color tool. ![Change stroke color](../images/fontstroke.png) -### Edit thickness +### Thickness -Edit border thickness using the range slider in the Edit Thickness tool. +Adjust border thickness with the Edit Thickness slider. ![Change border thickness](../images/fontthickness.png) -### Edit opacity +### Opacity -Edit opacity using the range slider in the Edit Opacity tool. +Adjust annotation opacity with the Edit Opacity slider. ![Change opacity](../images/fontopacity.png) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md index 16d7832e4..439912e27 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md @@ -607,7 +607,7 @@ Edit opacity using the range slider in the Edit Opacity tool. Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. -After changing default values, the selected values are applied. Refer to the following code sample to set the default ink annotation settings. +After changing default values, the new defaults are applied to subsequently created ink annotations.. Refer to the following code sample to set the default ink annotation settings. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md index d138dd95b..3fb7cc511 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md @@ -9,7 +9,7 @@ documentation: ug # Line angle constraints in Vue PDF Viewer -The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. +The PDF Viewer control provides angle-constraint functionality for line-type annotations. When enabled, drawing operations snap to configured angle increments, improving accuracy and consistency for technical drawings and measurements. ## Enable line angle constraints Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles. @@ -81,7 +81,7 @@ export default { ### enableLineAngleConstraints -The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property: +The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types snap to fixed angles as defined by `restrictLineAngleTo`: - Lines - Arrows @@ -91,51 +91,51 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base - Area measurements - Volume measurements -**Key Benefits:** +**Key benefits:** -- Automatic angle snapping during the drawing -- Enhanced precision for technical drawings and measurements -- Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping) -- Real-time visual feedback showing angle snapping behavior +- Automatic angle snapping while drawing +- Improved precision for technical drawings and measurements +- Desktop behavior: hold Shift while drawing to toggle constraints (if constraints are disabled, Shift temporarily enables snapping; if enabled, Shift enforces snapping) +- Real-time visual feedback during drawing ### restrictLineAngleTo -Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45. +Specifies the angle increment (in degrees) used for snapping. The default increment is 45°. -Angle snapping rules: +Angle snapping behavior: -- The initial drawing direction is treated as the 0° reference point -- Snapped angles are calculated based on the increment -- If the increment doesn’t divide 360 evenly, angles reset after 360° +- The initial drawing direction is treated as the 0° reference point. +- Snapped angles are calculated by adding the increment to the reference direction. +- If the increment does not divide 360 evenly, angles continue wrapping after 360°. Examples: -- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° -- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° +- `restrictLineAngleTo: 45` → snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +- `restrictLineAngleTo: 100` → snapped angles: 0°, 100°, 200°, 300°, 360° ## Work with constrained annotations -### Drawing Behavior +### Drawing behavior -When line angle constraints are enabled: +When angle constraints are enabled: -- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter). -- The segment snaps to the nearest allowed angle. -- A visual indicator reflects snapping in real time. -- Release to complete the annotation. +- Begin drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter). +- The segment snaps to the nearest allowed angle according to `restrictLineAngleTo`. +- A visual indicator displays the current snapping angle in real time. +- Release to finalize the annotation. -### Keyboard Shortcuts +### Keyboard shortcuts Desktop platforms: -- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping. -### Selector-Based Modifications +- `Shift` + drag: toggles snapping during the drag operation. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping. -When modifying existing line annotations using selectors: +### Modifying constrained annotations -- Constraints apply based on the original line direction. -- The reference angle (0°) is determined by the line’s current orientation. -- Constraint snapping during modification is supported for Line and Arrow. -- Adjustments snap to the configured angle increment. +When editing existing line annotations with selectors: -N> You can refer to our [Vue PDF Viewer](https://www.syncfusion.com/vue-ui-components/vue-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) to learn how to render and configure the PDF Viewer. +- Constraints apply relative to the annotation's current orientation (the line's direction is the 0° reference). +- Constraint snapping during modification is supported for Line and Arrow annotations. +- Adjustments snap according to the configured `restrictLineAngleTo` increment. + +N> Refer to the Vue PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/vue-pdf-viewer) for highlights. See additional [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md index bd82f4437..4bbd28f99 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md @@ -18,20 +18,20 @@ The PDF Viewer provides options to add measurement annotations. The supported me * Radius * Volume -![Measurement annotations overview](../images/calibrate_annotation.png) +![PDF Viewer measurement annotations toolbar overview](../images/calibrate_annotation.png) ## Adding measurement annotations to the PDF document -The measurement annotations can be added to the PDF document using the annotation toolbar. +Measurement annotations can be added to the PDF document using the annotation toolbar. * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. * Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types. * Select a measurement type to enable its annotation mode. * Measure and add annotations on the pages of the PDF document. -When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode. +When the viewer is in pan mode, selecting a measurement annotation switches it to text selection mode. -![CalibrateTool](../images/calibrate_tool.png) +![Annotation toolbar showing measurement tools](../images/calibrate_tool.png) The following example switches to distance annotation mode. @@ -202,7 +202,7 @@ export default { ## Add a measurement annotation to the PDF document programmatically -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Here is an example showing how to add measurement annotations programmatically using addAnnotation(): @@ -919,35 +919,35 @@ The fill color, stroke color, thickness, and opacity can be edited using the Edi The fill color of the annotation can be edited using the color palette provided in the Edit Color tool. -![CalibrateFillColor](../images/calibrate_fillcolor.png) +![Edit Color palette for measurement annotations](../images/calibrate_fillcolor.png) ### Edit stroke color The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. -![CalibrateStrokeColor](../images/calibrate_stroke.png) +![Edit Stroke Color palette for measurement annotations](../images/calibrate_stroke.png) ### Edit thickness Edit border thickness using the range slider provided in the Edit Thickness tool. -![CalibrateThickness](../images/calibrate_thickness.png) +![Thickness slider in the Edit Thickness tool](../images/calibrate_thickness.png) ### Edit opacity The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. -![CalibrateOpacity](../images/calibrate_opacity.png) +![Opacity slider in the Edit Opacity tool](../images/calibrate_opacity.png) ### Edit the line properties Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu. -![CalibrateProperty](../images/calibrate_lineprop.png) +![Line properties dialog for measurement annotations](../images/calibrate_lineprop.png) ## Set default properties during control initialization -Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. +Default properties for measurement annotations can be set before creating the control using `distanceSettings`, `perimeterSettings`, `areaSettings`, `radiusSettings`, and `volumeSettings`. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -1108,9 +1108,9 @@ export default { The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control. -![CalibrateScaleRatio](../images/calibrate_scaleratio.png) +![Scale ratio option in the context menu](../images/calibrate_scaleratio.png) -The Units of measurements support for the measurement annotations in the PDF Viewer are +The PDF Viewer supports the following measurement units: * Inch * Millimeter @@ -1119,7 +1119,7 @@ The Units of measurements support for the measurement annotations in the PDF Vie * Pica * Feet -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) +![Scale ratio settings dialog for measurement annotations](../images/calibrate_scaledialog.png) ## Setting default scale ratio settings during control initialization diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md index 458a6ac39..2b4fb2b7a 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Shape annotation in Vue PDF Viewer control -The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: +The PDF Viewer provides options to add, edit, and delete shape annotations. Supported shape annotation types include: * Line * Arrow @@ -24,16 +24,15 @@ The PDF Viewer control provides options to add, edit, and delete shape annotatio Shape annotations can be added to the PDF document using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types. -* Select a shape type to enable its annotation mode. -* Draw the shape on the pages of the PDF document. +* Select the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Open the **Shape Annotation** drop-down to view available shape types. +* Select a shape type to enable its annotation mode, then draw the shape on the page. -N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience. +N> When the PDF Viewer is in pan mode and a shape annotation tool is selected, the viewer automatically switches to text select mode to ensure a smooth interaction experience. ![Shape annotation toolbar](../images/shape_toolbar.png) -Refer to the following code sample to switch to the circle annotation mode. +Use the following sample to switch the viewer to circle annotation mode. {% tabs %} @@ -204,7 +203,7 @@ export default { ## Add a shape annotation to the PDF document programmatically -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Here is an example showing how to add shape annotations programmatically using addAnnotation(): diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md index 92fcbab7f..092aa0b4c 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md @@ -14,22 +14,26 @@ The PDF Viewer control supports adding handwritten signatures to a PDF document. ## Adding a handwritten signature to the PDF document -The handwritten signature can be added to the PDF document using the annotation toolbar. +Add a handwritten signature using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears. +* Open the annotation toolbar by clicking the **Edit Annotation** button on the PDF Viewer toolbar. +* Select the **HandWritten Signature** button in the annotation toolbar to open the signature panel. -![Open the handwritten signature panel](../images/select_sign.png) +![Handwritten signature button and panel](../images/select_sign.png) * Draw the signature in the panel. -![Draw the handwritten signature](../images/add_sign.png) +![Draw a signature in the signature panel](../images/add_sign.png) * Click **Create**, move the signature, and place it at the desired location. ![Place the handwritten signature on the page](../images/create_sign.png) -Refer to the following code sample to switch to the handwritten signature mode programmatically. +## Adding a handwritten signature to the PDF document Programmatically + +With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. + +Here is an example of using the `addAnnotation()` method to add a handwritten signature programmatically {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -584,7 +588,7 @@ export default { ## Edit the properties of handwritten signatures -Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. +Edit the stroke color, border thickness, and opacity of a handwritten signature using the annotation toolbar's edit stroke color, thickness, and opacity tools. ### Edit stroke color diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md index 3fb088c48..b4af67c03 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md @@ -17,7 +17,7 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol * Standard Business * Custom Stamp -![StampAnnotation](../images/stamp_annot.png) +![Stamp annotations example showing dynamic, sign here, standard business, and custom stamps](../images/stamp_annot.png) ## Add stamp annotations to the PDF document @@ -26,11 +26,11 @@ The stamp annotations can be added to the PDF document using the annotation tool * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. * Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. -![StampTool](../images/stamp_tool.png) +![Stamp annotation tool in the PDF Viewer toolbar](../images/stamp_tool.png) * Select a stamp type to enable its annotation mode. -![StampPopup](../images/selectstamp_annot.png) +![Stamp type popup listing available stamps](../images/selectstamp_annot.png) * Place the stamp on the pages of the PDF document. @@ -526,9 +526,9 @@ export default { {% endhighlight %} {% endtabs %} -## Edit an existing stamp annotation programmatically +## Edit the existing stamp annotation programmatically -To modify an existing stamp annotation programmatically, use the editAnnotation() method. +To modify an existing stamp annotation in the Syncfusion® PDF Viewer programmatically, use the **editAnnotation()** method. Here is an example of using editAnnotation(): @@ -724,19 +724,17 @@ export default { * Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types. * Click the Custom Stamp button. -![CustomStamp](../images/customStamp.png) +![Add a custom stamp using the file picker dialog](../images/customStamp.png) * In the file explorer dialog, choose an image and add it to the PDF page. ->Only JPG and JPEG image formats are supported for custom stamp annotations. +N> Only JPG and JPEG image formats are supported for custom stamp annotations. ## Setting default properties during control initialization -The properties of the stamp annotation can be set before creating the control using the StampSettings. +Default properties for stamp annotations can be set before creating the control using StampSettings. -After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. - -Refer to the following code sample to set the default sticky note annotation settings. +After changing the default opacity using the Edit Opacity tool, the selected value is applied to subsequent stamps. The following example shows how to set default stamp annotation settings. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md index c0084a84f..ba0520df1 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/sticky-notes-annotation.md @@ -12,31 +12,31 @@ domainurl: ##DomainURL## The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. -![StickyNotesAnnotation](../images/stickynotes_annotation.png) +![Sticky note annotation added to a PDF page](../images/stickynotes_annotation.png) ## Add a sticky note annotation to the PDF document Sticky note annotations can be added to the PDF document using the annotation toolbar. -* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. +* Click the **Comments** button in the PDF Viewer toolbar to open the annotation toolbar. * Click the position where the sticky note annotation should be added. -* The sticky note annotation is added at the clicked position. +* The sticky note annotation appears at the selected position. -![StickyNotesTool](../images/stickynotes_tool.png) +![Sticky note annotation tool](../images/stickynotes_tool.png) Annotation comments can be added using the comment panel. * Select a sticky note annotation in the PDF document and right-click it. -* Select Comment from the context menu. +* Choose Comment from the context menu. * Add comments, replies, and status using the comment panel. -![StickyNotesComment](../images/stickynotes_comment.png) +![Open the comment panel to add or view comments for a sticky note annotation](../images/stickynotes_comment.png) ## Add a sticky note annotation to the PDF document programmatically The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. -Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): +The following example shows how to add a sticky note annotation programmatically using `addAnnotation()`: {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -211,7 +211,7 @@ export default { To modify an existing sticky note annotation programmatically, use the editAnnotation() method. -Here is an example of using editAnnotation(): +The following example shows how to modify an existing sticky note annotation using `editAnnotation()`: {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -400,25 +400,25 @@ export default { Edit opacity using the range slider in the Edit Opacity tool. -![StickyNotesOpacity](../images/sticky_opacity.png) +![Adjust opacity for a sticky note annotation using the Edit Opacity slider](../images/sticky_opacity.png) ### Editing comments -Comment text, replies, and status can be edited using the comment panel. +Comment text, replies, and status can be edited in the comment panel. * Open the comment panel using the Comment Panel button in the annotation toolbar. -![StickyNotesComment](../images/commentPanel.png) +![Comment panel showing comments and replies for sticky note annotations](../images/commentPanel.png) Modify or delete comments or replies, and change status using the menu options in the comment panel. -![StickyNotesEdit](../images/sticky_editbtn.png) +![Comment panel showing comments and replies for sticky note annotations](../images/sticky_editbtn.png) ## Set default properties during control initialization -Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. +Default properties for sticky note annotations can be set before creating the control using `StickyNotesSettings`. -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. +After changing default opacity with the Edit Opacity tool, the selected value is applied to new sticky note annotations. The following example sets default sticky note annotation properties. {% tabs %} @@ -557,7 +557,7 @@ export default { ## Disable sticky note annotations -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. +The PDF Viewer control provides an option to disable sticky note annotations. The following example shows how to disable the feature. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md index dfe847e9c..007147ad0 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/text-markup-annotation.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Text markup annotation in Vue PDF viewer component +# Text markup annotation in Vue PDF Viewer -The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly. +The PDF Viewer provides options to add, edit, and delete text markup annotations, including highlight, underline, strikethrough, and squiggly. -![Alt text](../images/text_markup_annotation.png) +![Text markup annotations](../images/text_markup_annotation.png) ## Highlight text @@ -22,7 +22,7 @@ There are two ways to highlight text: * Select text in the PDF document and right-click it. * Select **Highlight** in the context menu. - ![Alt text](../images/highlight_context.png) + ![Context menu option to highlight selected text](../images/highlight_context.png) 2.Using the annotation toolbar @@ -31,7 +31,7 @@ There are two ways to highlight text: * Select text to add the highlight annotation. * Alternatively, select text first and then click **Highlight**. - ![Alt text](../images/highlight_button.png) + ![Highlight button in the annotation toolbar](../images/highlight_button.png) When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection. @@ -571,7 +571,7 @@ There are two ways to underline text: * Select text in the PDF document and right-click it. * Select **Underline** in the context menu. - ![Alt text](../images/underline_context.png) + ![Context menu option to underline selected text](../images/underline_context.png) 2.Using the annotation toolbar @@ -580,7 +580,7 @@ There are two ways to underline text: * Select text to add the underline annotation. * Alternatively, select text first and then click **Underline**. - ![Alt text](../images/underline_button.png) + ![Underline button in the annotation toolbar](../images/underline_button.png) In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text. @@ -1119,7 +1119,7 @@ There are two ways to strikethrough text: * Select text in the PDF document and right-click it. * Select **Strikethrough** in the context menu. - ![Alt text](../images/strikethrough_context.png) + ![Context menu option to strikethrough selected text](../images/strikethrough_context.png) 2.Using the annotation toolbar @@ -1128,9 +1128,9 @@ There are two ways to strikethrough text: * Select text to add the strikethrough annotation. * Alternatively, select text first and then click **Strikethrough**. - ![Alt text](../images/strikethrough_button.png) + ![Strikethrough button in the annotation toolbar](../images/strikethrough_button.png) -In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text. +N> While in pan mode, clicking the strikethrough button switches the viewer to text select mode so text can be selected for annotation. Refer to the following code snippet to switch to strikethrough mode. @@ -1670,7 +1670,7 @@ There are two ways to add squiggly to text: * Select text in the PDF document and right-click it. * Select **Squiggly** in the context menu. - ![Alt text](../images/squiggly_context.png) + ![Context menu option to add a squiggly underline to selected text](../images/squiggly_context.png) 2.Using the annotation toolbar @@ -1679,9 +1679,9 @@ There are two ways to add squiggly to text: * Select the text and the squiggly annotation will be added. * You can also select the text and apply the squiggly annotation using the **Squiggly** button. - ![Alt text](../images/squiggly_button.png) + ![Squiggly button in the annotation toolbar](../images/squiggly_button.png) -In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text. +N> While in pan mode, clicking the squiggly button switches the viewer to text select mode so text can be selected for annotation. Refer to the following code snippet to switch to squiggly mode. @@ -2225,29 +2225,29 @@ The selected annotation can be deleted by the following ways: * Select the annotation to be deleted. * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted. - ![Alt text](../images/delete_button.png) + ![Delete annotation button in the annotation toolbar](../images/delete_button.png) -## Editing the properties of the text markup annotation +## Edit text markup annotation properties -The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. +The color and opacity of text markup annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar. -### Editing color +### Edit color -The color of the annotation can be edited using the color palette provided in the Edit Color tool. +Use the color palette in the Edit Color tool to change the annotation color. -![Alt text](../images/edit_color.png) +![Color palette in the Edit Color tool for text markup annotations](../images/edit_color.png) -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Use the range slider in the Edit Opacity tool to change annotation opacity. -![Alt text](../images/edit_opacity.png) +![Range slider in the Edit Opacity tool for text markup annotations](../images/edit_opacity.png) -## Setting default properties during control initialization +## Set default properties during control initialization The properties of the text markup annotation can be set before creating the control using highlightSettings, underlineSettings, strikethroughSettings, squigglySettings. ->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values. +N> After editing default color and opacity with the Edit Color and Edit Opacity tools, the default values update to the selected settings. Refer to the following code snippet to set the default annotation settings. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md index 6d84a8c90..cf334baff 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md @@ -10,11 +10,33 @@ domainurl: ##DomainURL## # Content Security Policy in Vue PDF Viewer -Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page. +Content Security Policy (CSP) is a security feature implemented by web browsers that helps protect against attacks such as cross-site scripting (XSS) and data injection. It restricts the sources from which content can be loaded on a web page. -To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag. +When enabling strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default for enhanced security. To use the Syncfusion PDF Viewer control in strict CSP mode, specific directives must be configured in the CSP meta tag to allow the control's necessary resources. -* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'wasm-unsafe' blob:;` ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows. +## CSP Directives Reference + +The following table describes each CSP directive and its usage with the Syncfusion PDF Viewer: + +| Directive | Usage | +|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `default-src 'self';` | Sets the default policy for loading resources. `'self'` restricts loading to the same origin (same domain). | +| `script-src 'self' 'wasm-unsafe-eval' blob:;` | Defines where JavaScript and WebAssembly code can be loaded. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` permits WebAssembly compilation from JavaScript functions. `blob:` allows loading scripts from Blob URLs. | +| `worker-src 'self' blob:;` | Controls where web workers can be loaded. `'self'` allows same-origin workers. `blob:` enables blob-based workers, which are common in PDF viewers and compute-intensive applications. | +| `connect-src 'self' data:;` | Restricts network requests (fetch, XHR, WebSockets) to specified sources. `'self'` limits requests to the same origin. `data:` allows data URIs. | +| `style-src 'self' blob:;` | Defines stylesheet sources. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles necessary for runtime CSS generation. | +| `font-src 'self' data:;` | Controls font loading sources. `'self'` allows local fonts. `data:` permits inline fonts (base64 encoded), and URLs enable loading from external font CDNs. | +| `img-src 'self' data: blob:;` | Controls image loading sources. `'self'` restricts to the same origin. `data:` allows inline images (base64 encoded). `blob:` allows Blob URLs for dynamically generated images. | + +## Configuring CSP for PDF Viewer + +The following sections describe CSP configurations required for different PDF Viewer features. + +### Styles and Fonts + +The PDF Viewer is rendered with calculated inline styles and base64-encoded font icons, which are blocked in strict CSP mode. Additionally, the material and tailwind built-in themes reference the external Roboto font from Google Fonts, which must also be allowed. + +Include the following directives to permit inline styles and external fonts: {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -26,9 +48,7 @@ To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs {% endhighlight %} {% endtabs %} -* Syncfusion **material** and **tailwind** built-in themes contain a reference to the [`Roboto’s external font`](https://fonts.googleapis.com/css?family=Roboto:400,500), which is also blocked. To allow them, add the [`external font`](https://fonts.googleapis.com/css?family=Roboto:400,500) reference to the [`style-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the above meta tag. - -The resultant meta tag is included within the `` tag and resolves the CSP violation on the application's side when utilizing Syncfusion PDF Viewer control with material and tailwind themes. +The meta tag should be placed within the `` section of the HTML document to resolve CSP violations when using material or tailwind themes: {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -43,7 +63,9 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the image-src data: directive in the meta tag. To allow them, add the [`style-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`image-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows. +### Images and Blobs + +When images are added as blob or base64 data to the PDF Viewer, they are blocked in strict CSP mode. To permit these resources, include the [`img-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directive in the CSP meta tag: {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -57,7 +79,9 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -* Syncfusion PDF Viewer control when **web worker** and is used, which is blocked on a strict CSP-enabled site. To allow them, add the [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src) and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives in the above meta tag as follows. +### Scripts, WebAssembly, and Workers + +The PDF Viewer uses WebAssembly and web workers for processing and rendering. Both are blocked in strict CSP mode. To enable these features, include the [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src), [`worker-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/worker-src), and [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src) directives: {% tabs %} {% highlight razor tabtitle="HTML" %} @@ -73,18 +97,13 @@ The resultant meta tag is included within the `` tag and resolves the CSP {% endhighlight %} {% endtabs %} -N> In accordance with the latest security practices, the Syncfusion PDF Viewer control now recommends using `wasm-unsafe` in the Content Security Policy (CSP) settings to enhance the security of WebAssembly operations. This change ensures a safer execution environment while maintaining the necessary functionality. Make sure to update your CSP meta tags to reflect this change for optimal security compliance. +N> In accordance with the latest security practices, the Syncfusion PDF Viewer control recommends using `wasm-unsafe-eval` in the Content Security Policy (CSP) settings to enable secure WebAssembly compilation. This directive allows WebAssembly to be compiled from JavaScript functions while maintaining a secure execution environment. Update your CSP meta tags to reflect this change for optimal security compliance. -### Please find the usage of each directives: +## Security Best Practices -| Directive | Usage | -|------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `default-src 'none';` | Sets the default policy for loading resources. `'self'` means only allow resources from the same origin (same domain). | -| `script-src 'self' 'wasm-unsafe-eval' blob:;` | Defines where JavaScript (and WebAssembly) code can come from. `'self'` allows scripts from the same origin. `'wasm-unsafe-eval'` allows compilation of WebAssembly using JS eval()-like functions (security-sensitive). `blob:` allows loading scripts from Blob URLs. | -| `worker-src 'self' blob:;` | Controls where workers can be loaded from. `'self'` allows same-origin workers. `blob:` allows blob-based workers, common in PDF viewers and heavy JS applications. | -| `connect-src 'self';` | Controls where the application can make network requests, such as `fetch()`, XHR, and WebSockets. `'self'` restricts this to the same origin. | -| `style-src 'self' blob:;` | Defines the sources for stylesheets. `'self'` restricts to the same origin. `blob:` allows dynamically generated styles, which might be necessary for apps with dynamically generated CSS. | -| `font-src 'self' data:` | Controls where fonts can be loaded from. `'self'` allows local fonts. `data:` allows inline fonts (base64 embedded), and the URLs allow loading from external font CDN. | -| `img-src 'self' data:;` | Controls where images can be loaded from. `'self'` restricts to the same origin. `data:` allows inline images (base64). | +- Test CSP configurations thoroughly in development to identify blocked resources before deployment. +- Monitor browser console for CSP violations that may indicate missing directives. +- Use the most restrictive CSP possible while maintaining required functionality. +- Regularly review CSP settings when upgrading the Syncfusion PDF Viewer to the latest version. [View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/download.md b/Document-Processing/PDF/PDF-Viewer/vue/download.md index df5c047b5..51b00ea17 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/download.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/download.md @@ -9,15 +9,13 @@ domainurl: ##DomainURL## --- # Download in Vue PDF viewer control -The PDF Viewer supports downloading the loaded PDF document. Use the enableDownload property to enable or disable the download option, as shown below. +The Vue PDF Viewer lets users download the currently loaded PDF. Enable the download toolbar button with `enableDownload` for both standalone and server-backed viewers. The examples below demonstrate typical configurations and how to trigger a programmatic download. -![Alt text](./images/download.png) +![PDF Viewer toolbar with download button](./images/download.png) > Note: When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests. -![PDF Viewer toolbar showing the download button](./images/download.png) - -You can invoke the download action using the following code snippet: +To invoke download programmatically, use the following snippet: {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md index 938ddf1e7..3602fd3d2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/event.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Events in Vue PDF Viewer -The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows. +The PDF Viewer component triggers events throughout its lifecycle, enabling you to respond to user interactions and document state changes. These events are organized into categories: **Component Lifecycle** (created, resourcesLoaded), **Navigation** (pageChange, pageClick), **Document Operations** (documentLoad, documentLoadFailed, downloadStart, downloadEnd, printStart, printEnd), **User Interactions** (toolbarClick, bookmarkClick, thumbnailClick), **Text Operations** (textSelectionStart, textSelectionEnd, textSearchStart, textSearchComplete), **Annotations** (commentAdd, commentEdit, commentDelete), **Forms** (buttonFieldClick, validateFormFields), and **Customization** (customContextMenuBeforeOpen, customContextMenuSelect). Subscribe to events using the `@eventName` syntax to execute custom code when specific actions occur. + +## Commonly used events The following table lists commonly used events supported by the PDF Viewer component: @@ -70,9 +72,9 @@ Note: For annotation and signature events, see the dedicated Annotations Events ## bookmarkClick -The [bookmarkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#bookmarkclick) event triggers when a bookmark item is clicked in the bookmark panel. +The [bookmarkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#bookmarkclick) event triggers when a bookmark item is clicked in the bookmark panel. -- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/bookmarkClickEventArgs/). +- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/bookmarkClickEventArgs). Example: @@ -150,7 +152,7 @@ export default { ## toolbarClick -The [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#toolbarclick) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. +The [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#toolbarclick) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name. - Event arguments: `ClickEventArgs`. @@ -229,9 +231,9 @@ export default { ## validateFormFields -The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#validateformfields) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. +The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#validateformfields) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed. -- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs/) +- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs) - name: Event name - documentName: Current document name - formField: The last interacted field’s data (if applicable) @@ -320,9 +322,9 @@ Tip ## zoomChange -The [zoomChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#zoomchange) event triggers when the magnification value changes. +The [zoomChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#zoomchange) event triggers when the magnification value changes. -- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/zoomChangeEventArgs/). +- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/zoomChangeEventArgs). Example: @@ -400,9 +402,9 @@ export default { ## buttonFieldClick -The [buttonFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#buttonfieldclick) event triggers when a button form field is clicked. +The [buttonFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#buttonfieldclick) event triggers when a button form field is clicked. -- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/buttonFieldClickEventArgs/). +- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/buttonFieldClickEventArgs). Example: @@ -480,9 +482,9 @@ export default { ## commentAdd -The [commentAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentadd) event triggers when a comment is added in the comment panel. +The [commentAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentadd) event triggers when a comment is added in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs). Example: @@ -560,9 +562,9 @@ export default { ## commentDelete -The [commentDelete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentdelete) event triggers when a comment is deleted in the comment panel. +The [commentDelete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentdelete) event triggers when a comment is deleted in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs). Example: @@ -640,9 +642,9 @@ export default { ## commentEdit -The [commentEdit](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentedit) event triggers when a comment is edited in the comment panel. +The [commentEdit](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentedit) event triggers when a comment is edited in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs). Example: @@ -720,9 +722,9 @@ export default { ## commentSelect -The [commentSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentselect) event triggers when a comment is selected in the comment panel. +The [commentSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentselect) event triggers when a comment is selected in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs). Example: @@ -784,9 +786,9 @@ export default { ## commentStatusChanged -The [commentStatusChanged](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentstatuschanged) event triggers when a comment status is changed in the comment panel. +The [commentStatusChanged](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#commentstatuschanged) event triggers when a comment status is changed in the comment panel. -- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/). +- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs). Example: @@ -834,7 +836,7 @@ export default { ## created -The [created](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#created) event is triggered during the creation of the PDF Viewer component. +The [created](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#created) event is triggered during the creation of the PDF Viewer component. - Event arguments: `void`. @@ -915,9 +917,9 @@ export default { ## customContextMenuBeforeOpen -The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenubeforeopen) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). +The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#customcontextmenubeforeopen) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected). -- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/) +- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs) - name: Event name - ids: Array of menu item ids that will be shown; remove ids to hide items for this open @@ -1015,9 +1017,9 @@ export default { ## customContextMenuSelect -The [customContextMenuSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenuselect) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. +The [customContextMenuSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#customcontextmenuselect) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id. -- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuSelectEventArgs/). +- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuSelectEventArgs). - name: Event name - id: The id of the clicked menu item @@ -1115,9 +1117,9 @@ export default { ## documentLoad -The [documentLoad](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentload) event occurs after a document is successfully loaded and parsed. +The [documentLoad](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentload) event occurs after a document is successfully loaded and parsed. -- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadEventArgs/). +- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadEventArgs). Example: @@ -1195,9 +1197,9 @@ export default { ## documentLoadFailed -The [documentLoadFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentloadfailed) event triggers when loading a document fails. +The [documentLoadFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentloadfailed) event triggers when loading a document fails. -- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadFailedEventArgs/). +- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadFailedEventArgs). Example: @@ -1276,9 +1278,9 @@ export default { ## documentUnload -The [documentUnload](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentunload) event triggers when closing the current document. +The [documentUnload](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#documentunload) event triggers when closing the current document. -- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/unloadEventArgs/). +- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/unloadEventArgs). Example: @@ -1358,9 +1360,9 @@ export default { ## downloadEnd -The [downloadEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadend) event triggers after a document download completes. +The [downloadEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#downloadend) event triggers after a document download completes. -- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadEndEventArgs/). +- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadEndEventArgs). Example: @@ -1440,9 +1442,9 @@ export default { ## downloadStart -The [downloadStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadstart) event triggers when the download operation is initiated. +The [downloadStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#downloadstart) event triggers when the download operation is initiated. -- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadStartEventArgs/). +- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadStartEventArgs). Example: @@ -1521,9 +1523,9 @@ export default { ## exportFailed -The [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportfailed) event triggers when exporting annotations fails. +The [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportfailed) event triggers when exporting annotations fails. -- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportFailureEventArgs/). +- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportFailureEventArgs). Example: @@ -1602,9 +1604,9 @@ export default { ## exportStart -The [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportstart) event triggers when exporting annotations starts. +The [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportstart) event triggers when exporting annotations starts. -- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportStartEventArgs/). +- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportStartEventArgs). Example: @@ -1683,9 +1685,9 @@ export default { ## exportSuccess -The [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportsuccess) event triggers when annotations are exported successfully. +The [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#exportsuccess) event triggers when annotations are exported successfully. -- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportSuccessEventArgs/). +- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportSuccessEventArgs). Example: @@ -1764,9 +1766,9 @@ export default { ## extractTextCompleted -The [extractTextCompleted](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#extracttextcompleted) event triggers when text extraction completes. +The [extractTextCompleted](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#extracttextcompleted) event triggers when text extraction completes. -- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/extractTextCompletedEventArgs/). +- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/extractTextCompletedEventArgs). Example: @@ -1845,9 +1847,9 @@ export default { ## hyperlinkClick -The [hyperlinkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkclick) event triggers when a hyperlink is clicked. +The [hyperlinkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#hyperlinkclick) event triggers when a hyperlink is clicked. -- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/hyperlinkClickEventArgs/). +- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/hyperlinkClickEventArgs). Example: @@ -1926,7 +1928,7 @@ export default { ## hyperlinkMouseOver -The [hyperlinkMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkmouseover) event triggers when hovering over a hyperlink. +The [hyperlinkMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#hyperlinkmouseover) event triggers when hovering over a hyperlink. - Event arguments: HyperlinkMouseOverArgs. @@ -2007,9 +2009,9 @@ export default { ## importFailed -The [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importfailed) event triggers when importing annotations fails. +The [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importfailed) event triggers when importing annotations fails. -- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importFailureEventArgs/). +- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importFailureEventArgs). Example: @@ -2088,9 +2090,9 @@ export default { ## importStart -The [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importstart) event triggers when importing annotations starts. +The [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importstart) event triggers when importing annotations starts. -- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importStartEventArgs/). +- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importStartEventArgs). Example: @@ -2169,9 +2171,9 @@ export default { ## importSuccess -The [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importsuccess) event triggers when annotations are imported successfully. +The [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#importsuccess) event triggers when annotations are imported successfully. -- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importSuccessEventArgs/). +- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importSuccessEventArgs). Example: @@ -2251,9 +2253,9 @@ export default { ## keyboardCustomCommands -The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#keyboardcustomcommands) event triggers when customized keyboard command keys are pressed. +The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#keyboardcustomcommands) event triggers when customized keyboard command keys are pressed. -- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/). +- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs). - name: Event name - keyboardCommand: The command metadata raised by Command Manager @@ -2372,7 +2374,7 @@ export default { ## moveSignature -The [moveSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#movesignature) event triggers when a signature is moved across the page. +The [moveSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#movesignature) event triggers when a signature is moved across the page. - Event arguments: `MoveSignatureEventArgs`. @@ -2453,9 +2455,9 @@ export default { ## pageChange -The [pageChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagechange) event triggers when the current page number changes (for example, via scrolling or navigation controls). +The [pageChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagechange) event triggers when the current page number changes (for example, via scrolling or navigation controls). -- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageChangeEventArgs/). +- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageChangeEventArgs). Example: @@ -2535,9 +2537,9 @@ export default { ## pageClick -The [pageClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageclick) event triggers when a mouse click occurs on a page. +The [pageClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pageclick) event triggers when a mouse click occurs on a page. -- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageClickEventArgs/). +- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageClickEventArgs). Example: @@ -2616,7 +2618,7 @@ export default { ## pageMouseover -The [pageMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagemouseover) event triggers when the mouse moves over a page. +The [pageMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagemouseover) event triggers when the mouse moves over a page. - Event arguments: PageMouseoverEventArgs. @@ -2697,7 +2699,7 @@ export default { ## pageOrganizerSaveAs -The [pageOrganizerSaveAs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageorganizersaveas) event triggers when a Save As action is performed in the page organizer. +The [pageOrganizerSaveAs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pageorganizersaveas) event triggers when a Save As action is performed in the page organizer. - Event arguments: `PageOrganizerSaveAsEventArgs`. @@ -2778,9 +2780,9 @@ export default { ## pageRenderComplete -The [pageRenderComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerendercomplete) event triggers after a page finishes rendering. +The [pageRenderComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagerendercomplete) event triggers after a page finishes rendering. -- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderCompleteEventArgs/). +- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderCompleteEventArgs). Example: @@ -2860,9 +2862,9 @@ export default { ## pageRenderInitiate -The [pageRenderInitiate](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerenderinitiate) event triggers when page rendering begins. +The [pageRenderInitiate](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#pagerenderinitiate) event triggers when page rendering begins. -- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderInitiateEventArgs/). +- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderInitiateEventArgs). Example: @@ -2941,9 +2943,9 @@ export default { ## printEnd -The [printEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printend) event triggers when a print action completes. +The [printEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printend) event triggers when a print action completes. -- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printEndEventArgs/). +- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printEndEventArgs). Example: @@ -3005,9 +3007,9 @@ export default { ## printStart -The [printStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printstart) event triggers when a print action is initiated. +The [printStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#printstart) event triggers when a print action is initiated. -- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printStartEventArgs/). +- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printStartEventArgs). Example: @@ -3069,9 +3071,9 @@ export default { ## removeSignature -The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#removesignature) event triggers when a signature is removed. +The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#removesignature) event triggers when a signature is removed. -- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/). +- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs). Example: @@ -3133,9 +3135,9 @@ export default { ## resizeSignature -The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resizesignature) event triggers when a signature is resized. +The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resizesignature) event triggers when a signature is resized. -- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/). +- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs). Example: @@ -3197,7 +3199,7 @@ export default { ## resourcesLoaded -The [resourcesLoaded](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resourcesLoaded) event triggers after the viewer's required resources are loaded. +The [resourcesLoaded](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#resourcesLoaded) event triggers after the viewer's required resources are loaded. - Event arguments: `void`. @@ -3261,9 +3263,9 @@ export default { ## signaturePropertiesChange -The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signaturepropertieschange) event triggers when signature properties change. +The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signaturepropertieschange) event triggers when signature properties change. -- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/). +- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs). Example: @@ -3326,9 +3328,9 @@ export default { ## signatureSelect -The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureselect) event triggers when a signature is selected. +The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureselect) event triggers when a signature is selected. -- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/). +- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs). Example: @@ -3390,9 +3392,9 @@ export default { ## signatureUnselect -The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureunselect) event triggers when a signature is unselected. +The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#signatureunselect) event triggers when a signature is unselected. -- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnselectEventArgs/). +- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnselectEventArgs). Example: @@ -3471,9 +3473,9 @@ export default { ## textSearchComplete -The [textSearchComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchcomplete) event triggers when a text search completes. +The [textSearchComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchcomplete) event triggers when a text search completes. -- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchCompleteEventArgs/). +- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchCompleteEventArgs). Example: @@ -3535,9 +3537,9 @@ export default { ## textSearchHighlight -The [textSearchHighlight](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchhighlight) event triggers when searched text is highlighted. +The [textSearchHighlight](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchhighlight) event triggers when searched text is highlighted. -- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchHighlightEventArgs/). +- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchHighlightEventArgs). Example: @@ -3616,9 +3618,9 @@ export default { ## textSearchStart -The [textSearchStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchstart) event triggers when a text search is initiated. +The [textSearchStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textsearchstart) event triggers when a text search is initiated. -- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchStartEventArgs/). +- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchStartEventArgs). Example: @@ -3697,9 +3699,9 @@ export default { ## textSelectionEnd -The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionend) event triggers when text selection is complete. +The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textselectionend) event triggers when text selection is complete. -- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSelectionEndEventArgs/). +- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSelectionEndEventArgs). Example: @@ -3761,7 +3763,7 @@ export default { ## textSelectionStart -The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionstart) event triggers when text selection is initiated. +The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#textselectionstart) event triggers when text selection is initiated. - Event arguments: `TextSelectionStartEventArgs`. @@ -3825,9 +3827,9 @@ export default { ## thumbnailClick -The [thumbnailClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#thumbnailclick) event triggers when a thumbnail is clicked. +The [thumbnailClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer#thumbnailclick) event triggers when a thumbnail is clicked. -- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/thumbnailClickEventArgs/). +- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/thumbnailClickEventArgs). Example: diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md index ee6a3741c..07c502c8f 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md @@ -10,26 +10,23 @@ domainurl: ##DomainURL## # Feature modules in Vue PDF viewer Control -The PDF Viewer features are provided as individual modules, allowing applications to include only what is needed. Inject the required modules to enable functionality, then configure the corresponding properties on the PDF Viewer instance. - -Available PDF Viewer modules: - -* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization): Built-in toolbar for user interaction. -* [**Magnification**](./magnification): Perform zoom operations for a better viewing experience. -* [**Navigation**](./interactive-pdf-navigation/page-navigation): Navigate across pages. -* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation): Navigate within the document or to external destinations via hyperlinks. -* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation): Navigate within the document using page thumbnails. -* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation): Navigate using document bookmarks (table of contents). -* [**TextSelection**](./textselection): Select and copy text from the document. -* [**TextSearch**](./text-search): Search for text across the document. -* [**Print**](./print): Print the entire document or specific pages directly from the browser. -* [**Annotation**](./annotations/text-markup-annotation): Add and edit annotations. -* [**FormFields**](./form-designer/create-programmatically): Work with form fields in the document. -* [**FormDesigner**](./form-designer/create-programmatically): Add or edit form fields in the document. - -> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance. - -Refer to the following table: +The [Vue PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk) exposes functionality as feature modules that can be imported selectively. Import and register only the modules required by an application to keep bundle sizes small and enable specific capabilities on demand. The following feature modules are available: + +* **Toolbar**: Built-in toolbar for user interaction. +* **Magnification**: Zoom and fit options for improved viewing. +* **Navigation**: Page navigation controls and page jump support. +* **LinkAnnotation**: Support for hyperlinks within and outside the PDF. +* **ThumbnailView**: Page thumbnails for rapid navigation within the document. +* **BookmarkView**: Navigation based on document bookmarks. +* **TextSelection**: Select and copy text from the PDF. +* **TextSearch**: Find text across the document. +* **Print**: Print the document or individual pages from the browser. +* **Annotation**: Create and edit annotations on the PDF. +* **FormFields**: Preserve and interact with form fields in the document. +* **FormDesigner**: Add and edit form fields in design mode. +* **StickyNotesAnnotation**: Add sticky notes to the PDF. + +N> In addition to registering the required modules, enable the corresponding component properties to activate each capability on a PDF Viewer instance. Refer to the following table for example attribute usage. | Module | Property to enable the functionality for a PDF Viewer instance | |---|---| diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md deleted file mode 100644 index d512ccd2c..000000000 --- a/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -layout: post -title: Form filling in Vue PDF Viewer | Syncfusion -description: Learn how to view, fill, export, and import PDF form fields using the Syncfusion Vue PDF Viewer, including disabling interaction and working with signatures. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Form filling in Vue PDF Viewer - -The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data. - -The PDF Viewer supports the following form field types: - -* Text box -* Password -* Check box -* Radio button -* List box -* Dropdown -* Signature field -* Initial field - -![Form filling in Vue PDF Viewer](./images/form-filling.png) - -## Disabling form fields - -The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - - - -{% endhighlight %} -{% endtabs %} - -## Add a handwritten signature to a signature field - -Add a handwritten signature to a signature field by following these steps: - -* Click the signature field in the PDF document to open the signature panel. - -![Signature field in Vue PDF Viewer](./images/form-filling-signature.png) - -* Draw the signature in the signature panel. - -![Signature panel in Vue PDF Viewer](./images/form-filling-signature-dialog.png) - -* Select **CREATE**. The drawn signature is added to the signature field. - -![Signature added in Vue PDF Viewer](./images/form-filling-signature-signed.png) - -## Delete a signature from a signature field - -Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. - -![Deleting a signature in Vue PDF Viewer](./images/form-filling-signature-del.png) - -## Export and import form fields - -The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported: - -* FDF -* XFDF -* JSON - -For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically#export-and-import-form-fields). - -## See also - -* [Handwritten signature in Vue PDF Viewer](./annotations/signature-annotation) -* [Form Designer events](./form-designer/form-field-events) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md index 001d789fd..396a74c8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-constrain.md @@ -218,20 +218,20 @@ export default { {% endhighlight %} {% endtabs %} -N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output. +N> Printing can be triggered programmatically using `pdfviewer.print()`. Form fields with `isPrint: false` are excluded from the printed output. ## Apply PDF Form Field Flags Using the UI **Steps** 1. Enable **Form Designer** mode in the PDF Viewer. 2. Select an existing form field on the PDF page. -3. The **Right click To open context menu - > Properties** popover is displayed. +3. Right-click the field and choose **Properties** from the context menu. 4. Configure the required constraint options. -5. Click “Ok” and Close the properties popover to apply the changes. +5. Click OK to apply the changes and close the properties popover. Changes are reflected immediately in the viewer. -[Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif) +![Applying form field flags using the UI](../../javascript-es6/images/formfields-flag.gif) ## Apply PDF Form Field Flags Programmatically diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md index 1b8f0beb3..67a0ea84a 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Form Designer in Vue PDF Viewer -When **Form Designer mode** is enabled in the Syncfusion [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields. +When **Form Designer mode** is enabled in the Syncfusion [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) is displayed. This UI includes a built-in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields. Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer. @@ -45,7 +45,7 @@ Designed form fields can be saved into the PDF document and printed with their a ## Enable Form Designer -To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar. +To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the `enableFormDesigner` property or API to enable or disable the Form Designer option in the main toolbar (set to `true` to enable). Note: the standalone examples below show `enableFormDesigner` set to `false`; change this to `true` to enable form design in those samples. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -91,7 +91,7 @@ export default { ## Form Designer UI -When [Form Designer mode](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) is enabled in the PDF Viewer, a default Form Designer user interface (UI) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. +When [Form Designer mode](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) is displayed. This UI provides a built-in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) @@ -116,17 +116,17 @@ Each toolbar item allows users to place the corresponding form field by selectin ![Adding Text Box](../../javascript-es6/images/AddTextBox.gif) -Use the Vue example above to enable the Form Designer (see the Composition API sample). +Use the above code snippet to show or hide the Form Designer by injecting the Form Designer module. (see the Composition API sample). For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields). ## Show or Hide the Built-in Form Designer Toolbar -You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. +You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows the application to display or hide the Form Designer tools in the PDF Viewer based on user or workflow requirements. -**Use this method to:** +**Use this property to:** - Show the Form Designer toolbar when form design is required -- Hide the toolbar to provide cleaner viewing experience +- Hide the toolbar to provide a cleaner viewing experience {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -244,10 +244,10 @@ You can move, resize, and edit an existing form field directly in the PDF Viewer - Resize a field using the handles displayed on the field boundary. -![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) +![Moving and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) -- Edit a field by selecting it to open the Form Field Properties popover. The popover allows you to modify the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed. -For more information, see Editing Form Fields +- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed. +For more information, see Editing Form Fields. ## Deleting Form Fields @@ -263,7 +263,7 @@ For more information, see [Deleting Form Fields](./manage-form-fields/remove-fo - [Filling PDF Forms](./form-filling) - [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields - [Grouping form fields](./group-form-fields) -- [Form Constrains](./form-constrain) +- [Form Constraints](./form-constrain) - [Form Validation](./form-validation) - [Custom Data](./custom-data) - [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md index 65a5d077e..713915881 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md @@ -46,7 +46,7 @@ Form field events can be used to: ## Handle PDF Form Field Events -You can wire up form field events on the PDF Viewer component to execute custom logic when specific actions occur. The following Vue Composition API example demonstrates wiring up the events and handling validation. +Form field events can be wired on the PDF Viewer instance to execute custom logic when specific actions occur. The following Vue Composition API example demonstrates wiring up the events and handling validation. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md index 2c48d451a..6e65bd94e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-fields-api.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Form Fields API in Vue PDF Viewer -The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available: +The Vue PDF Viewer provides APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available: | API | Description | |---|---| @@ -561,8 +561,7 @@ export default { ## isFormDesignerToolbarVisible -Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially -and get the form designer Toolbar Visible status. +Opens the Form Designer toolbar and returns its visibility status. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md index 0e33b0d5d..fa5f5d0d8 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md @@ -10,23 +10,23 @@ domainurl: ##DomainURL## # Filling PDF Forms in Vue PDF Viewer -The Syncfusion PDF Viewer supports three types of form-filling: +The Syncfusion PDF Viewer supports three form-filling approaches: 1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically) - You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) APIs. This approach is useful when form data needs to be set dynamically based on application logic. + Form fields can be filled or updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This approach is useful when form data must be set dynamically by application logic. 2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface) - Users can fill in PDF form fields directly through the PDF Viewer user interface by typing text, selecting options, or interacting with supported form elements. + End users can fill PDF form fields directly through the PDF Viewer interface by typing text, selecting options, or interacting with supported form elements. 3. [Importing Form Field Data](#fill-pdf-forms-through-import-data) - The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources. + The PDF Viewer can import form field data into an existing PDF document to prefill fields from external data sources. ## Fill PDF forms programmatically -You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction. +Form field values can be updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows applications to set or modify form field values dynamically without end-user interaction. The following example demonstrates how to update PDF form field values programmatically: @@ -86,19 +86,19 @@ export default { ## Fill PDF forms through the User Interface -The Syncfusion PDF Viewer allows users to fill PDF form fields directly through the user interface without using code. Users can click on form fields and enter or select values based on the field type. +The PDF Viewer enables end users to complete form fields directly in the interface without code. Fields accept input appropriate to their type. ![Form Filling](../../javascript-es6/images/FormFields.gif) -The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session. +The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Entered values remain editable during the viewing session. {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} ## Fill PDF forms through Import Data -The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input. +The PDF Viewer can import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) API. This enables prefilling fields from external data sources without manual entry. -Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required. +Imported data is mapped to PDF form fields by field name. The imported values appear in the viewer and remain editable if the document permits modification. Refer to Import Form Data for details about expected data formats and mapping rules. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -152,16 +152,17 @@ For more details, see [Import Form Data](./import-export-form-fields/import-form ## How to get the filled data and store it to a backing system -You can export the filled form field data from the PDF Viewer and store it in a backing system such as a database or file storage. The exported data can later be imported to restore the form state. +Filled form field data can be exported from the PDF Viewer and stored in a backing system such as a database or file storage. Exported data can be re-imported later to restore form state. See Export Form Data for supported export formats and recommended persistence patterns. For more details, see [Export Form Data](./import-export-form-fields/export-form-fields). ## How to Validate Form Fields using `validateFormFields` Event -The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields) API to get all the form fields and check them one by one to see if any form fields values are empty. +The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event fires when a download or submit action is attempted while validation is enabled. The [retrieveFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields) API returns all form fields so the application can validate values before proceeding. -This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen. -By enabling [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and wiring the event, you can go through each field and stop the action if required fields are not filled. +Validation applies to all field types: a textbox is considered empty if it contains no text; a list box or dropdown is empty when no item is selected; a signature or initial field is empty if no signature exists; and radio buttons or checkboxes are empty when none are chosen. + +Enable [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and handle the event to cancel submit/download actions when required fields are missing. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md index 4b3f1bc41..efaa25c00 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-validation.md @@ -9,22 +9,21 @@ documentation: ug # Validate PDF Form Fields in Vue PDF Viewer -The Syncfusion **Vue PDF Viewer** provides built in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are filled before allowing these actions to complete. -This feature helps enforce data completeness and improves the reliability of collected form data. +The Syncfusion **Vue PDF Viewer** provides built-in support for **validating form fields** before end users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are completed before allowing these actions to proceed. ## How PDF Form Validation Works Form field validation follows this flow: - Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property. - Handle the [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled. -- When validation is enabled and a user attempts to print, download, or submit the document: - - The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event is triggered. - - Unfilled required fields are listed in args.nonFillableFields. - - You can cancel the action, show an error message, or move focus to an invalid field. + - When validation is enabled and an end user attempts to print, download, or submit the document: + - The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event is triggered. + - Unfilled required fields are listed in `args.nonFillableFields`. + - The application can cancel the action, display an error message, or move focus to an invalid field. ## Enable PDF Form Field Validation -To enable validation, set the [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to true and wire the validateFormFields event. +Enable validation by setting the [enableFormFieldsValidation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) property to `true` and handling the `validateFormFields` event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -111,7 +110,7 @@ export default { ## Mark Fields as Required -Only fields marked as **required** participate in validation. Use the **isRequired** property when creating or updating a form field. +Only fields marked as **required** participate in validation. Use the `isRequired` property when creating or updating a form field. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -128,9 +127,9 @@ pdfviewer.formDesignerModule.addFormField('Textbox', { ## Handle PDF Form Validation Results -In the [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event, you can control the behavior when fields are missing. Typical actions include: +In the [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#validateformfields) event, the application can control the behavior when fields are missing. Typical actions include: - Cancel the print or download operation -- Display an error message to the user +- Display an error message to the end user - Set focus to the first unfilled required field {% tabs %} @@ -140,7 +139,7 @@ const pdfviewer = this.$refs.pdfviewer.ej2Instances; pdfviewer.enableFormFieldsValidation = true; pdfviewer.validateFormFields = (args) => { if (args && args.formField && args.formField.length > 0) { - // Example: prevent the pending action and notify the user + // Example: prevent the pending action and notify the end user args.cancel = true; alert('Please fill all required fields. Missing: ' + args.formField[0].name); // Optionally focus or scroll to the field @@ -151,7 +150,7 @@ pdfviewer.validateFormFields = (args) => { ## Tips -- Use isRequired to clearly mark mandatory fields. +- Use `isRequired` to clearly mark mandatory fields. - Validation is triggered only during [print](../print), [download](../download), or **submit** actions. - For custom validation logic (such as validating an email format): - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#retrieveformfields). diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md index 9df451860..689677a8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/group-form-fields.md @@ -9,7 +9,7 @@ documentation: ug # Group form fields in Vue PDF Viewer -The Syncfusion **Vue PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. You can group form fields using the **Form Designer UI** or **programmatically using APIs**, making it easy to keep related fields synchronized across the PDF document. +The Syncfusion **Vue PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. Group form fields using the **Form Designer UI** or programmatically via APIs to keep related fields synchronized across a PDF document. This page covers: - [How form field grouping works](#how-grouping-works) @@ -21,7 +21,7 @@ This page covers: ## How grouping works -In a PDF form, multiple PDF Form Fields can represent the same logical form field. When PDF Form Fields share the same **Name**, they are treated as a group and stay synchronized. +In a PDF form, multiple PDF form fields can represent the same logical field. When PDF form fields share the same **Name**, they are treated as a group and stay synchronized. ## Field behavior by type @@ -31,7 +31,7 @@ In a PDF form, multiple PDF Form Fields can represent the same logical form fiel - **ListBox and DropDown** — The selected value is shared across widgets with the same Name. - **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets. -N>Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location. +N> Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location. ## Group using the Form Designer UI @@ -39,7 +39,7 @@ N>Form field grouping is controlled by the **Name** property. The position of ea 1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar). 2. Add the form fields you want to group. 3. Select a form field, open **Properties**, and set the **Name** value. -4. Assign the same **Name** to all PDF Form Field that belong to the group. +4. Assign the same **Name** to all PDF form fields that belong to the group. 5. Apply the changes and verify that updates in one widget reflect in the others. ![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md index 6cefadaf3..9c92ef76e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview-create-forms.md @@ -9,10 +9,9 @@ documentation: ug # Create, Edit, Style, and Remove Form Fields in Vue PDF Viewer -The [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed. -All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer.html) or [Vue APIs.](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/overview) +The [Vue PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/overview) enables the creation, editing, styling, and removal of interactive PDF form fields. These operations are available through the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/form-designer) or programmatically via the Vue APIs. -This section explains how to: +This section links to step-by-step guidance for each operation: - [Create PDF form fields](./manage-form-fields/create-form-fields) - [Edit form field behavior and values](./manage-form-fields/modify-form-fields) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md index 9099b8ede..3c00d44fa 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/overview.md @@ -9,17 +9,17 @@ documentation: ug # Overview of Forms in Vue PDF Viewer -The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. You can read, fill, add, edit, and delete form fields directly within your PDF documents. These actions are supported through both the intuitive user interface and powerful programmatic APIs. +The Syncfusion PDF Viewer provides a full-featured PDF forms experience for Vue applications. Users can read, fill, add, edit, and remove form fields in PDF documents using the viewer's UI or programmatic APIs. -The viewer also includes smooth import and export support for form data, making integration effortless. Developers benefit from extensive API control, while end users enjoy a clean and simple interface designed for a seamless and stress-free form-filling experience. +Flexible import and export of form data simplifies integration in automated workflows or user-driven scenarios. APIs offer developers control over form behavior while the viewer presents a concise, accessible interface for end users. ## Filling PDF Forms -Experience effortless PDF form filling through a clean, intuitive UI or automated workflows using powerful APIs. Flexible form data import and export support ensures smooth and efficient operations when working with PDF forms. +Use the viewer UI or APIs to fill PDF forms, import/export form data, or integrate automated form workflows. See the [Filling PDF Forms](./form-filling) page for full details. -Use the following code-snippet to enable form-filling by injecting `FormFields` Module. +Use the following code-snippet to enable form-filling by injecting the `FormFields` module. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -87,7 +87,7 @@ export default { ## Form Designer -A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools. +A built-in Form Designer enables creating, positioning, and editing form fields directly on the PDF page. Use the built-in designer tools for common tasks or extend them to build a customized form-design workflow. See the [Form Designer](./form-designer) page for full details. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md index f62429649..ae4f9a5b4 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md @@ -10,11 +10,13 @@ domainurl: ##DomainURL## # Getting started with Syncfusion PDF Viewer in Vue 3 -This guide explains how to create a Vue 3 application with Vite and integrate the Syncfusion® Vue PDF Viewer component.using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api). +This guide demonstrates how to create a Vue 3 application with Vite and integrate the Syncfusion® Vue PDF Viewer component using either the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) or [Options API](https://vuejs.org/guide/introduction.html#options-api). -The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior. +## API Approaches -The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more. +**Composition API** – A modern approach to organizing component logic by composing smaller, reusable functions. This method offers better code organization and reusability for complex components. + +**Options API** – The traditional Vue approach that organizes component logic into a series of options (data, methods, computed properties, watchers, lifecycle hooks, etc.). ## Prerequisites @@ -23,7 +25,7 @@ Install Node.js (version 18 or later recommended) along with npm or Yarn before ## Set up the Vite project -A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). Run one of the following commands to create a new project. +Use [Vite](https://vitejs.dev/) to quickly scaffold a Vue 3 project. Run one of the following commands to create a new project: ```bash npm create vite@latest @@ -66,7 +68,7 @@ Vanilla Nuxt ↗ ``` -4. After the scaffold completes, install the dependencies for `my-project`: +4. After the scaffold completes, install the project dependencies: ```bash cd my-project @@ -80,16 +82,12 @@ cd my-project yarn install ``` -With the scaffold ready, add the Syncfusion Vue PDF Viewer component to the project. - ## Add Syncfusion® Vue packages -Syncfusion Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). Install the Vue PDF Viewer package with one of the following commands. - -This tutorial uses the [Vue PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk). Install the `@syncfusion/ej2-vue-pdfviewer` package with the following command: +Install the `@syncfusion/ej2-vue-pdfviewer` package using npm or Yarn. This package includes the PDF Viewer component and all required dependencies: ```bash - npm install @syncfusion/ej2-vue-pdfviewer --save +npm install @syncfusion/ej2-vue-pdfviewer --save ``` or @@ -100,9 +98,9 @@ yarn add @syncfusion/ej2-vue-pdfviewer ## Import Syncfusion® CSS styles -You can import themes for the Syncfusion Vue components by using CSS or SASS assets from npm packages, a CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to the [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for details about built-in themes and additional options for referencing them in a Vue project. +Import the required theme CSS for the PDF Viewer component. Syncfusion offers multiple theme options (Material, Bootstrap, Fabric, Tailwind, etc.) available from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). For full details, see the [themes documentation](https://ej2.syncfusion.com/vue/documentation/appearance/theme). -This tutorial applies the Material theme by importing the required CSS from the installed packages into the `