- Create PDF Viewer Service in ASPNET MVC
- Create PDF Viewer Service in ASPNET Core diff --git a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md index e5af01533..b16ada99e 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/accessibility.md @@ -1,18 +1,18 @@ --- layout: post -title: Accessibility in Vue PDF Viewer component | Syncfusion -description: Learn here all about accessibility in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Accessibility in Vue PDF Viewer | Syncfusion +description: Learn about accessibility in the Syncfusion Vue PDF Viewer, including compliance with WCAG 2.2, Section 508, ADA standards, and keyboard navigation support. control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Accessibility in Syncfusion® Vue PDF Viewer components +# Accessibility in Syncfusion Vue PDF Viewer The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the PDF Viewer component is outlined below. +The accessibility compliance for the PDF Viewer component is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -38,29 +38,31 @@ The accessibility compliance for the PDF Viewer component is outlined below.
- The component does not meet the requirement.
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### annotationDoubleClick
+
+The [annotationDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/) event is triggered when an annotation is double-clicked.
+
+#### Event Arguments
+
+For event data, see [AnnotationDoubleClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationDoubleClickEventArgs/).
+
+The following example illustrates how to handle the `annotationDoubleClick` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationMouseLeaveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseLeaveEventArgs/).
+
+The following example illustrates how to handle the `annotationMouseLeave` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### annotationMouseover
+
+The [annotationMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/) event is triggered when the mouse is moved over an annotation object.
+
+#### Event Arguments
+
+For event data, see [AnnotationMouseOverEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMouseOverEventArgs/).
+
+The following example illustrates how to handle the `annotationMouseover` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationMoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMoveEventArgs/).
+
+The following example illustrates how to handle the `annotationMove` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### annotationMoving
+
+The [annotationMoving](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/) event is triggered while an annotation is being moved.
+
+#### Event Arguments
+
+For event data, see [AnnotationMovingEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationMovingEventArgs/).
+
+The following example illustrates how to handle the `annotationMoving` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationPropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationPropertiesChangeEventArgs/). It provides properties such as `annotationId`, `pageNumber`, and `action`.
+
+The following example illustrates how to handle the `annotationPropertiesChange` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationRemoveEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationRemoveEventArgs/). It provides properties such as `annotationId` and `pageNumber`.
+
+The following example illustrates how to handle the `annotationRemove` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationResizeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationResizeEventArgs/).
+
+The following example illustrates how to handle the `annotationResize` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationSelectEventArgs/).
+
+The following example illustrates how to handle the `annotationSelect` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AnnotationUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotationUnSelectEventArgs/).
+
+The following example illustrates how to handle the `annotationUnselect` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### beforeAddFreeText
+
+The [beforeAddFreeText](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/) event is triggered before adding a text in the freeText annotation.
+
+#### Event Arguments
+
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+
+The following example illustrates how to handle the `beforeAddFreeText` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Signature-related events
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `addSignature` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `removeSignature` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+
+The following example illustrates how to handle the `resizeSignature` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+
+The following example illustrates how to handle the `signaturePropertiesChange` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureSelect` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+### 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.
+
+#### Event Arguments
+
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureUnselect` event.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
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
new file mode 100644
index 000000000..75875a422
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md
@@ -0,0 +1,122 @@
+---
+layout: post
+title: Annotations in mobile view in Vue PDF Viewer component | Syncfusion
+description: Learn how to use annotations in mobile view with the Syncfusion Vue PDF Viewer control (Essential JS 2).
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+# Annotations in mobile view in Vue PDF Viewer control
+
+## Open the annotation toolbar
+
+**Step 1:** Tap Edit Annotation on the toolbar to enable the annotation toolbar.
+
+
+
+**Step 2:** The annotation toolbar appears below the main toolbar.
+
+
+
+## Add sticky note annotations
+
+**Step 1:** Tap the Sticky Notes icon, then tap the page where the note should be placed.
+
+
+
+**Step 2:** Tap the page to add the sticky note annotation.
+
+
+
+## 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 2:** The text markup annotation is applied to the selected text.
+
+
+
+## Add shape and measurement annotations
+
+**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar.
+
+
+
+**Step 2:** Choose a shape or measurement type, then draw it on the page.
+
+
+
+**Step 3:** The annotation appears on the PDF page.
+
+
+
+## Add stamp annotations
+
+**Step 1:** Tap the Stamp icon and select a stamp type from the menu.
+
+
+
+**Step 2:** Tap the page to place the stamp annotation.
+
+
+
+## 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 2:** The signature is added to the page.
+
+
+
+## Add ink annotations
+
+**Step 1:** Tap the Ink tool and draw on the page.
+
+
+
+**Step 2:** The ink annotation appears on the page.
+
+
+
+## Change annotation properties (before adding)
+
+**Step 1:** Change properties before placing the annotation.
+
+**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page.
+
+
+
+## Change annotation properties (after adding)
+
+**Step 1:** Change annotation properties after adding the annotation.
+
+**Step 2:** Select the annotation to show the property toolbar, then adjust the properties.
+
+
+
+## Delete annotations
+
+**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it.
+
+
+
+## Open the comment panel
+
+**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar.
+
+
+
+**Step 2:** The comment panel appears.
+
+
+
+## Close the comment panel
+
+**Step 1:** Tap the Close button to close the comment panel.
+
+
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
index fc224fce0..c090a66a9 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Comments in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Comments in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Comments in Vue PDF Viewer component | Syncfusion
+description: Learn about comments, replies, and status in the Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
control: Comments
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Comments in Vue Pdfviewer component
+# Comments in Vue PDF Viewer control
-The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
* Shape annotation
* Stamp annotation
@@ -20,11 +20,11 @@ The PDF Viewer control provides options to add, edit, and delete the comments to
* Free text annotation
* Ink annotation
-
+
## Adding a comment to the annotation
-Annotation comment, comment replies, and status can be added to the PDF document using the comment panel.
+Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
### Comment panel
@@ -33,78 +33,146 @@ Annotation comments can be added to the PDF using the comment panel. The comment
1. Using the annotation menu
* Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. A comment panel will appear.
+ * Click the Comment Panel button. The comment panel opens.
2. Using Context menu
- * Select annotation in the PDF document and right-click it.
- * Select the comment option in the context menu that appears.
+ * Select the annotation in the PDF document and right-click it.
+ * Select Comment from the context menu.
3. Using the Mouse click
- * Select annotation in the PDF document and double click it, a comment panel will appear.
+ * Select the annotation in the PDF document and double-click it. The comment panel opens.
-If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel.
+If the comment panel is already open, select the annotation and add comments using the panel.
### Adding comments
-* Select annotation in the PDF document and click it.
-* The selected annotation comment container is highlighted in the comment panel.
-* Now, you can add comment and comment replies using the comment panel.
+* Select the annotation in the PDF document.
+* The corresponding comment thread is highlighted in the comment panel.
+* Add comments and replies using the comment panel.
-
+
### Adding Comment Replies
-* The PDF Viewer control provides an option to add multiple replies to the comment.
-* After adding the annotation comment, you can add a reply to the comment.
+* Multiple replies can be added to a comment.
+* After adding a comment, add replies as needed.
### Adding Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
-
+
### Editing the comments and comments replies of the annotations
-The comment, comment replies, and status of the annotation can be edited using the comment panel.
+Comments, replies, and status can be edited using the comment panel.
### Editing the Comment or Comment Replies
-The annotation comment and comment replies can be edited in the following ways:
+Edit comments and replies in the following ways:
1. Using the Context menu
- * Select the Annotation Comments in the comment panel.
- * Click the More options button showing in the Comments or reply container.
- * Select the Edit option in the context menu that appears.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Click More options in the comment or reply container.
+ * Select Edit from the context menu.
+ * An editable text box appears. Change the content of the comment or reply.
2. Using the Mouse Click
- * Select the annotation comments in the comment panel.
- * Double click the comment or comment reply content.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Double-click the comment or reply content.
+ * An editable text box appears. Change the content of the comment or reply.
### Editing Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
-* Status ‘None’ is the default state. If the status is set to ‘None,’ the comments or reply does not appear.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
+* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible.
-
+
### Delete Comment or Comment Replies
-* Select the Annotation Comments in the comment panel.
-* Click the more options button shown in the Comments or reply container.
-* Select the Delete option in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Delete from the context menu.
+## How to check the comments added by the user
+
+Comments added to the PDF document can be read using the annotation's `comments` property.
+
+The following example logs comments in response to a button click.
+
+{% tabs %}
+{% highlight html tabtitle="Standalone" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Server-Backed" %}
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
>The annotation will be deleted on deleting the comment using comment panel.
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 9b76eac5e..f59d255dd 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
@@ -1,30 +1,30 @@
---
layout: post
-title: Free text annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Free text annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Free text annotation in Vue PDF viewer component | Syncfusion
+description: Learn about free text annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
control: Free text annotation
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Free text annotation in Vue Pdfviewer component
+# Free text annotation in Vue PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the free text annotations.
+The PDF Viewer control provides options to add, edit, and delete free text annotations.
-## Adding a free text annotation to the PDF document
+## Add a free text annotation to the PDF document
-The Free text annotations can be added to the PDF document using the annotation toolbar.
+Free text 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.
-* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode.
-* You can add the text over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Free Text Annotation** button to enable free text annotation mode.
+* Add text anywhere on the pages of the PDF document.
-In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode.
-
+
-Refer to the following code sample to switch to the Free Text annotation mode.
+The following example switches to free text annotation mode using a button click.
{% tabs %}
@@ -48,7 +48,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -89,7 +89,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -188,11 +188,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding a free text annotation programmatically to the PDF document
+## Add a free text annotation programmatically to the PDF document
-The PDF Viewer library allows you to add the free text annotation in 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 free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#annotation) method.
-Here is an example of how you can use the **addAnnotation()** method to move the free text annotation programmatically:
+Here is an example of adding a free text annotation programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -216,7 +216,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -268,7 +268,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -406,11 +406,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Change the content of an existing Free text annotation programmatically
+## Change the content of an existing free text annotation programmatically
-To change the content of an existing free text annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To change the content of an existing free text annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
+Here is an example of changing the content of a free text annotation using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -434,7 +434,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -480,7 +480,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -597,69 +597,71 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of free text annotation
+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.
-The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+## Edit the properties of free text annotations
-### Editing font family
+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.
-The font family of the annotation can be edited by selecting the desired font in the Font Family tool.
+### Edit font family
-
+Edit the font family by selecting a font in the Font Family tool.
-### Editing font size
+
-The font size of the annotation can be edited by selecting the desired size in the Font Size tool.
+### Edit font size
-
+Edit the font size by selecting a size in the Font Size tool.
-### Editing font color
+
-The font color of the annotation can be edited using the color palette provided in the Font Color tool.
+### Edit font color
-
+Edit the font color using the color palette in the Font Color tool.
-### Editing the text alignment
+
-The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool.
+### Edit the text alignment
+
+Align text by selecting an option from the Text Align tool.
-### Editing text styles
+### Edit text styles
-The style of the text in the annotation can be edited by selecting the desired styles in the drop-down pop-up in the Font Style tool.
+Edit text styles by selecting options in the Font Style tool.
-
+
-### Editing fill color
+### Edit fill color
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Edit the fill color using the color palette in the Edit Color tool.
-
+
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The border thickness of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
+
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the free text annotation can be set before creating the control using the FreeTextSettings.
+Default properties for free text annotations can be set before creating the control using FreeTextSettings.
-After editing the default values, they will be changed to the selected values. Refer to the following code sample to set the default free text annotation settings.
+After changing default values, the selected values are applied. The following example sets default free text annotation settings.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -681,7 +683,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const freetextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' };
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
@@ -716,7 +718,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
freetextSettings: { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }
};
},
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 b4cd3a3dc..69f40b7d3 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md
@@ -1,30 +1,30 @@
---
layout: post
-title: Ink annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Ink annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Ink annotation
+title: Ink annotation in Vue PDF viewer component | Syncfusion
+description: Explore ink annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and configure default settings.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Ink annotation in Vue Pdfviewer component
+# Ink annotation in Vue PDF viewer component
-The PDF Viewer control provides the options to add, edit, and delete the ink annotations.
+The PDF Viewer control provides options to add, edit, and delete ink annotations.
-
+
-## Adding an ink annotation to the PDF document
+## Add an ink annotation to the PDF document
-The ink annotations can be added to the PDF document using the annotation toolbar.
+Ink 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.
-* Select the **Draw Ink** button in the annotation toolbar. It enables the ink annotation mode.
-* You can draw anything over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Draw Ink** button to enable ink annotation mode.
+* Draw on any page of the PDF document.
-
+
-Refer to the following code sample to switch to the ink annotation mode.
+The following example switches to ink annotation mode.
{% tabs %}
@@ -50,7 +50,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -91,7 +91,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -193,11 +193,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding a Ink annotation to the PDF document Programmatically
+## Add an Ink annotation programmatically to the PDF document Programmatically
-With the PDF Viewer library, you can add a Ink 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 an ink 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 Ink annotation programmatically
+Here is an example of adding an ink annotation programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -221,7 +221,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -265,7 +265,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -379,11 +379,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Edit the existing Ink annotation programmatically
+## Edit an existing ink annotation programmatically
-To modify existing Ink annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing ink annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -407,7 +407,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -455,7 +455,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -581,33 +581,33 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the ink annotation
+## Edit the properties of ink annotations
-The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the ink annotation can be set before creating the control using the InkAnnotationSettings.
+Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
-After editing the default values, they will be changed to the selected values. Refer to the following code sample to set the default ink annotation settings.
+After changing default values, the selected values are applied. Refer to the following code sample to set the default ink annotation settings.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -629,7 +629,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const inkAnnotationSettings = { author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 };
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
@@ -663,7 +663,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
inkAnnotationSettings: { author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 }
};
},
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 9446cc6e3..d138dd95b 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
@@ -1,18 +1,18 @@
---
layout: post
-title: Line Angle Constraints in Vue PDF Viewer | Syncfusion
-description: Learn all about Line Angle Constraints Annotation in the Syncfusion Vue PDF Viewer component of Essential JS 2 and more.
+title: Line Angle Constraints in Vue PdfViewer | Syncfusion
+description: Discover how to manage text markup annotations like highlight, underline, strikethrough, and squiggly in the Syncfusion Vue PDF Viewer.
platform: document-processing
-control: Line Angle Constraints
+control: PDF Viewer
documentation: ug
---
-# Line Angle Constraints in Vue PDF Viewer
+# 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.
-## Enabling Line Angle Constraints
-To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.
+## Enable line angle constraints
+Configure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles.
The following code demonstrates how to enable line angle constraints:
@@ -54,7 +54,7 @@ export default {
data() {
return {
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
annotationDrawingOptions : {enableLineAngleConstraints : true, restrictLineAngleTo: 90}
};
},
@@ -95,48 +95,47 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base
- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
-- Desktop support: Hold **Shift** while drawing to activate constraints
+- 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
### restrictLineAngleTo
-The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.
+Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
-**Angle Snapping Rules:**
+Angle snapping rules:
- 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°
-**Examples:**
+Examples:
- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°
-## Working with Constrained Annotations
+## Work with constrained annotations
### Drawing Behavior
When line angle constraints are enabled:
-**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
-**Angle Snapping:** The line snaps to the nearest allowed angle.
-**Visual Feedback:** Snapped angle is shown in real time.
-**Completion:** Release to complete the annotation.
+- 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.
### Keyboard Shortcuts
-**Desktop Platforms:**
-
-**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.
+Desktop platforms:
+- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.
### Selector-Based Modifications
When modifying existing line annotations using selectors:
- Constraints apply based on the original line direction.
-- The reference angle (0°) is determined by the lines current orientation.
-- Only lines and arrows support constraint snapping during modification.
-- Adjustments snap to the configured angle increment relative to the original 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.
-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 example](https://github.com/syncfusion/ej2-Vue-samples/tree/master/src/app/pdfviewer) to know how to render and configure the PDF Viewer.
+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.
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 b97280fb1..bd82f4437 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Measurement annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Measurement annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Measurement annotation
+title: Measurement annotation in Vue PDF Viewer control | Syncfusion
+description: Learn about measurement annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Measurement annotation in Vue Pdfviewer component
+# Measurement annotation in Vue PDF Viewer control
-The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are:
+The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
* Distance
* Perimeter
@@ -18,22 +18,22 @@ The PDF Viewer provides the options to add measurement annotations. You can meas
* Radius
* Volume
-
+
## Adding measurement annotations to the PDF document
The 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** dropdown button. A dropdown pop-up will appear and shows the measurement annotations to be added.
-* Select the measurement type to be added to the page in the dropdown pop-up. It enables the selected measurement annotation mode.
-* You can measure and add the annotation over the pages of the PDF document.
+* 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.
-In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.
-Refer to the following code snippet to switch to distance annotation mode.
+The following example switches to distance annotation mode.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -57,7 +57,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -97,7 +97,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
@@ -200,11 +200,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding a measurement annotation to the PDF document Programmatically
+## Add a measurement annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a measurement 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 measurement annotations 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 measurement annotation programmatically:
+Here is an example showing how to add measurement annotations programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -231,7 +231,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -309,7 +309,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -510,11 +510,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Edit the existing measurement annotation programmatically
+## Edit an existing measurement annotation programmatically
-To modify existing measurement annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing measurement annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -541,7 +541,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]);
@@ -638,7 +638,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -911,43 +911,43 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of measurement annotation
+## Edit the properties of measurement annotations
-The fill color, stroke color, thickness, and opacity of the measurement annotation can be edited using the Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing fill color
+### Edit fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-### Editing stroke color
+### Edit stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool.
+Edit border thickness using the range slider provided in the Edit Thickness tool.
-### Editing opacity
+### Edit opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-### Editing the line properties
+### Edit the line properties
-The properties of the line shapes such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations.
+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.
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the shape annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings and volumeSettings. Refer to the following code snippet to set the default annotation settings.
+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)" %}
@@ -970,7 +970,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const distanceSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' };
const perimeterSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' };
const areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' };
@@ -1009,7 +1009,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
distanceSettings: { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' },
perimeterSettings: { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' },
areaSettings: { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' },
@@ -1147,7 +1147,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' };
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -1187,7 +1187,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
measurementSettings: { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }
};
},
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 9cf4c2f41..458a6ac39 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Shape annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Shape annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Shape annotation
+title: Shape annotation in Vue PDF Viewer component | Syncfusion
+description: Learn here all about Shape annotation in Syncfusion Vue PDF Viewer control of Syncfusion Essential JS 2 and more.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Shape annotation in Vue Pdfviewer component
+# Shape annotation in Vue PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are:
+The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are:
* Line
* Arrow
@@ -18,20 +18,20 @@ The PDF Viewer control provides the options to add, edit, and delete the shape a
* Circle
* Polygon
-
+
## Adding a shape annotation to the PDF document
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. A drop-down pop-up will appear and shows the shape annotations to be added.
-* Select the shape types to be added to the page in the drop-down pop-up. It enables the selected shape annotation mode.
-* You can add the shapes over the pages of the PDF document.
+* 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.
-In the pan mode, if the shape annotation mode is entered, the PDF Viewer control will switch to text select mode.
+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.
-
+
Refer to the following code sample to switch to the circle annotation mode.
@@ -58,7 +58,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -100,7 +100,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -202,11 +202,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding a shape annotation to the PDF document Programmatically
+## Add a shape annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a shape 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 shape 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 shape annotation programmatically:
+Here is an example showing how to add shape annotations programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -233,7 +233,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -315,7 +315,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -531,11 +531,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Edit the existing shape annotation programmatically
+## Edit an existing shape annotation programmatically
-To modify existing shape annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing shape annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -562,7 +562,7 @@ import { ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -662,7 +662,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -934,45 +934,45 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the shape annotation
+## Edit an properties of the shape annotation
-The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
### Editing fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
+
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
+
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
+
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
+
### Editing the line properties
-The properties of the line shapes such as line and arrow annotations can be edited using the Line Properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the line and arrow annotations.
+Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
Refer to the following code sample to set the default annotation settings.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
+Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -995,7 +995,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const lineSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' };
const arrowSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' };
const rectangleSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' };
@@ -1034,7 +1034,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
lineSettings: { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' },
arrowSettings: { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' },
rectangleSettings: { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' },
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 d0afb5972..a0b2270e5 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md
@@ -1,8 +1,8 @@
---
layout: post
-title: Handwritten signature in Vue Pdfviewer component | Syncfusion
-description: Learn here all aboutHandwritten signature in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Handwritten signature
+title: Handwritten signature in Vue PDF Viewer control | Syncfusion
+description: Learn about handwritten signatures in the Syncfusion Vue PDF Viewer (Essential JS 2): add, enable/disable, and edit properties.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
@@ -10,24 +10,24 @@ domainurl: ##DomainURL##
# Handwritten signature Vue PDF Viewer control
-The PDF Viewer control supports adding handwritten signatures to a PDF document. The handwritten signature reduces the paper work of reviewing the content and verifies it digitally.
+The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification.
## Adding a handwritten signature to the PDF document
The handwritten signature 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.
-* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel will appear.
+* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears.
-
+
-* Draw the signature in the signature panel.
+* Draw the signature in the panel.
-
+
-* Then click **Create** button and move the signature using the mouse and place them in the desired location.
+* Click **Create**, move the signature, and place it at the desired location.
-
+
Refer to the following code sample to switch to the handwritten signature mode programmatically.
@@ -54,7 +54,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -95,7 +95,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -196,9 +196,9 @@ export default {
{% endhighlight %}
{% endtabs %}
-## How to enable the handwritten signature
+## Enable the handwritten signature
-The following code snippet describes how to enable the handwritten signature in PDF Viewer. When the value is set to `false` it disables the handwritten signature.
+The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -225,7 +225,7 @@ export default {
data() {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib'
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
};
},
provide: {
@@ -274,11 +274,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding Handwritten signature programmatically to the PDF document
+## Add a handwritten signature programmatically to the PDF document
With the PDF Viewer library, you can programmatically add 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 how you can use the **addAnnotation()** method to add the Handwritten signature programmatically
+Here is an example of adding a handwritten signature programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -302,7 +302,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, DisplayMode])
@@ -376,7 +376,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -582,24 +582,24 @@ export default {
[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
-## Editing the properties of handwritten signature
+## Edit the properties of handwritten signatures
-The stroke color, border thickness, and opacity of the handwritten signature can be edited using the edit stroke color tool, edit thickness tool, and edit opacity tool in the annotation toolbar.
+Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-
+
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
\ No newline at end of file
+
\ No newline at end of file
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 b6ca2d1a9..8e10ab0d1 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Stamp annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Stamp annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Stamp annotation in Vue PDF Viewer control | Syncfusion
+description: Learn about stamp annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps.
control: Stamp annotation
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Stamp annotation in Vue Pdfviewer component
+# Stamp annotation in Vue PDF Viewer control
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents:
* Dynamic
* Sign Here
@@ -19,24 +19,24 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol
-## Adding stamp annotations to the PDF document
+## Add stamp annotations to the PDF document
The stamp 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 **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-* Select the annotation type to be added to the page in the pop-up.
+* Select a stamp type to enable its annotation mode.
-* You can add the annotation over the pages of the PDF document.
+* Place the stamp on the pages of the PDF document.
-In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control will switch to text select mode.
+N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience.
-Refer to the following code sample to switch to the stamp annotation mode.
+The following examples switch to stamp annotation modes.
{% tabs %}
@@ -61,7 +61,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -102,7 +102,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -236,7 +236,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -315,7 +315,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -526,11 +526,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Edit the existing sticky note annotation programmatically
+## Edit an existing stamp annotation programmatically
-To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing stamp annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -553,7 +553,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -599,7 +599,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -718,17 +718,17 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Adding custom stamp to the PDF document
+## Add a custom stamp to the PDF document
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
* Click the Custom Stamp button.
-* The file explorer dialog will appear, choose the image and then add the image to the PDF page.
+* In the file explorer dialog, choose an image and add it to the PDF page.
->The JPG and JPEG image format is only supported in the custom stamp annotations.
+>Only JPG and JPEG image formats are supported for custom stamp annotations.
## Setting default properties during control initialization
@@ -758,7 +758,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const stampSettings = { opacity: 0.3, author: 'Guest User' };
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -791,7 +791,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
stampSettings: { opacity: 0.3, author: 'Guest User' }
};
},
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 9ae8b54c5..f3d34f2a4 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
@@ -1,43 +1,42 @@
---
layout: post
-title: Sticky notes annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Sticky notes annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Sticky notes annotation
+title: Sticky notes in Vue PDF Viewer control | Syncfusion
+description: Learn about sticky note annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Sticky notes annotation in Vue Pdfviewer component
+# Sticky notes annotation in Vue PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
+The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
-## Adding a sticky note annotation to the PDF document
+## 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. A toolbar appears below it.
-* Click the position where you want to add sticky note annotation in the PDF document.
-* Sticky note annotation will be added in the clicked positions.
+* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Click the position where the sticky note annotation should be added.
+* The sticky note annotation is added at the clicked position.
-Annotation comments can be added to the PDF document using the comment panel.
+Annotation comments can be added using the comment panel.
-* Select a Sticky note annotation in the PDF document and right-click it.
-* Select the Comment option in the context menu that appears.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
+* Select a sticky note annotation in the PDF document and right-click it.
+* Select Comment from the context menu.
+* Add comments, replies, and status using the comment panel.
-## Adding a sticky note annotation to the PDF document Programmatically
+## Add a sticky note annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a sticky note 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 sticky note 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 sticky note annotation programmatically:
+Here is an example showing how to add a sticky note annotation programmatically using addAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -60,7 +59,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -102,7 +101,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -208,11 +207,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Edit the existing sticky note annotation programmatically
+## Edit an existing sticky note annotation programmatically
-To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -235,7 +234,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -280,7 +279,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -395,31 +394,31 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the sticky note annotation
+## Edit the properties of sticky note annotations
### Editing opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
### Editing comments
-The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.
+Comment text, replies, and status can be edited using the comment panel.
-* Open the comment panel using the Comment Panel button showing in the annotation toolbar.
+* Open the comment panel using the Comment Panel button in the annotation toolbar.
-You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
+Modify or delete comments or replies, and change status using the menu options in the comment panel.
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings.
+Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings.
-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 default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings.
{% tabs %}
@@ -443,7 +442,7 @@ import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const stickyNotesSettings = { author: 'Syncfusion' };
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -477,7 +476,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
stickyNotesSettings: { author: 'Syncfusion' }
};
},
@@ -556,9 +555,9 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Disabling sticky note annotations
+## Disable sticky note annotations
-The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows.
+The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -581,7 +580,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const enableStickyNotesAnnotation = false;
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -617,7 +616,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
enableStickyNotesAnnotation: false
};
},
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 df39869da..e948d0f4f 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
@@ -1,39 +1,39 @@
---
layout: post
-title: Text markup annotation in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Text markup annotation in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Text markup annotation
+title: Text markup annotation in Vue PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion Vue PDF Viewer.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Text markup annotation in Vue Pdfviewer component
+# Text markup annotation in Vue PDF viewer component
-The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, strikethrough and squiggly annotations in the PDF document.
+The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.
-## Highlight a text
+## Highlight text
-There are two ways to highlight a text in the PDF document:
+There are two ways to highlight text:
1.Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Highlight** option in the context menu that appears.
+ * Select text in the PDF document and right-click it.
+ * Select **Highlight** in the context menu.
2.Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Highlight** button in the annotation toolbar. It enables the highlight mode.
- * Select the text and the highlight annotation will be added.
- * You can also select the text and apply the highlight annotation using the **Highlight** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Highlight** to enable highlight mode.
+ * Select text to add the highlight annotation.
+ * Alternatively, select text first and then click **Highlight**.
-In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text.
+When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
Refer to the following code snippet to switch to highlight mode.
@@ -60,7 +60,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -102,7 +102,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -233,7 +233,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -279,7 +279,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -393,11 +393,11 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Highlight a text programmatically
+## Highlight text programmatically
-The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control 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.
-Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically:
+Example:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -419,7 +419,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -460,7 +460,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -563,22 +563,22 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Underline a text
+## Underline text
-There are two ways to underline a text in the PDF document:
+There are two ways to underline text:
1.Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Underline** option in the context menu that appears.
+ * Select text in the PDF document and right-click it.
+ * Select **Underline** in the context menu.
2.Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Underline** button in the annotation toolbar. It enables the underline mode.
- * Select the text and the underline annotation will be added.
- * You can also select the text and apply the underline annotation using the **Underline** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Underline** to enable underline mode.
+ * Select text to add the underline annotation.
+ * Alternatively, select text first and then click **Underline**.
@@ -610,7 +610,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer]);
@@ -653,7 +653,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -781,7 +781,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -826,7 +826,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -942,9 +942,9 @@ export default {
## Underline a text programmatically
-The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation/#addannotation) method.
+Programmatically add underlines 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 Underline programmatically:
+Example:
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -967,7 +967,7 @@ import { provide ,ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -1008,7 +1008,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -1111,22 +1111,22 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Strikethrough a text
+## Strikethrough text
-There are two ways to strikethrough a text in the PDF document:
+There are two ways to strikethrough text:
1.Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Strikethrough** option in the context menu that appears.
+ * Select text in the PDF document and right-click it.
+ * Select **Strikethrough** in the context menu.
2.Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Strikethrough** button in the annotation toolbar. It enables the strikethrough mode.
- * Select the text and the strikethrough annotation will be added.
- * You can also select the text and apply the strikethrough annotation using the **Strikethrough** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Strikethrough** to enable strikethrough mode.
+ * Select text to add the strikethrough annotation.
+ * Alternatively, select text first and then click **Strikethrough**.
@@ -1156,7 +1156,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -1197,7 +1197,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -1328,7 +1328,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -1374,7 +1374,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -1489,9 +1489,9 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Strikethrough a text programmatically
+## Strikethrough text programmatically
-The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control 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:
@@ -1517,7 +1517,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -1559,7 +1559,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -1662,13 +1662,13 @@ export default {
{% endhighlight %}
{% endtabs %}
-## Squiggly a text
+## Add squiggly to text
-There are two ways to add squiggly to a text in the PDF document:
+There are two ways to add squiggly to text:
1.Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Squiggly** option in the context menu that appears.
+ * Select text in the PDF document and right-click it.
+ * Select **Squiggly** in the context menu.
@@ -1707,7 +1707,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -1748,7 +1748,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -1879,7 +1879,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner, PageOrganizer])
@@ -1925,7 +1925,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -2068,7 +2068,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -2110,7 +2110,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -2272,7 +2272,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
const highlightSettings = { author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: '' };
const underlineSettings = { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: '' };
const strikethroughSettings = { author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: '' };
@@ -2310,7 +2310,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
highlightSettings: { author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: '' },
underlineSettings: { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: '' },
strikethroughSettings: { author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: '' },
@@ -2447,7 +2447,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -2497,7 +2497,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
@@ -2644,7 +2644,7 @@ import {
import { provide } from 'vue';
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
+const resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer])
@@ -2678,7 +2678,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
};
},
provide: {
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
index c3785a1c4..6d84a8c90 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/content-security-policy.md
@@ -1,20 +1,20 @@
---
layout: post
-title: Content Security Policy with Vue Pdfviewer component | Syncfusion
-description: Learn here all about Content Security Policy with Vue Pdfviewer component of Syncfusion Essential JS 2 and more details.
+title: Content Security Policy with Vue PDF Viewer component | Syncfusion
+description: Learn here all about Content Security Policy with Vue PDF Viewer component of Syncfusion Essential JS 2 and more details.
control: CSP
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Content Security Policy
+# Content Security Policy in Vue PDF Viewer
Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It limits the sources from which content can be loaded on a web page.
To enable strict [Content Security Policy (CSP)](https://csp.withgoogle.com/docs/strict-csp.html), certain browser features are disabled by default. In order to use Syncfusion PDF Viewer control with strict CSP mode, it is essential to include following directives in the CSP meta tag.
-* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'wasm-unsafe-eval' blob:;` ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
+* Syncfusion PDF Viewer control are rendered with calculated **inline styles** and **base64** font icons, which are blocked on a strict CSP-enabled site. To allow them, add the [`style-src 'self' 'wasm-unsafe' blob:;` ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`font-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src) directives in the meta tag as follows.
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -43,7 +43,7 @@ The resultant meta tag is included within the `` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}
-* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the img-src data: directive in the meta tag. To allow them, add the [`style-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`img-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows.
+* Syncfusion PDF Viewer control when images are added as **blob** and **base64**, which are blocked on a strict CSP-enabled site.To overcome this restriction, it is necessary to add the image-src data: directive in the meta tag. To allow them, add the [`style-src 'self' blob:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) and [`image-src 'self' data:;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) directives as follows.
{% tabs %}
{% highlight razor tabtitle="HTML" %}
@@ -73,7 +73,7 @@ The resultant meta tag is included within the `` tag and resolves the CSP
{% endhighlight %}
{% endtabs %}
-N> In accordance with the latest security practices, the Syncfusion PDF Viewer control now recommends using `wasm-unsafe-eval` in the Content Security Policy (CSP) settings to enhance the security of WebAssembly operations. This change ensures a safer execution environment while maintaining the necessary functionality. Make sure to update your CSP meta tags to reflect this change for optimal security compliance.
+N> In accordance with the latest security practices, the Syncfusion PDF Viewer control now recommends using `wasm-unsafe` in the Content Security Policy (CSP) settings to enhance the security of WebAssembly operations. This change ensures a safer execution environment while maintaining the necessary functionality. Make sure to update your CSP meta tags to reflect this change for optimal security compliance.
### Please find the usage of each directives:
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/download.md b/Document-Processing/PDF/PDF-Viewer/vue/download.md
index dfbe5a0b1..69de055f8 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/download.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/download.md
@@ -1,19 +1,23 @@
---
layout: post
-title: Download in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Download in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Download in Vue PDF Viewer | Syncfusion
+description: Learn how to enable, disable, and programmatically trigger download in the Syncfusion Vue PDF Viewer, including download events and base64 handling.
control: Download
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Download in Vue Pdfviewer component
+# Download in Vue PDF viewer control
-The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet.
+The PDF Viewer supports downloading the loaded PDF document. Use the enableDownload property to enable or disable the download option, as shown below.
-You can invoke download action using following code snippet.,
+> Note: When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests.
+
+
+
+You can invoke the download action using the following code snippet:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -36,7 +40,7 @@ import {
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]);
@@ -73,7 +77,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/event.md b/Document-Processing/PDF/PDF-Viewer/vue/event.md
new file mode 100644
index 000000000..0cd8e10cc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/event.md
@@ -0,0 +1,3896 @@
+---
+layout: post
+title: Events in Vue PDF Viewer | Syncfusion
+description: Comprehensive list of events in the Syncfusion Vue PDF Viewer with descriptions, event arguments, and usage examples to integrate custom logic.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Events in Vue PDF Viewer
+
+The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
+
+The following table lists commonly used events supported by the PDF Viewer component:
+
+| Event | Description |
+| ----- | ----------- |
+| [`bookmarkClick`](#bookmarkclick) | Triggers when a bookmark item is clicked in the bookmark panel. |
+| [`buttonFieldClick`](#buttonfieldclick) | Triggers when a button form field is clicked. |
+| [`commentAdd`](#commentadd) | Triggers when a comment is added to the comment panel. |
+| [`commentDelete`](#commentdelete) | Triggers when a comment is deleted from the comment panel. |
+| [`commentEdit`](#commentedit) | Triggers when a comment is edited in the comment panel. |
+| [`commentSelect`](#commentselect) | Triggers when a comment is selected in the comment panel. |
+| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment’s status changes in the comment panel. |
+| [`created`](#created) | Triggers during the creation of the PDF Viewer component. |
+| [`customContextMenuBeforeOpen`](#customcontextmenubeforeopen) | Fires before the custom context menu opens. |
+| [`customContextMenuSelect`](#customcontextmenuselect) | Fires when a custom context menu item is selected. |
+| [`documentLoad`](#documentload) | Triggers while loading a document into the PDF Viewer. |
+| [`documentLoadFailed`](#documentloadfailed) | Triggers when document loading fails. |
+| [`documentUnload`](#documentunload) | Triggers when the document is closed. |
+| [`downloadEnd`](#downloadend) | Triggers after a document is downloaded. |
+| [`downloadStart`](#downloadstart) | Triggers when the download action is initiated. |
+| [`exportFailed`](#exportfailed) | Triggers when exporting annotations fails. |
+| [`exportStart`](#exportstart) | Triggers when exporting annotations starts. |
+| [`exportSuccess`](#exportsuccess) | Triggers when annotations are exported successfully. |
+| [`extractTextCompleted`](#extracttextcompleted) | Triggers when text extraction is completed. |
+| [`hyperlinkClick`](#hyperlinkclick) | Triggers when a hyperlink is clicked. |
+| [`hyperlinkMouseOver`](#hyperlinkmouseover) | Triggers when hovering over a hyperlink. |
+| [`importFailed`](#importfailed) | Triggers when importing annotations fails. |
+| [`importStart`](#importstart) | Triggers when importing annotations starts. |
+| [`importSuccess`](#importsuccess) | Triggers when annotations are imported successfully. |
+| [`keyboardCustomCommands`](#keyboardcustomcommands) | Triggers when customized keyboard command keys are pressed. |
+| [`moveSignature`](#movesignature) | Triggers when a signature is moved across the page. |
+| [`pageChange`](#pagechange) | Triggers when the current page number changes. |
+| [`pageClick`](#pageclick) | Triggers when a mouse click occurs on a page. |
+| [`pageMouseover`](#pagemouseover) | Triggers when moving the mouse over a page. |
+| [`pageOrganizerSaveAs`](#pageorganizersaveas) | Triggers when a `save as` action is performed in the page organizer. |
+| [`pageRenderComplete`](#pagerendercomplete) | Triggers after a page finishes rendering. |
+| [`pageRenderInitiate`](#pagerenderinitiate) | Triggers when page rendering begins. |
+| [`printEnd`](#printend) | Triggers when a print action is completed. |
+| [`printStart`](#printstart) | Triggers when a print action is initiated. |
+| [`removeSignature`](#removesignature) | Triggers when a signature is removed. |
+| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized. |
+| [`resourcesLoaded`](#resourcesloaded) | Triggers after PDFium resources are loaded. |
+| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when signature properties are changed. |
+| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected. |
+| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected. |
+| [`textSearchComplete`](#textsearchcomplete) | Triggers when a text search is completed. |
+| [`textSearchHighlight`](#textsearchhighlight) | Triggers when the searched text is highlighted. |
+| [`textSearchStart`](#textsearchstart) | Triggers when a text search is initiated. |
+| [`textSelectionEnd`](#textselectionend) | Triggers when text selection is complete. |
+| [`textSelectionStart`](#textselectionstart) | Triggers when text selection is initiated. |
+| [`thumbnailClick`](#thumbnailclick) | Triggers when a thumbnail is clicked. |
+| [`toolbarClick`](#toolbarclick) | Triggers when a toolbar item is clicked. |
+| [`validateFormFields`](#validateformfields) | Triggers when form field validation fails. |
+| [`zoomChange`](#zoomchange) | Triggers when the magnification value changes. |
+
+Note: For annotation and signature events, see the dedicated Annotations Events topic.
+
+## bookmarkClick
+
+The [bookmarkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#bookmarkclick) event triggers when a bookmark item is clicked in the bookmark panel.
+
+- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/bookmarkClickEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## toolbarClick
+
+The [toolbarClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#toolbarclick) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
+
+- Event arguments: `ClickEventArgs`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## validateFormFields
+
+The [validateFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#validateformfields) event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.
+
+- Event arguments: [ValidateFormFieldsArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/validateFormFieldsArgs/)
+ - name: Event name
+ - documentName: Current document name
+ - formField: The last interacted field’s data (if applicable)
+ - nonFillableFields: Array detailing required/invalid fields
+
+When it triggers
+- Add a form field and mark it Required (UI: right‑click field > Properties > Required).
+- Leave the field empty and click Download. The event fires and provides the list of fields that failed validation.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+Tip
+- To require a field programmatically, set isRequired: true when creating or editing the field via Form Designer APIs.
+
+## zoomChange
+
+The [zoomChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#zoomchange) event triggers when the magnification value changes.
+
+- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/zoomChangeEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## buttonFieldClick
+
+The [buttonFieldClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#buttonfieldclick) event triggers when a button form field is clicked.
+
+- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/buttonFieldClickEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## commentAdd
+
+The [commentAdd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentadd) event triggers when a comment is added in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## commentDelete
+
+The [commentDelete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentdelete) event triggers when a comment is deleted in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## commentEdit
+
+The [commentEdit](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentedit) event triggers when a comment is edited in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## commentSelect
+
+The [commentSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentselect) event triggers when a comment is selected in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## commentStatusChanged
+
+The [commentStatusChanged](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#commentstatuschanged) event triggers when a comment status is changed in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## created
+
+The [created](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#created) event is triggered during the creation of the PDF Viewer component.
+
+- Event arguments: `void`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## customContextMenuBeforeOpen
+
+The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenubeforeopen) event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).
+
+- Event arguments: [CustomContextMenuBeforeOpenEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/)
+ - name: Event name
+ - ids: Array of menu item ids that will be shown; remove ids to hide items for this open
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## customContextMenuSelect
+
+The [customContextMenuSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#customcontextmenuselect) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
+
+- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customContextMenuSelectEventArgs/).
+
+- name: Event name
+- id: The id of the clicked menu item
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## documentLoad
+
+The [documentLoad](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentload) event occurs after a document is successfully loaded and parsed.
+
+- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## documentLoadFailed
+
+The [documentLoadFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentloadfailed) event triggers when loading a document fails.
+
+- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/loadFailedEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## documentUnload
+
+The [documentUnload](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#documentunload) event triggers when closing the current document.
+
+- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/unloadEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## downloadEnd
+
+The [downloadEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadend) event triggers after a document download completes.
+
+- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadEndEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## downloadStart
+
+The [downloadStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#downloadstart) event triggers when the download operation is initiated.
+
+- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/downloadStartEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## exportFailed
+
+The [exportFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportfailed) event triggers when exporting annotations fails.
+
+- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportFailureEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## exportStart
+
+The [exportStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportstart) event triggers when exporting annotations starts.
+
+- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportStartEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## exportSuccess
+
+The [exportSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#exportsuccess) event triggers when annotations are exported successfully.
+
+- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/exportSuccessEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## extractTextCompleted
+
+The [extractTextCompleted](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#extracttextcompleted) event triggers when text extraction completes.
+
+- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/extractTextCompletedEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## hyperlinkClick
+
+The [hyperlinkClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkclick) event triggers when a hyperlink is clicked.
+
+- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/hyperlinkClickEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## hyperlinkMouseOver
+
+The [hyperlinkMouseOver](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#hyperlinkmouseover) event triggers when hovering over a hyperlink.
+
+- Event arguments: HyperlinkMouseOverArgs.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## importFailed
+
+The [importFailed](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importfailed) event triggers when importing annotations fails.
+
+- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importFailureEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## importStart
+
+The [importStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importstart) event triggers when importing annotations starts.
+
+- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importStartEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## importSuccess
+
+The [importSuccess](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#importsuccess) event triggers when annotations are imported successfully.
+
+- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/importSuccessEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## keyboardCustomCommands
+
+The [keyboardCustomCommands](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#keyboardcustomcommands) event triggers when customized keyboard command keys are pressed.
+
+- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/keyboardCustomCommandsEventArgs/).
+
+ - name: Event name
+ - keyboardCommand: The command metadata raised by Command Manager
+
+When it triggers
+- After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this to handle custom keyboard shortcuts.
+
+Refer to [Keyboard interaction](./accessibility.md#keyboard-interaction) for details about adding and handling custom shortcut keys.
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## moveSignature
+
+The [moveSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#movesignature) event triggers when a signature is moved across the page.
+
+- Event arguments: `MoveSignatureEventArgs`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageChange
+
+The [pageChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagechange) event triggers when the current page number changes (for example, via scrolling or navigation controls).
+
+- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageChangeEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageClick
+
+The [pageClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageclick) event triggers when a mouse click occurs on a page.
+
+- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageClickEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageMouseover
+
+The [pageMouseover](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagemouseover) event triggers when the mouse moves over a page.
+
+- Event arguments: PageMouseoverEventArgs.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageOrganizerSaveAs
+
+The [pageOrganizerSaveAs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pageorganizersaveas) event triggers when a Save As action is performed in the page organizer.
+
+- Event arguments: `PageOrganizerSaveAsEventArgs`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageRenderComplete
+
+The [pageRenderComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerendercomplete) event triggers after a page finishes rendering.
+
+- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderCompleteEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## pageRenderInitiate
+
+The [pageRenderInitiate](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#pagerenderinitiate) event triggers when page rendering begins.
+
+- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/pageRenderInitiateEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## printEnd
+
+The [printEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printend) event triggers when a print action completes.
+
+- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printEndEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## printStart
+
+The [printStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#printstart) event triggers when a print action is initiated.
+
+- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/printStartEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## removeSignature
+
+The [removeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#removesignature) event triggers when a signature is removed.
+
+- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/removeSignatureEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## resizeSignature
+
+The [resizeSignature](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resizesignature) event triggers when a signature is resized.
+
+- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## resourcesLoaded
+
+The [resourcesLoaded](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#resourcesLoaded) event triggers after the viewer's required resources are loaded.
+
+- Event arguments: `void`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## signaturePropertiesChange
+
+The [signaturePropertiesChange](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signaturepropertieschange) event triggers when signature properties change.
+
+- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
+## signatureSelect
+
+The [signatureSelect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureselect) event triggers when a signature is selected.
+
+- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureSelectEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## signatureUnselect
+
+The [signatureUnselect](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#signatureunselect) event triggers when a signature is unselected.
+
+- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/signatureUnselectEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## textSearchComplete
+
+The [textSearchComplete](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchcomplete) event triggers when a text search completes.
+
+- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchCompleteEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## textSearchHighlight
+
+The [textSearchHighlight](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchhighlight) event triggers when searched text is highlighted.
+
+- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchHighlightEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## textSearchStart
+
+The [textSearchStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textsearchstart) event triggers when a text search is initiated.
+
+- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSearchStartEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+## textSelectionEnd
+
+The [textSelectionEnd](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionend) event triggers when text selection is complete.
+
+- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/textSelectionEndEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## textSelectionStart
+
+The [textSelectionStart](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#textselectionstart) event triggers when text selection is initiated.
+
+- Event arguments: `TextSelectionStartEventArgs`.
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+## thumbnailClick
+
+The [thumbnailClick](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#thumbnailclick) event triggers when a thumbnail is clicked.
+
+- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/thumbnailClickEventArgs/).
+
+Example:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+> Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic.
+
+## See also
+
+- [Annotation events](./annotations/annotation-event.md)
+- [Form field events](./form-designer/form-field-events.md)
+- [Organize PDF events](./organize-pdf/organize-pdf-events.md)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
index aefe78963..524baacf8 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/feature-module.md
@@ -1,35 +1,35 @@
---
layout: post
-title: Feature module in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Feature module in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Feature module
+title: Feature modules in Vue PDF Viewer | Syncfusion
+description: Learn to inject feature modules in Syncfusion Vue PDF Viewer to enable toolbar, search, forms, annotations, and printing.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Feature module in Vue Pdfviewer component
+# Feature modules in Vue PDF viewer Control
-The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required:
+The PDF Viewer features are provided as individual modules, allowing applications to include only what is needed. Inject the required modules to enable functionality, then configure the corresponding properties on the PDF Viewer instance.
-The available PdfViewer modules are:
+Available PDF Viewer modules:
-* **Toolbar**:- Built-in toolbar for better user interaction.
-* **Magnification**:- Perform zooming operation for better viewing experience.
-* **Navigation**:- Easy navigation across the PDF pages.
-* **LinkAnnotation**:- Easy navigation within and outside of the PDF document.
-* **ThumbnailView**:- Easy navigation with in the PDF document.
-* **BookmarkView**:- Easy navigation based on the bookmark content of the PDF document.
-* **TextSelection**:- Select and copy text from a PDF file.
-* **TextSearch**:- Search a text easily across the PDF document.
-* **Print**:- Print the entire document or a specific page directly from the browser.
-* **Annotation**:- Annotations can be added or edited in the PDF document.
-* **FormFields**:- Preserve the form fields in the PDF document.
-* **FormDesigner**:- Form fields can be added or edited in the PDF document.
+* [**Toolbar**](./toolbar-customization/annotation-toolbar-customization.md): Built-in toolbar for user interaction.
+* [**Magnification**](./magnification.md): Perform zoom operations for a better viewing experience.
+* [**Navigation**](./interactive-pdf-navigation/page-navigation.md): Navigate across pages.
+* [**LinkAnnotation**](./interactive-pdf-navigation/table-of-content-navigation.md): Navigate within the document or to external destinations via hyperlinks.
+* [**ThumbnailView**](./interactive-pdf-navigation/page-thumbnail-navigation.md): Navigate within the document using page thumbnails.
+* [**BookmarkView**](./interactive-pdf-navigation/bookmark-navigation.md): Navigate using document bookmarks (table of contents).
+* [**TextSelection**](./textselection.md): Select and copy text from the document.
+* [**TextSearch**](./text-search.md): Search for text across the document.
+* [**Print**](./print.md): Print the entire document or specific pages directly from the browser.
+* [**Annotation**](./annotations/text-markup-annotation.md): Add and edit annotations.
+* [**FormFields**](./form-designer/create-programmatically.md): Work with form fields in the document.
+* [**FormDesigner**](./form-designer/create-programmatically.md): Add or edit form fields in the document.
->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a PDF Viewer instance.
+> In addition to injecting the required modules in an application, enable the corresponding properties to activate features on a PDF Viewer instance.
-Refer to the following table.
+Refer to the following table:
| Module | Property to enable the functionality for a PDF Viewer instance |
|---|---|
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
index 035f48175..af6032b7d 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-programmatically.md
@@ -1,29 +1,29 @@
---
layout: post
-title: Create programmatically in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Create programmatically in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Create programmatically
+title: Create form fields in the Vue PDF Viewer component | Syncfusion
+description: Learn how to add, update, delete, save, print, validate, and import/export form fields in the Syncfusion Vue PDF Viewer component.
platform: document-processing
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Create form fields programmatically in Vue Pdfviewer component
+# Create programmatically in Vue PDF Viewer control
-The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are:
+The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are:
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
+- Textbox
+- Password
+- CheckBox
+- RadioButton
+- ListBox
+- DropDown
+- Signature field
+- Initial field
## Add a form field to PDF document programmatically
-Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code.
+Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -47,7 +47,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -106,7 +106,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -153,7 +153,7 @@ Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serv
## Edit or update form field programmatically
-Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field.
+Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -177,7 +177,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -237,7 +237,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -286,7 +286,7 @@ Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serv
## Delete form field programmatically
-Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code.
+Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -310,7 +310,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -370,7 +370,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -418,11 +418,11 @@ Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serv
## Saving the form fields
-When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference.
+Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-You can invoke download action using following code snippet.
+You can invoke the download action using the following code snippet.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -575,11 +575,11 @@ export default {
## Printing the form fields
-When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference.
+Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-You can invoke print action using the following code snippet.,
+You can invoke the print action using the following code snippet:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -736,15 +736,15 @@ export default {
## Open the existing PDF document
-We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference.
+Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
+
## Validate form fields
-The form fields in the PDF Document will be validated when the `enableFormFieldsValidation` is set to true and hook the validateFormFields. The validateFormFields will be triggered when the PDF document is downloaded or printed with the non-filled form fields. The non-filled fields will be obtained in the `nonFillableFields` property of the event arguments of validateFormFields.
+Form fields are validated when enableFormFieldsValidation is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the nonFillableFields property of the event arguments.
-Add the following code snippet to validate the form fields,
+Add the following code to validate form fields:
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -975,21 +975,21 @@ export default {
## Export and import form fields
-The PDF Viewer control provides the support to export and import the form field data in the following formats using the methods `importFormFields`, `exportFormFields`, `exportFormFieldsAsObject`.
+The PDF Viewer component supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods in the following formats:
-* FDF
-* XFDF
-* JSON
-* XML
+- FDF
+- XFDF
+- JSON
+- XML
### Export and import as FDF
Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-* The first one must be the destination path for the exported data. If path is not specified, it will ask for the location while exporting.
+* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
* The second parameter should be the format type of the form data.
-The following code explains how to export and import the form field data as FDF.
+The following example exports and imports form field data as FDF.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -1091,7 +1091,7 @@ export default {
### Export and import as XFDF
-The following code explains how to export and import the form field data as XFDF.
+The following example exports and imports form field data as XFDF.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -1194,7 +1194,7 @@ export default {
### Export and import as JSON
-The following code explains how to export and import the form field data as JSON.
+The following example exports and imports form field data as JSON.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -1295,7 +1295,7 @@ export default {
### Export and import as Object
-The PDF Viewer control supports exporting the form field data as an object, and the exported data will be imported into the current PDF document from the object.
+The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
@@ -1367,7 +1367,7 @@ export default {
### Export and import as XML
-The following code explains how to export and import the form field data as XML.
+The following example exports and imports form field data as XML.
{% tabs %}
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
@@ -2525,2343 +2525,4 @@ export default {
{% endtabs %}
-The following code example explains how to update the properties of the password field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### CheckBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the CheckBox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-The following code example explains how to update the properties of the checkbox field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### RadioButton field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the RadioButton field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code example explains how to update the properties of the radio button field added to the document from the form designer toolbar.
-
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-
-### ListBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the ListBox field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-The following code example explains how to update the properties of the listbox field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### DropDown field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the DropDown field properties on a button click.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-The following code example explains how to update the properties of the dropdown field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
+The following code example explains how to update the properties of the password field added to the do
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
index ac499aef3..0dfde8a19 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/create-with-user-interface-interaction.md
@@ -1,29 +1,29 @@
---
layout: post
-title: User interaction in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Create with user interface interaction in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Create with user interface interaction
+title: Design form fields in the Vue PDF Viewer component | Syncfusion
+description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion Vue PDF Viewer component.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Create form fields with UI interaction in Vue Pdfviewer component
+# Create form fields with UI interaction in Vue PDF Viewer control
-The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are:
+The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
+- Textbox
+- Password
+- CheckBox
+- RadioButton
+- ListBox
+- DropDown
+- Signature field
+- Initial field
## Enable or Disable form designer toolbar
-We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property.
+Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
@@ -156,41 +156,41 @@ export default {
## Add the form field dynamically
-Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference.
+Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
+
## Drag the form field
-We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
+Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
+
## Resize the form field
-We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
+Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
+
## Edit or Update the form field dynamically
-The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field.
+Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings.
-
+
-
+
-
+
## Clipboard operation with form field
-The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu.
+The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-
+
## Undo and Redo
-We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions.
+Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
{% tabs %}
{% highlight html tabtitle="Composition API (Standalone)" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
index c61704c17..4c6feff29 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/form-designer/form-field-events.md
@@ -1,14 +1,14 @@
---
layout: post
-title: Form Field Events in Vue Pdfviewer control | Syncfusion
-description: Learn here all about different form field in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Form Field Events in Vue PDF Viewer control | Syncfusion
+description: Learn here all about different form field in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
control: Form Field Events
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# PDF Viewer Form Field events in Vue
+# PDF Viewer Form Field events in Vue PDF Viewer control
The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
@@ -54,7 +54,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -94,7 +94,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -140,7 +140,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -180,7 +180,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -226,7 +226,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -266,7 +266,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -312,7 +312,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -352,7 +352,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -398,7 +398,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -438,7 +438,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -484,7 +484,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -526,7 +526,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -574,7 +574,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -616,7 +616,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -664,7 +664,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -723,7 +723,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -788,7 +788,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -828,7 +828,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -874,7 +874,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -916,7 +916,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -964,7 +964,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -1004,7 +1004,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -1050,7 +1050,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -1090,7 +1090,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
@@ -1136,7 +1136,7 @@ import { provide, ref } from 'vue';
const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/form-designer.pdf";
-const resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
+const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
@@ -1177,7 +1177,7 @@ export default {
data() {
return {
documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- resourceUrl: "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib"
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
};
},
provide: {
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md
new file mode 100644
index 000000000..d512ccd2c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/form-filling.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: Form filling in Vue PDF Viewer | Syncfusion
+description: Learn how to view, fill, export, and import PDF form fields using the Syncfusion Vue PDF Viewer, including disabling interaction and working with signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form filling in Vue PDF Viewer
+
+The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
+
+The PDF Viewer supports the following form field types:
+
+* Text box
+* Password
+* Check box
+* Radio button
+* List box
+* Dropdown
+* Signature field
+* Initial field
+
+
+
+## Disabling form fields
+
+The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add a handwritten signature to a signature field
+
+Add a handwritten signature to a signature field by following these steps:
+
+* Click the signature field in the PDF document to open the signature panel.
+
+
+
+* Draw the signature in the signature panel.
+
+
+
+* Select **CREATE**. The drawn signature is added to the signature field.
+
+
+
+## Delete a signature from a signature field
+
+Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
+
+
+
+## Export and import form fields
+
+The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
+
+* FDF
+* XFDF
+* JSON
+
+For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically#export-and-import-form-fields).
+
+## See also
+
+* [Handwritten signature in Vue PDF Viewer](./annotations/signature-annotation)
+* [Form Designer events](./form-designer/form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/programmatically-work-with-form-field.md b/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/programmatically-work-with-form-field.md
deleted file mode 100644
index e5151a20c..000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/programmatically-work-with-form-field.md
+++ /dev/null
@@ -1,249 +0,0 @@
----
-layout: post
-title: Programmatically work with form field in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Programmatically work with form field in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Programmatically work with form field
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Programmatically work with form field in Vue Pdfviewer component
-
-The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Add a form field to PDF document programmatically
-
-Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/addformfield-cs2/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/addformfield-cs2/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/addformfield-cs2/index.html" %}
-
-## Edit/Update form field programmatically
-
-Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter toupdateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/updateformfield-cs2/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/updateformfield-cs2/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/updateformfield-cs2/index.html" %}
-
-## Delete form field programmatically
-
-Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/deleteformfield-cs2/app-composition.vue %}
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-{% include code-snippet/pdfviewer/vue/deleteformfield-cs2/app.vue %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/deleteformfield-cs2/index.html" %}
-
-## Saving the form fields
-
-When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke download action using following code snippet.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
- Download
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
- Download
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Printing the form fields
-
-When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke print action using the following code snippet.,
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
- Print
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
- Print
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Open the existing PDF document
-
-We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference.
-
-
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/user-interaction-with-form-fields.md b/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/user-interaction-with-form-fields.md
deleted file mode 100644
index 684487bcf..000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/formdesigner/user-interaction-with-form-fields.md
+++ /dev/null
@@ -1,219 +0,0 @@
----
-layout: post
-title: User interaction with form fields in Vue Pdfviewer component | Syncfusion
-description: Learn here all about User interaction with form fields in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: User interaction with form fields
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# User interaction with form fields in Vue Pdfviewer component
-
-The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Enable or Disable form designer toolbar
-
-We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference.
-
-
-
-## Drag the form field
-
-We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Resize the form field
-
-We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Edit or Update the form field dynamically
-
-The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu.
-
-
-
-## Undo and Redo
-
-We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions.
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
- Undo
- Redo
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
- Undo
- Redo
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
index 60c6a050f..f62429649 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/getting-started-application.md
@@ -1,28 +1,29 @@
---
layout: post
-title: Getting started application with Vue Pdfviewer component | Syncfusion
-description: Checkout and learn about Getting started application with Vue Pdfviewer component of Syncfusion Essential JS 2 and more details.
+title: Getting started with Vue PDF Viewer | Syncfusion
+description: Learn how to scaffold a Vite project and integrate the Syncfusion Vue PDF Viewer using the Composition or Options API.
control: Getting started application
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with Syncfusion® PDF Viewer Component in Vue 3
+# Getting started with Syncfusion PDF Viewer in Vue 3
-This article provides a step-by-step guide for setting up a [Vite](https://vitejs.dev/) project with a JavaScript environment and integrating the Syncfusion® Vue PDF Viewer component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
+This guide explains how to create a Vue 3 application with Vite and integrate the Syncfusion® Vue PDF Viewer component.using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
The `Composition API` is a new feature introduced in Vue.js 3 that provides an alternative way to organize and reuse component logic. It allows developers to write components as functions that use smaller, reusable functions called composition functions to manage their properties and behavior.
The `Options API` is the traditional way of writing Vue.js components, where the component logic is organized into a series of options that define the component's properties and behavior. These options include data, methods, computed properties, watchers, life cycle hooks, and more.
+
## Prerequisites
-[System requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)
+Install Node.js (version 18 or later recommended) along with npm or Yarn before creating the project. Review the [system requirements for Syncfusion® Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements) to confirm supported platforms.
## Set up the Vite project
-A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). To create a new Vite project, use one of the commands that are specific to either NPM or Yarn.
+A recommended approach for beginning with Vue is to scaffold a project using [Vite](https://vitejs.dev/). Run one of the following commands to create a new project.
```bash
npm create vite@latest
@@ -34,15 +35,15 @@ or
yarn create vite
```
-Using one of the above commands will lead you to set up additional configurations for the project as below:
+After running the command, follow the interactive prompts shown below to configure the project:
-1.Define the project name: We can specify the name of the project directly. Let's specify the name of the project as `my-project` for this article.
+1. Define the project name: Specify the project name directly. This guide uses `my-project`.
```bash
? Project name: » my-project
```
-2.Select `Vue` as the framework. It will create a Vue 3 project.
+2. Select `Vue` as the framework to target Vue 3.
```bash
? Select a framework: » - Use arrow-keys. Return to submit.
@@ -55,7 +56,7 @@ Vanilla
Others
```
-3.Choose `JavaScript` as the framework variant to build this Vite project using JavaScript and Vue.
+3. Choose `JavaScript` as the variant to build the Vite project with JavaScript and Vue.
```bash
? Select a variant: » - Use arrow-keys. Return to submit.
@@ -65,7 +66,7 @@ Vanilla
Nuxt ↗
```
-4.Upon completing the aforementioned steps to create the `my-project`, run the following command to install its dependencies:
+4. After the scaffold completes, install the dependencies for `my-project`:
```bash
cd my-project
@@ -79,13 +80,13 @@ cd my-project
yarn install
```
-Now that `my-project` is ready to run with default settings, let's add Syncfusion® components to the project.
+With the scaffold ready, add the Syncfusion Vue PDF Viewer component to the project.
## Add Syncfusion® Vue packages
-Syncfusion® Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Syncfusion® Vue components in the project, install the corresponding npm package.
+Syncfusion Vue component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). Install the Vue PDF Viewer package with one of the following commands.
-This article uses the [Vue PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) as an example. To use the Vue PDF Viewer component in the project, the `@syncfusion/ej2-vue-pdfviewer` package needs to be installed using the following command:
+This tutorial uses the [Vue PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk). Install the `@syncfusion/ej2-vue-pdfviewer` package with the following command:
```bash
npm install @syncfusion/ej2-vue-pdfviewer --save
@@ -99,9 +100,9 @@ yarn add @syncfusion/ej2-vue-pdfviewer
## Import Syncfusion® CSS styles
-You can import themes for the Syncfusion® Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project.
+You can import themes for the Syncfusion Vue components by using CSS or SASS assets from npm packages, a CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator), or [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio). Refer to the [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme) for details about built-in themes and additional options for referencing them in a Vue project.
-In this article, `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the PDF Viewer component and its dependents were imported into the `
+```
+
+> The icons are embedded in the font file used in the above code snippet.
+
+**Step 6: Add the script logic for user interactions.**
+
+Hook up toolbar button clicks and wire up PDF Viewer APIs.
+
+{% tabs %}
+{% highlight js tabtitle="Standalone" %}
+
+import Vue from "vue";
+import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
+ LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
+ Print, TextSelection, TextSearch, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
+import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
+Vue.use(PdfViewerPlugin);
+Vue.use(ToolbarPlugin);
+var toolbar;
+var viewer;
+var currentPageBox;
+
+function updatePageNavigation() {
+ if (viewer.currentPageNumber === 1) {
+ toolbar.enableItems(document.getElementById('previousPage'), false);
+ toolbar.enableItems(document.getElementById('nextPage'), true);
+ } else if (viewer.currentPageNumber === viewer.pageCount) {
+ toolbar.enableItems(document.getElementById('previousPage'), true);
+ toolbar.enableItems(document.getElementById('nextPage'), false);
+ } else {
+ toolbar.enableItems(document.getElementById('previousPage'), true);
+ toolbar.enableItems(document.getElementById('nextPage'), true);
+ }
+}
+
+function onCurrentPageBoxKeypress(event) {
+ if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+ event.preventDefault();
+ return false;
+ } else {
+ var currentPageNumber = parseInt(currentPageBox.value);
+ if (event.which === 13) {
+ if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
+ viewer.navigation.goToPage(currentPageNumber);
+ } else {
+ currentPageBox.value = viewer.currentPageNumber.toString();
+ }
+ }
+ return true;
+ }
+}
+
+function onCurrentPageBoxClicked() { currentPageBox.select(); }
+
+function readFile(args) {
+ let upoadedFiles = args.target.files;
+ if (args.target.files[0] !== null) {
+ let uploadedFile = upoadedFiles[0];
+ if (uploadedFile) {
+ let reader = new FileReader();
+ let fileName = upoadedFiles[0].name;
+ reader.readAsDataURL(uploadedFile);
+ reader.onload = function (e) {
+ let uploadedFileUrl = e.currentTarget.result;
+ viewer.load(uploadedFileUrl, null);
+ viewer.fileName = fileName;
+ };
+ }
+ }
+};
+
+export default Vue.extend({
+ data: function () {
+ return {
+ documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
+ enableToolbar: false,
+ pageNoTemplate: '',
+ pageTextTemplate: 'of 0
'
+ }
+ },
+ PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
+ ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ],
+ methods: {
+ openClicked: function () { document.getElementById('fileUpload').click(); },
+ previousClicked: function () { viewer.navigation.goToPreviousPage(); },
+ nextClicked: function () { viewer.navigation.goToNextPage(); },
+ printClicked: function () { viewer.print.print(); },
+ downloadClicked: function () { viewer.download(); },
+ pageFitClicked: function () { viewer.magnification.fitToPage(); },
+ zoomInClicked: function () { viewer.magnification.zoomIn(); },
+ zoomOutClicked: function () { viewer.magnification.zoomOut(); },
+ pageChange: function () {
+ currentPageBox = document.getElementById('currentPage');
+ currentPageBox.value = viewer.currentPageNumber.toString();
+ updatePageNavigation();
+ },
+ documentLoad: function () {
+ viewer = this.$refs.pdfviewer.ej2Instances;
+ toolbar = this.$refs.toolbar.ej2Instances;
+ currentPageBox = document.getElementById('currentPage');
+ currentPageBox.value = '1';
+ document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
+ currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress);
+ currentPageBox.addEventListener('click', onCurrentPageBoxClicked);
+ document.getElementById('fileUpload').addEventListener('change', readFile, false);
+ updatePageNavigation();
+ }
+ }
+});
+
+{% endhighlight %}
+{% highlight js tabtitle="Server-Backed" %}
+
+import Vue from "vue";
+import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
+ LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
+ Print, TextSelection, TextSearch, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
+import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
+Vue.use(PdfViewerPlugin);
+Vue.use(ToolbarPlugin);
+var toolbar;
+var viewer;
+var currentPageBox;
+
+function updatePageNavigation() {
+ if (viewer.currentPageNumber === 1) {
+ toolbar.enableItems(document.getElementById('previousPage'), false);
+ toolbar.enableItems(document.getElementById('nextPage'), true);
+ } else if (viewer.currentPageNumber === viewer.pageCount) {
+ toolbar.enableItems(document.getElementById('previousPage'), true);
+ toolbar.enableItems(document.getElementById('nextPage'), false);
+ } else {
+ toolbar.enableItems(document.getElementById('previousPage'), true);
+ toolbar.enableItems(document.getElementById('nextPage'), true);
+ }
+}
+
+function onCurrentPageBoxKeypress(event) {
+ if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
+ event.preventDefault();
+ return false;
+ } else {
+ var currentPageNumber = parseInt(currentPageBox.value);
+ if (event.which === 13) {
+ if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
+ viewer.navigation.goToPage(currentPageNumber);
+ } else {
+ currentPageBox.value = viewer.currentPageNumber.toString();
+ }
+ }
+ return true;
+ }
+}
+
+function onCurrentPageBoxClicked() { currentPageBox.select(); }
+
+function readFile(args) {
+ let upoadedFiles = args.target.files;
+ if (args.target.files[0] !== null) {
+ let uploadedFile = upoadedFiles[0];
+ if (uploadedFile) {
+ let reader = new FileReader();
+ let fileName = upoadedFiles[0].name;
+ reader.readAsDataURL(uploadedFile);
+ reader.onload = function (e) {
+ let uploadedFileUrl = e.currentTarget.result;
+ viewer.load(uploadedFileUrl, null);
+ viewer.fileName = fileName;
+ };
+ }
+ }
+};
+
+export default Vue.extend({
+ data: function () {
+ return {
+ serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
+ documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
+ enableToolbar: false,
+ pageNoTemplate: '',
+ pageTextTemplate: 'of 0
'
+ }
+ },
+ PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
+ ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ],
+ methods: {
+ openClicked: function () { document.getElementById('fileUpload').click(); },
+ previousClicked: function () { viewer.navigation.goToPreviousPage(); },
+ nextClicked: function () { viewer.navigation.goToNextPage(); },
+ printClicked: function () { viewer.print.print(); },
+ downloadClicked: function () { viewer.download(); },
+ pageFitClicked: function () { viewer.magnification.fitToPage(); },
+ zoomInClicked: function () { viewer.magnification.zoomIn(); },
+ zoomOutClicked: function () { viewer.magnification.zoomOut(); },
+ pageChange: function () {
+ currentPageBox = document.getElementById('currentPage');
+ currentPageBox.value = viewer.currentPageNumber.toString();
+ updatePageNavigation();
+ },
+ documentLoad: function () {
+ viewer = this.$refs.pdfviewer.ej2Instances;
+ toolbar = this.$refs.toolbar.ej2Instances;
+ currentPageBox = document.getElementById('currentPage');
+ currentPageBox.value = '1';
+ document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
+ currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress);
+ currentPageBox.addEventListener('click', onCurrentPageBoxClicked);
+ document.getElementById('fileUpload').addEventListener('change', readFile, false);
+ updatePageNavigation();
+ }
+ }
+});
+
+{% endhighlight %}
+{% endtabs %}
+
+Sample:
+[https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html)
+
+## See also
+
+* [Primary toolbar customization](./toolbar-customization/primary-toolbar-customization)
+* [Custom toolbar](./toolbar-customization/custom-toolbar)
+* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization)
+* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization)
+* [Mobile toolbar](./toolbar-customization/mobile-toolbar)
+* [Toolbar customization](./how-to/toolbar-customization)
+* [Feature Modules](./feature-module)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar-customization.md
new file mode 100644
index 000000000..c37f0e2d5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/form-designer-toolbar-customization.md
@@ -0,0 +1,354 @@
+---
+layout: post
+title: Form Designer Toolbar Customization in Vue PDF Viewer component | Syncfusion
+description: Learn how to customize the form designer toolbar in the Syncfusion Vue PDF Viewer. Show/hide the toolbar and choose which tools to display and in what order.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form Designer Toolbar Customization
+
+The form designer toolbar can be customized by showing or hiding default items and by controlling the order in which the items appear.
+
+For details about the built-in toolbar and common toolbar options, see the Toolbar article: ../toolbar.md
+
+## Show or hide the form designer toolbar
+
+Show or hide the form designer toolbar programmatically during initialization or at runtime.
+
+Use the enableFormDesigner property or the showFormDesignerToolbar method to toggle visibility.
+
+- enableFormDesigner API: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/#enableformdesigner
+- showFormDesignerToolbar method: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar/#showformdesignertoolbar
+
+The following code snippet explains how to show or hide the toolbar using the showFormDesignerToolbar method.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the server-backed PDF Viewer, add the following serviceUrl in your component and bind it to the PDF Viewer using :serviceUrl="serviceUrl".
+serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## How to customize the form designer toolbar
+
+Choose which tools appear and control their order in the form designer toolbar.
+
+Use ToolbarSettings with the formDesignerToolbarItems property to choose which form design tools are available. The property accepts a list of FormDesignerToolbarItem values. The items you include are both displayed and rendered in the order listed; any items you omit are hidden.
+
+- ToolbarSettings: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/
+- formDesignerToolbarItems: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/#formdesignertoolbaritems
+- FormDesignerToolbarItem: https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formDesignerToolbarItem/
+
+The following example demonstrates how to customize the form designer toolbar by configuring specific tools using FormDesignerToolbarItem.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the server-backed PDF Viewer, add the following serviceUrl in the component and bind it using :serviceUrl="serviceUrl".
+serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+* [Primary toolbar customization](./toolbar-customization/primary-toolbar-customization)
+* [Custom toolbar](./toolbar-customization/custom-toolbar)
+* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization)
+* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization)
+* [Mobile toolbar](./toolbar-customization/mobile-toolbar)
+* [Toolbar customization](./how-to/toolbar-customization)
+* [Feature Modules](./feature-module)
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
new file mode 100644
index 000000000..0c91fa92e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/mobile-toolbar.md
@@ -0,0 +1,305 @@
+---
+layout: post
+title: Mobile Toolbar Interface in Vue PDF Viewer component | Syncfusion
+description: Learn all about the mobile toolbar interface in Syncfusion Vue PDF Viewer component of Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+# Mobile Toolbar Interface in Vue PDF Viewer component
+
+The mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users can also enable desktop toolbar features in mobile mode to access a more extensive set of actions.
+
+## Mobile Mode Toolbar Configuration
+In mobile mode, the toolbar is optimized for small screens, presenting the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
+
+
+
+### Main Toolbar Options
+
+- OpenOption: Tap to load a PDF document.
+- SearchOption: Access the search bar to find text within the document.
+
+
+
+- UndoRedoTool: Quickly undo or redo any annotations made.
+- OrganizePagesTool: Enable or disable page organization features to modify document pages.
+
+
+
+- AnnotationEditTool: Activate or deactivate annotation editing to add or modify annotations.
+
+
+
+N> In mobile mode, the annotation toolbar is displayed at the bottom of the viewer.
+
+### More Options Menu
+When you open the more options menu, you will see additional actions such as:
+
+- DownloadOption: Download the currently opened PDF document.
+- BookmarkOption: View bookmarks within the document.
+
+
+
+## Enable desktop mode in mobile
+
+The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This allows you to bring desktop-like features to the mobile PDF Viewer, providing access to additional toolbar actions typically available on desktop platforms.
+
+### Steps to enable desktop mode
+
+- Set `enableDesktopMode` to true in the configuration.
+- This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Enable scrolling in desktop mode with touch gestures
+
+To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, enable touch gesture scrolling by setting `enableTextSelection` to false.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Standalone)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (Server-Backed)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+## Print option not available in mobile mode
+
+The Print option is not available in mobile mode by default. If you need to use the print functionality on mobile devices, enable the desktop toolbar using the `enableDesktopMode` API.
+
+- Enable Desktop Mode: Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
+- Print Option: Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
+
+N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.
+
+## See also
+
+* [Primary toolbar customization](./toolbar-customization/primary-toolbar-customization)
+* [Custom toolbar](./toolbar-customization/custom-toolbar)
+* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization)
+* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization)
+* [Mobile toolbar](./toolbar-customization/mobile-toolbar)
+* [Toolbar customization](./how-to/toolbar-customization)
+* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar-customization.md
new file mode 100644
index 000000000..5faf32303
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/vue/toolbar-customization/primary-toolbar-customization.md
@@ -0,0 +1,178 @@
+---
+layout: post
+title: Primary Toolbar Customization in Vue PDF Viewer Component | Syncfusion
+description: Learn how to show or hide the built-in primary toolbar and customize it in the Syncfusion Vue PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Primary Toolbar Customization in PDF Viewer Control
+
+The primary toolbar of the PDF Viewer can be customized by rearranging existing items, disabling default items, and adding custom items. New items can be placed at specific index positions among the existing items.
+
+## Show or hide the primary toolbar
+
+Toggle the built-in primary toolbar to create custom toolbar experiences or simplify the UI. In scenarios where a custom toolbar is required, the built-in toolbar can be hidden. Use the enableToolbar property or the showToolbar method to show or hide the primary toolbar.
+
+Show or hide the toolbar using the enableToolbar property:
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the server-backed PDF Viewer in the App.vue file, include the following serviceUrl:
+serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+Within the template, configure the PDF Viewer by adding the :serviceUrl="serviceUrl" attribute.
+
+The following code snippet explains how to show or hide the toolbar using the showToolbar method.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To set up the server-backed PDF Viewer in the App.vue file, include the following serviceUrl:
+serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+Within the template, configure the PDF Viewer by adding the :serviceUrl="serviceUrl" attribute.
+
+## See also
+
+* [Primary toolbar customization](./toolbar-customization/primary-toolbar-customization)
+* [Custom toolbar](./toolbar-customization/custom-toolbar)
+* [Annotation toolbar customization](./toolbar-customization/annotation-toolbar-customization)
+* [Form designer toolbar customization](./toolbar-customization/form-designer-toolbar-customization)
+* [Mobile toolbar](./toolbar-customization/mobile-toolbar)
+* [Toolbar customization](./how-to/toolbar-customization)
+* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md b/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md
deleted file mode 100644
index 5cd77d43c..000000000
--- a/Document-Processing/PDF/PDF-Viewer/vue/toolbar.md
+++ /dev/null
@@ -1,1276 +0,0 @@
----
-layout: post
-title: Toolbar in Vue Pdfviewer component | Syncfusion
-description: Learn here all about Toolbar in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Toolbar
-platform: document-processing
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Built-In Toolbar in Vue Pdfviewer component
-
-The PDF Viewer comes with a powerful built-in toolbar to execute important actions such as page navigation, text search,view mode,download,print,bookmark, and thumbnails.
-
-The following table shows built-in toolbar items and its actions:-
-
-| Option | Description |
-|---|---|
-| OpenOption | This option provides an action to load the PDF documents to the PDF Viewer.|
-| PageNavigationTool | This option provides an action to navigate the pages in the PDF Viewer. It contains GoToFirstPage,GoToLastPage,GotoPage,GoToNext, and GoToLast tools.|
-| MagnificationTool |This option provides an action to magnify the pages either with predefined or user defined zoom factors in the PDF Viewer. Contains ZoomIn, ZoomOut, Zoom, FitPage and FitWidth tools|
-| PanTool | This option provides an action for panning the pages in the PDF Viewer.|
-| SelectionTool | This option provides an action to enable/disable the text selection in the PDF Viewer.|
-| SearchOption | This option provides an action to search a word in the PDF documents.|
-| PrintOption | This option provides an action to print the PDF document being loaded in the PDF Viewer.|
-| DownloadOption |This Download option provides an action to download the PDF document that has been loaded in the PDF Viewer.|
-| UndoRedoTool | This tool provides options to undo and redo the annotation actions performed in the PDF Viewer.|
-| AnnotationEditTool | This tool provides options to enable or disable the edit mode of annotation in the PDF Viewer.|
-| FormDesignerEditTool | This tool provides options to enable or disable the edit mode of form fields in the PDF Viewer.|
-
-## Show/Hide the built-in toolbar
-
-The PDF Viewer has an option to show or hide the complete built-in toolbar. You can achieve this by using following two ways.,
-
-* **Show/Hide toolbar using enableToolbar API as in the following code snippet**
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-hide-cs1/index.html" %}
-
-* **Show/Hide toolbar using showToolbar as in the following code snippet**
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-method-cs1/index.html" %}
-
-## Show/Hide the built-in toolbaritem
-
-The PDF Viewer has an option to show or hide these grouped items in the built-in toolbar.
-
-* **Show/Hide toolbaritem using toolbarSettings as in the following code snippet.**
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-items-cs1/index.html" %}
-
-* **Show/Hide toolbaritem using showToolbaritem as in the following code snippet**
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (~/src/App.vue)" %}
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer** in the app.vue file, include the following `serviceUrl`:
-**serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"**
-Within the `template`, configure the PDF Viewer by adding the `:serviceUrl="serviceUrl"` attribute inside the element.
-
- {% previewsample "Document-Processing/code-snippet/pdfviewer/vue/toolbar/toolbar-items-method-cs1/index.html" %}
-
-
-## Customize Built-In Toolbar
-
-PDF Viewer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
-
-* Add - New items can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Newly added item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/vue/documentation/api/toolbar/clickEventArgs/).
-
-* Show, Hide - Existing items can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbarItem/).
-
-* Enable, Disable - Toolbar items can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
-
-{% tabs %}
-{% highlight html tabtitle="Composition API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Standalone)" %}
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Options API (Server-Backed)" %}
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
->Note : Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
-
-### Align Property
-
-The align property is used to specify the alignment of a toolbar item within the toolbar.
-
-`Left`: Aligns the item to the left side of the toolbar.
-`Right`: Aligns the item to the right side of the toolbar.
-
-### Tooltip Property
-
-The tooltip property is used to set the tooltip text for a toolbar item. Tooltip provides additional information when a user hovers over the item.
-
-### CssClass Property
-
-The cssClass property is used to apply custom CSS classes to a toolbar item. It allows custom styling of the toolbar item.
-
-### Prefix Property
-
-The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the toolbar item.
-
-### ID Property
-
-The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
-
-When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
-These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel` in the context of Syncfusion® PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, you can include these properties to customize the appearance and behavior of each toolbar item.
-
-N> When customizing toolbar items, you have the flexibility to include either icons or text based on your design preference.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples/tree/master/How%20to/Customize%20existing%20toolbar)
-
-## Custom Toolbar
-
-The PDF Viewer provides API for user interactions options provided in it's built-in toolbar. Using this we can create our own User Interface for toolbar actions in application level by hiding the built-in toolbar. The following steps are used to create the custom toolbar for PDF Viewer,
-
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create simple PDF Viewer sample.
-
-**Step 2:** Now, add an HTML div element in template to act as the custom toolbar PDF Viewer using the following code.
-
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 3:** Import and inject the modules used for the custom toolbar,
-
-```ts
-
- import Vue from "vue";
- import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
- LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
- Print, TextSelection, TextSearch, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
- import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
- import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
- Vue.use(CalendarPlugin);
- Vue.use(PdfViewerPlugin);
- Vue.use(ToolbarPlugin);
-
-```
-
-**Step 4:** Hide the built-in toolbar of PDF Viewer using below code snippet,
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-export default Vue.extend({
- data: function () {
- return {
- documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
- enableToolbar: false,
- pageNoTemplate: '',
- pageTextTemplate: '
-
-
-
- of 0
'
- }
- })
-};
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-export default Vue.extend({
- data: function () {
- return {
- serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
- documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
- enableToolbar: false,
- pageNoTemplate: '',
- pageTextTemplate: 'of 0
'
- }
- })
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-**Step 7:** Add the following style to achieve the custom toolbar styling,
-
-```
-
-```
-
->The icons are embedded in the font file used in above code snippet.
-
-**Step 8:** Add the following scripts for performing user interaction in PDF Viewer in code behind
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
- import Vue from "vue";
- import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
- LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
- Print, TextSelection, TextSearch, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
- import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
- import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
- Vue.use(CalendarPlugin);
- Vue.use(PdfViewerPlugin);
- Vue.use(ToolbarPlugin);
- var toolbar;
- var viewer;
- var fileName;
- var currentPageBox;
-
- function updatePageNavigation() {
- if (viewer.currentPageNumber === 1) {
- toolbar.enableItems(document.getElementById('previousPage'), false);
- toolbar.enableItems(document.getElementById('nextPage'), true);
- }
- else if (viewer.currentPageNumber === viewer.pageCount) {
- toolbar.enableItems(document.getElementById('previousPage'), true);
- toolbar.enableItems(document.getElementById('nextPage'), false);
- }
- else {
- toolbar.enableItems(document.getElementById('previousPage'), true);
- toolbar.enableItems(document.getElementById('nextPage'), true);
- }
- }
-
- function onCurrentPageBoxKeypress(event) {
- if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
- event.preventDefault();
- return false;
- }
- else {
- var currentPageNumber = parseInt(currentPageBox.value);
- if (event.which === 13) {
- if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
- viewer.navigation.goToPage(currentPageNumber);
- }
- else {
- currentPageBox.value = viewer.currentPageNumber.toString();
- }
- }
- return true;
- }
- }
-
- function onCurrentPageBoxClicked() {
- currentPageBox.select();
- }
-
- function readFile(args) {
- // tslint:disable-next-line
- let upoadedFiles = args.target.files;
- if (args.target.files[0] !== null) {
- let uploadedFile = upoadedFiles[0];
- fileName = uploadedFile.name;
- if (uploadedFile) {
- let reader = new FileReader();
- reader.readAsDataURL(uploadedFile);
- // tslint:disable-next-line
- reader.onload = function (e) {
- let uploadedFileUrl = e.currentTarget.result;
- viewer.load(uploadedFileUrl, null);
- viewer.fileName = fileName;
- };
- }
- }
- };
-
- export default Vue.extend({
- data: function () {
- return {
- documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
- enableToolbar: false,
- pageNoTemplate: '',
- pageTextTemplate: 'of 0
'
- }
- },
-
- PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
- ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]},
-
- methods: {
- openClicked: function (args) {
- document.getElementById('fileUpload').click();
- },
- previousClicked: function (args) {
- viewer.navigation.goToPreviousPage();
- },
- nextClicked: function (args) {
- viewer.navigation.goToNextPage();
- },
- printClicked: function (args) {
- viewer.print.print();
- },
- downloadClicked: function (args) {
- viewer.download();
- },
- pageFitClicked: function (args) {
- viewer.magnification.fitToPage();
- },
- zoomInClicked: function (args) {
- viewer.magnification.zoomIn();
- },
- zoomOutClicked: function (args) {
- viewer.magnification.zoomOut();
- },
- pageChange: function (args) {
- currentPageBox = document.getElementById('currentPage');
- currentPageBox.value = viewer.currentPageNumber.toString();
- updatePageNavigation();
- },
- documentLoad: function (args) {
- viewer = this.$refs.pdfviewer.ej2Instances;
- toolbar = this.$refs.toolbar.ej2Instances;
- currentPageBox = document.getElementById('currentPage');
- currentPageBox.value = '1';
- document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
- currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress);
- currentPageBox.addEventListener('click', onCurrentPageBoxClicked);
- document.getElementById('fileUpload').addEventListener('change', readFile, false);
- updatePageNavigation();
- }
- }
- });
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
- import Vue from "vue";
- import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
- LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
- Print, TextSelection, TextSearch, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
- import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
- import { CalendarPlugin } from '@syncfusion/ej2-vue-calendars';
- Vue.use(CalendarPlugin);
- Vue.use(PdfViewerPlugin);
- Vue.use(ToolbarPlugin);
- var toolbar;
- var viewer;
- var fileName;
- var currentPageBox;
-
- function updatePageNavigation() {
- if (viewer.currentPageNumber === 1) {
- toolbar.enableItems(document.getElementById('previousPage'), false);
- toolbar.enableItems(document.getElementById('nextPage'), true);
- }
- else if (viewer.currentPageNumber === viewer.pageCount) {
- toolbar.enableItems(document.getElementById('previousPage'), true);
- toolbar.enableItems(document.getElementById('nextPage'), false);
- }
- else {
- toolbar.enableItems(document.getElementById('previousPage'), true);
- toolbar.enableItems(document.getElementById('nextPage'), true);
- }
- }
-
- function onCurrentPageBoxKeypress(event) {
- if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) {
- event.preventDefault();
- return false;
- }
- else {
- var currentPageNumber = parseInt(currentPageBox.value);
- if (event.which === 13) {
- if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) {
- viewer.navigation.goToPage(currentPageNumber);
- }
- else {
- currentPageBox.value = viewer.currentPageNumber.toString();
- }
- }
- return true;
- }
- }
-
- function onCurrentPageBoxClicked() {
- currentPageBox.select();
- }
-
- function readFile(args) {
- // tslint:disable-next-line
- let upoadedFiles = args.target.files;
- if (args.target.files[0] !== null) {
- let uploadedFile = upoadedFiles[0];
- fileName = uploadedFile.name;
- if (uploadedFile) {
- let reader = new FileReader();
- reader.readAsDataURL(uploadedFile);
- // tslint:disable-next-line
- reader.onload = function (e) {
- let uploadedFileUrl = e.currentTarget.result;
- viewer.load(uploadedFileUrl, null);
- viewer.fileName = fileName;
- };
- }
- }
- };
-
- export default Vue.extend({
- data: function () {
- return {
- serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
- documentPath: "https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf",
- enableToolbar: false,
- pageNoTemplate: '',
- pageTextTemplate: 'of 0
'
- }
- },
-
- PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
- ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]},
-
- methods: {
- openClicked: function (args) {
- document.getElementById('fileUpload').click();
- },
- previousClicked: function (args) {
- viewer.navigation.goToPreviousPage();
- },
- nextClicked: function (args) {
- viewer.navigation.goToNextPage();
- },
- printClicked: function (args) {
- viewer.print.print();
- },
- downloadClicked: function (args) {
- viewer.download();
- },
- pageFitClicked: function (args) {
- viewer.magnification.fitToPage();
- },
- zoomInClicked: function (args) {
- viewer.magnification.zoomIn();
- },
- zoomOutClicked: function (args) {
- viewer.magnification.zoomOut();
- },
- pageChange: function (args) {
- currentPageBox = document.getElementById('currentPage');
- currentPageBox.value = viewer.currentPageNumber.toString();
- updatePageNavigation();
- },
- documentLoad: function (args) {
- viewer = this.$refs.pdfviewer.ej2Instances;
- toolbar = this.$refs.toolbar.ej2Instances;
- currentPageBox = document.getElementById('currentPage');
- currentPageBox.value = '1';
- document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount;
- currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress);
- currentPageBox.addEventListener('click', onCurrentPageBoxClicked);
- document.getElementById('fileUpload').addEventListener('change', readFile, false);
- updatePageNavigation();
- }
- }
- });
-
-{% endhighlight %}
-{% endtabs %}
-
-Sample :
-[https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html](https://document.syncfusion.com/demos/pdf-viewer/vue/#/tailwind3/pdfviewer/custom-toolbar.html)
-
-## See also
-
-* [Toolbar customization](./how-to/toolbar-customization)
-* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/cp-command-not-recognized.md b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/cp-command-not-recognized.md
index 4b74ceb6d..f32d9aabf 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/cp-command-not-recognized.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/cp-command-not-recognized.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Troubleshoot 'cp' is not recognized as a command in Vue PDF Viewer control | Syncfusion
-description: Learn here all about how to solve 'cp' is not recognized as a command in Syncfusion Essential JS 2 and more.
+title: Fix "cp is not recognized" on Windows for the Vue PDF Viewer
+description: Use Windows-friendly copy commands to replace Unix cp when copying ej2-pdfviewer-lib assets for the Vue PDF Viewer—examples for CMD (xcopy) and PowerShell (Copy-Item).
control: PDF Viewer
platform: document-processing
documentation: ug
@@ -10,16 +10,23 @@ domainurl: ##DomainURL##
# Troubleshoot error 'cp' is not recognized as a command
-The error message you're seeing, "'cp' is not recognized as an internal or external command," is because the `cp` command you're trying to use is not recognized on Windows command prompt.
+The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required assets.
-On Windows, you should use the `copy` command to copy files and directories instead of `cp`. The equivalent command in Windows to copy a directory and its contents recursively is:
+- CMD (xcopy) — recursive directory copy:
```batch
xcopy /s /e /i .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib public\js\ej2-pdfviewer-lib
```
-Here, `/s` indicates that you want to copy directories and subdirectories recursively. Also, note that Windows uses backslashes `\` as path separators, not forward slashes `/`.
+- PowerShell (Copy-Item) — recursive directory copy:
-Make sure to run this command in the appropriate directory where you want to perform the copy operation.
+```powershell
+Copy-Item .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\src\ej2-pdfviewer-lib -Recurse -Force
+```
+
+Notes:
+- Run the command from the project root so the node_modules path resolves correctly.
+- Windows paths use backslashes (\). Adjust paths if your project structure differs.
+- Ensure sufficient permissions to write to the destination folder.
-**Note:** If you encounter other issues or error messages while working with the Windows Command Prompt, make sure to double-check your command syntax and file paths for accuracy. Additionally, ensure that you have the necessary permissions to perform the copy operation in the specified directories.
\ No newline at end of file
+For cross-platform scripts in package.json, consider tools such as "shx" or "copyfiles" to avoid OS-specific commands.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/document-loading-issues.md
index 16b3f32b5..4628ebb5b 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/document-loading-issues.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/document-loading-issues.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Document Loading Issues in Version 23.1 or Newer Vue Pdfviewer Component
-description: Learn here all about troubleshooting Document Loading Issues in Version 23.1 or newer in Vue Pdfviewer of Syncfusion Essential JS 2 and more.
+title: Fix document loading issues in v23.1+ for the Vue PDF Viewer component
+description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the Vue PDF Viewer.
control: PDF Viewer
platform: document-processing
documentation: ug
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Document Loading Issues in Version 23.1 or Newer
-If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue:
+If the document does not render in the viewer when using version 23.1 or newer, follow these steps:
-1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is Essential® for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load.
+1. Call `pdfviewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly.
-```typescript
+```html
@@ -28,18 +28,12 @@ documentLoad: function (args) {
}
```
-2. **Verify Document Source**: Confirm that the document source or URL you're trying to display is valid and accessible. Incorrect URLs or document paths can lead to loading issues.
-
-3. **Network Connectivity**: Ensure that your application has a stable network connection. Document rendering may fail if the viewer can't fetch the document due to network issues.
-
-4. **Console Errors**: Use your browser's developer tools to check for any error messages or warnings in the console. These messages can provide insights into what's causing the document not to load.
-
-5. **Loading Sequence**: Make sure that you're calling `viewer.dataBind()` and initiating document loading in the correct sequence. The viewer should be properly initialized before attempting to load a document.
-
-7. **Update Viewer**: Ensure that you're using the latest version of the viewer library or framework. Sometimes, issues related to document loading are resolved in newer releases.
-
-8. **Cross-Origin Resource Sharing (CORS)**: If you're loading documents from a different domain, ensure that CORS headers are correctly configured to allow cross-origin requests.
-
-9. **Content Security Policies (CSP)**: Check if your application's Content Security Policy allows the loading of external resources, as this can affect document loading. Refer [here](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) to troubleshoot.
+2. Verify the document source. Ensure the URL or path is valid and accessible.
+3. Check network connectivity. The viewer cannot fetch the document without a stable connection.
+4. Inspect console errors. Use browser developer tools to identify issues.
+5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`.
+6. Update to the latest viewer version. Issues may be resolved in newer releases.
+7. Configure CORS correctly for cross-domain documents.
+8. Content Security Policies (CSP): Check if your application's Content Security Policy allows the loading of external resources, as this can affect document loading. Refer [here](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) to troubleshoot.
By following these troubleshooting steps, you should be able to address issues related to document loading in version 23.1 or newer, ensuring that your documents render correctly in the viewer.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/troubleshooting.md b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/troubleshooting.md
index 2ddd569ec..8c81981e0 100644
--- a/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/troubleshooting.md
+++ b/Document-Processing/PDF/PDF-Viewer/vue/troubleshooting/troubleshooting.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Manually Copy Files from node_modules in Vue PDF Viewer component | Syncfusion
-description: Learn here all about why do i have to manually copy files from node_modules in Syncfusion Essential JS 2 and more.
+title: Why manual copy from node_modules is required in the Vue PDF Viewer
+description: Understand why certain lazy-loaded assets from ej2-pdfviewer-lib must be copied from node_modules when not using a bundler, how pdfium.js is handled, and when to reference assets directly in the Vue PDF Viewer.
control: PDF Viewer
platform: document-processing
documentation: ug
@@ -10,8 +10,11 @@ domainurl: ##DomainURL##
# Why Do I Have to Manually Copy Files from node_modules into My App?
-PDF Viewer offers flexibility across different build systems, remaining both framework-agnostic and independent of bundlers. Even without a bundler, you can seamlessly integrate the PDF Viewer by directly linking its assets through standard HTML tags.
+The PDF Viewer supports multiple build systems and can work without a bundler by referencing assets directly using HTML tags. To keep load times efficient, the library is split into smaller modules and uses lazy loading for certain assets.
-Moreover, our codebase is meticulously divided into distinct files, enabling selective loading of components when required. This strategic approach to lazy loading prevents unwieldy file sizes that a single bundle might impose, which is often impractical.
+- The primary entry point, "pdfium.js", is typically included by bundlers automatically.
+- Additional resources under "ej2-pdfviewer-lib" are loaded on demand at runtime. Because the host app does not know about these lazy-loaded files, they are not automatically emitted by bundlers or available to static servers unless they are copied and referenced.
-While 'pdfium.js,' the primary entry point, is commonly bundled automatically, the supplementary assets from 'ej2-pdfviewer-lib' need to be manually incorporated due to their on-demand loading. This necessity arises because the host application lacks inherent awareness of these assets' lazy loading behavior.
\ No newline at end of file
+When not using a bundler (or when the bundler does not emit these assets), copy the required files from node_modules to a web-accessible path in your app (for example, "src/ej2-pdfviewer-lib") and reference them accordingly. This ensures the viewer can fetch the lazy-loaded assets when needed and prevents runtime 404 errors.
+
+If a bundler is configured to emit static assets from node_modules, verify that the output contains the necessary files from "@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib" and that your app serves them from a public path. Otherwise, perform a manual copy step during your build process.
\ No newline at end of file