From 88c70bf303f4a06a22e6fe8d36f4f9a84861eaeb Mon Sep 17 00:00:00 2001 From: Balaji Loganathan Date: Thu, 12 Feb 2026 20:56:58 +0530 Subject: [PATCH 1/3] 1009416: UG Revamp for Vue --- .../PDF-Viewer/vue/Redaction/mobile-view.md | 17 ++-- .../PDF/PDF-Viewer/vue/Redaction/overview.md | 22 +++--- .../vue/Redaction/programmatic-support.md | 8 +- .../PDF-Viewer/vue/Redaction/search-redact.md | 13 ++-- .../PDF/PDF-Viewer/vue/Redaction/toolbar.md | 10 +-- .../vue/Redaction/ui-interaction.md | 20 ++--- .../vue/annotation/annotation-event.md | 78 ++++++++++--------- .../annotation/annotations-in-mobile-view.md | 48 ++++++------ .../PDF/PDF-Viewer/vue/annotation/comments.md | 2 + .../vue/annotation/free-text-annotation.md | 48 ++++++------ .../vue/annotation/ink-annotation.md | 4 +- .../vue/annotation/line-angle-constraints.md | 58 +++++++------- .../vue/annotation/measurement-annotation.md | 28 +++---- .../vue/annotation/shape-annotation.md | 15 ++-- .../vue/annotation/signature-annotation.md | 18 +++-- .../vue/annotation/stamp-annotation.md | 22 +++--- .../vue/annotation/sticky-notes-annotation.md | 32 ++++---- .../vue/annotation/text-markup-annotation.md | 56 ++++++------- .../PDF-Viewer/vue/forms/form-constrain.md | 8 +- .../PDF/PDF-Viewer/vue/forms/form-designer.md | 22 +++--- .../PDF-Viewer/vue/forms/form-field-events.md | 2 +- .../PDF-Viewer/vue/forms/form-fields-api.md | 5 +- .../PDF/PDF-Viewer/vue/forms/form-filling.md | 27 +++---- .../PDF-Viewer/vue/forms/form-validation.md | 23 +++--- .../PDF-Viewer/vue/forms/group-form-fields.md | 8 +- .../vue/forms/overview-create-forms.md | 5 +- .../PDF/PDF-Viewer/vue/forms/overview.md | 10 +-- .../how-to/add-annotation-in-text-search.md | 6 +- .../PDF-Viewer/vue/how-to/add-header-value.md | 4 +- .../vue/how-to/annotation-selectors.md | 4 +- .../vue/how-to/authorization-token.md | 2 +- ...e-author-name-using-annotation-settings.md | 2 +- .../configure-annotation-selector-setting.md | 4 +- .../PDF/PDF-Viewer/vue/how-to/conformance.md | 2 +- .../how-to/control-annotation-visibility.md | 14 ++-- ...pdf-library-bounds-to-pdf-viewer-bounds.md | 4 +- .../vue/how-to/custom-context-menu.md | 8 +- .../vue/how-to/custom-font-signature-field.md | 6 +- .../PDF/PDF-Viewer/vue/how-to/custom-fonts.md | 8 +- .../vue/how-to/delete-annotation.md | 8 +- .../vue/how-to/download-start-event.md | 8 +- .../vue/how-to/enable-local-storage.md | 18 ++--- .../vue/how-to/enable-text-selection.md | 8 +- .../PDF-Viewer/vue/how-to/export-as-image.md | 22 ++++-- .../vue/how-to/extract-text-completed.md | 4 +- .../vue/how-to/extract-text-option.md | 15 ++-- .../PDF/PDF-Viewer/vue/how-to/extract-text.md | 30 +++---- .../PDF-Viewer/vue/how-to/find-text-async.md | 6 +- .../PDF/PDF-Viewer/vue/how-to/get-base64.md | 16 ++-- .../PDF/PDF-Viewer/vue/how-to/getPageInfo.md | 8 +- .../vue/how-to/import-export-annotation.md | 6 +- .../load-document-after-resources-loaded.md | 8 +- .../PDF-Viewer/vue/how-to/load-documents.md | 10 +-- .../vue/how-to/load-n-number-page.md | 8 +- .../PDF/PDF-Viewer/vue/how-to/min-max-zoom.md | 8 +- .../PDF-Viewer/vue/how-to/open-bookmark.md | 10 +-- .../PDF-Viewer/vue/how-to/open-thumbnail.md | 10 +-- .../pagerenderstarted-pagerendercompleted.md | 13 +--- ...lve-unable-to-find-an-entry-point-error.md | 14 ++-- .../how-to/restricting-zoom-in-mobile-mode.md | 4 +- .../PDF-Viewer/vue/how-to/retry-timeout.md | 14 ++-- .../vue/how-to/show-custom-stamp-item.md | 10 +-- .../vue/how-to/show-hide-annotation.md | 12 +-- .../signatureselect-signatureunselect.md | 12 +-- .../PDF-Viewer/vue/how-to/unload-document.md | 4 +- .../vue/how-to/webservice-not-listening.md | 2 +- .../interactive-pdf-navigation/bookmark.md | 13 +++- .../interactive-pdf-navigation/hyperlink.md | 8 +- .../page-thumbnail.md | 6 +- .../vue/interactive-pdf-navigation/page.md | 20 ++--- .../vue/open-pdf-file/from-amazon-s3.md | 12 +-- .../from-azure-active-directory.md | 57 ++++++-------- .../open-pdf-file/from-azure-blob-storage.md | 10 +-- .../from-box-cloud-file-storage.md | 10 +-- .../from-dropbox-cloud-file-storage.md | 12 +-- .../from-google-cloud-storage.md | 10 +-- .../vue/open-pdf-file/from-google-drive.md | 16 ++-- .../vue/open-pdf-file/from-one-drive.md | 8 +- .../PDF-Viewer/vue/organize-pages/events.md | 8 +- .../vue/organize-pages/extract-pages.md | 5 +- .../vue/organize-pages/mobile-view.md | 6 +- .../organize-pages/organize-pdf-overview.md | 10 +-- .../PDF-Viewer/vue/organize-pages/overview.md | 10 +-- .../organize-pages/programmatic-support.md | 12 +-- .../PDF-Viewer/vue/organize-pages/toolbar.md | 10 +-- .../vue/organize-pages/ui-interactions.md | 72 ++++++++--------- .../vue/save-pdf-file/to-amazon-s3.md | 16 ++-- .../to-azure-active-directory.md | 12 +-- .../save-pdf-file/to-azure-blob-storage.md | 18 ++--- .../to-box-cloud-file-storage.md | 10 +-- .../to-dropbox-cloud-file-storage.md | 26 +++---- .../save-pdf-file/to-google-cloud-storage.md | 27 +++---- .../vue/save-pdf-file/to-google-drive.md | 18 ++--- .../vue/save-pdf-file/to-one-drive.md | 32 ++++---- .../annotation-toolbar.md | 2 +- .../toolbar-customization/custom-toolbar.md | 5 +- .../form-designer-toolbar.md | 15 ++-- .../toolbar-customization/mobile-toolbar.md | 23 +++--- .../toolbar-customization/primary-toolbar.md | 6 +- .../document-loading-issues.md | 18 ++--- 100 files changed, 753 insertions(+), 751 deletions(-) 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..724abea86 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/Redaction/ui-interaction.md @@ -7,7 +7,7 @@ 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/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md index b20dc92e0..355a39d47 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md @@ -8,34 +8,36 @@ 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 @@ -114,7 +116,7 @@ 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 @@ -191,7 +193,7 @@ 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 @@ -268,7 +270,7 @@ 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 @@ -345,7 +347,7 @@ 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 @@ -422,7 +424,7 @@ 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 @@ -499,7 +501,7 @@ 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 @@ -578,7 +580,7 @@ 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 @@ -655,7 +657,7 @@ 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 @@ -732,7 +734,7 @@ 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 @@ -809,7 +811,7 @@ 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 @@ -886,7 +888,7 @@ 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 @@ -969,7 +971,7 @@ 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 @@ -1046,7 +1048,7 @@ 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 @@ -1123,7 +1125,7 @@ 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 @@ -1200,7 +1202,7 @@ 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 @@ -1277,7 +1279,7 @@ 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 @@ -1354,7 +1356,7 @@ 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 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 f59d255dd..d1b51c110 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) @@ -190,9 +190,7 @@ export default { ## Add a free text annotation programmatically to the PDF document -The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding a free text annotation programmatically using addAnnotation(): +Add a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. The example below demonstrates adding a FreeText annotation with styling and position properties. {% tabs %} {% highlight html tabtitle="Composition API (Standalone)" %} @@ -599,61 +597,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 69f40b7d3..c2039faab 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md @@ -195,7 +195,7 @@ export default { ## Add an Ink annotation programmatically to the PDF document Programmatically -The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Here is an example of adding an ink annotation programmatically using addAnnotation(): @@ -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 a0b2270e5..270fa6982 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 8e10ab0d1..cac1d8c47 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. @@ -208,7 +208,7 @@ export default { ## Adding a Stamp annotation to the PDF document Programmatically -With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically: @@ -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 f3d34f2a4..c1b45d9a0 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) +![* The sticky note annotation appears at the selected position.](../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. +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 e948d0f4f..a9f7da868 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. @@ -395,7 +395,7 @@ export default { ## Highlight text programmatically -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add highlights using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Example: @@ -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. @@ -942,7 +942,7 @@ export default { ## Underline a text programmatically -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add underlines using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation#addannotation) method. Example: @@ -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. @@ -1491,7 +1491,7 @@ export default { ## Strikethrough text programmatically -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method. Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically: @@ -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. @@ -2042,7 +2042,7 @@ export default { ## Squiggly a text programmatically -The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method. +Refer to the following code snippet to switch back to normal mode from squiggly mode. Use the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) API to add squiggly annotations. Here's an example of how you can use the **addAnnotation()** method to apply Squiggly programmatically: @@ -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/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/how-to/add-annotation-in-text-search.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-annotation-in-text-search.md index 547d3ff6e..533e8fe03 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-annotation-in-text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-annotation-in-text-search.md @@ -12,13 +12,13 @@ domainurl: ##DomainURL## ## Overview -A concise guide to adding rectangle annotations at highlighted text search results in the Vue PDF Viewer to visually emphasize matches and improve readability. +A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the Vue PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps. ## Steps to add rectangle annotations on search result highlight **Step 1:** Follow the steps provided in the [Vue PDF Viewer Getting Started documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF Viewer sample. -**Step 2:** Initialize the PDF Viewer with the required modules +**Step 2:** Set up the PDF Viewer component to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. {% tabs %} {% highlight html tabtitle="Standalone" %} @@ -121,6 +121,6 @@ export default { {% endhighlight %} {% endtabs %} -Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, improving the visibility of matches. +Following this guide enables the PDF Viewer to add rectangle annotations at text search result locations, improving visibility for users navigating search matches. [View Sample on GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-header-value.md index c0e1a5a9a..18ff9f4ad 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/how-to/add-header-value.md @@ -9,9 +9,9 @@ documentation: ug # Add header values in the Vue PDF Viewer -Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request. +Use the `ajaxHeaders` property inside the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#ajaxrequestsettings) to send custom HTTP headers with each request made by the viewer. -Example: Add a custom Authorization header using ajaxRequestSettings +Example: Add a custom Authorization header using `ajaxRequestSettings` in an Vue component ```html