From 977943be716b7dcdf08ccac3f46a686085d4ec57 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Wed, 15 Oct 2025 18:18:46 +0530 Subject: [PATCH 01/16] 986927: UG Docs Revamp: Annotation Events, Toolbar Restructure & Feature Enhancements for Vue --- .../PDF/PDF-Viewer/vue/annotation/comments.md | 144 +++++++++++++----- .../vue/annotation/free-text-annotation.md | 96 ++++++------ .../vue/annotation/ink-annotation.md | 63 ++++---- .../vue/annotation/line-angle-constraints.md | 44 +++--- .../vue/annotation/measurement-annotation.md | 54 +++---- .../vue/annotation/shape-annotation.md | 50 +++--- .../vue/annotation/signature-annotation.md | 50 +++--- .../vue/annotation/stamp-annotation.md | 32 ++-- .../vue/annotation/sticky-notes-annotation.md | 57 ++++--- .../vue/annotation/text-markup-annotation.md | 80 +++++----- 10 files changed, 370 insertions(+), 300 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md index fc224fce0..e6c919201 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md @@ -1,7 +1,7 @@ --- 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. +description: Learn about comments, replies, and status in the Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. control: Comments platform: document-processing documentation: ug @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Comments in Vue Pdfviewer component -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 -![Comments](../images/commentannot.png) +![Comment panel overview](../images/commentannot.png) ## 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. -![AddingComments](../images/stickycomment.png) +![Adding comments to a sticky note annotation](../images/stickycomment.png) ### 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. -![CommentStatus](../images/commentstatus.png) +![Set status for a comment](../images/commentstatus.png) ### 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. -![CommentEdit](../images/commentsedit.png) +![Edit comments and replies](../images/commentsedit.png) ### 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. ![CommentDelete](../images/commentsdelete.png) +## 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..e5823e4da 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,7 +1,7 @@ --- 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. +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 @@ -10,21 +10,21 @@ domainurl: ##DomainURL## # Free text annotation in Vue Pdfviewer component -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. -![FreeTextAnnotation](../images/freetext_tool.png) +![Free text tool in the annotation toolbar](../images/freetext_tool.png) -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 %} @@ -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)" %} @@ -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)" %} @@ -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 -![FontFamily](../images/fontfamily.png) +Edit the font family by selecting a font in the Font Family tool. -### Editing font size +![Change font family](../images/fontfamily.png) -The font size of the annotation can be edited by selecting the desired size in the Font Size tool. +### Edit font size -![FontSize](../images/fontsize.png) +Edit the font size by selecting a size in the Font Size tool. -### Editing font color +![Change font size](../images/fontsize.png) -The font color of the annotation can be edited using the color palette provided in the Font Color tool. +### Edit font color -![FontColor](../images/fontcolor.png) +Edit the font color using the color palette in the Font Color tool. -### Editing the text alignment +![Change font color](../images/fontcolor.png) -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. ![FreeTextAnnotation](../images/textalign.png) -### 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. -![FontStyle](../images/fontstyle.png) +![Change text styles](../images/fontstyle.png) -### 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. -![FillColor](../images/fillcolor.png) +![Change fill color](../images/fillcolor.png) -### 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. -![StrokeColor](../images/fontstroke.png) +![Change stroke color](../images/fontstroke.png) -### 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. -![FontThickness](../images/fontthickness.png) +![Change border thickness](../images/fontthickness.png) -### 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. -![FontOpacity](../images/fontopacity.png) +![Change opacity](../images/fontopacity.png) -## 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)" %} 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..ce22a3f47 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md @@ -1,8 +1,9 @@ --- 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 +description: Ink annotation in Vue PDF Viewer control | Syncfusion +description: Learn about ink annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,21 +11,21 @@ domainurl: ##DomainURL## # Ink annotation in Vue Pdfviewer 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. -![InkAnnotation](../images/ink_annotation.png) +![Ink annotations overview](../images/ink_annotation.png) -## 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. -![InkTool](../images/ink_tool.png) +![Ink tool in the annotation toolbar](../images/ink_tool.png) -Refer to the following code sample to switch to the ink annotation mode. +The following example switches to ink annotation mode. {% tabs %} @@ -193,11 +194,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)" %} @@ -379,11 +380,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)" %} @@ -581,33 +582,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. -![InkStrokeColor](../images/ink_strokecolor.png) +![Change ink stroke color](../images/ink_strokecolor.png) -### 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. -![InkThickness](../images/ink_thickness.png) +![Change ink thickness](../images/ink_thickness.png) -### 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. -![InkOpacity](../images/ink_opacity.png) +![Change ink opacity](../images/ink_opacity.png) -## 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)" %} 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..fbead7218 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,19 @@ --- 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: Line angle constraints in Vue PDF Viewer | Syncfusion +description: Learn to add, edit, delete, and configure highlight, underline, strikethrough, and squiggly text markup annotations programmatically. 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: @@ -95,48 +96,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/syncfusion/ej2-Vue-samples/tree/master/src/app/pdfviewer) 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..edfd71ee9 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md @@ -1,8 +1,8 @@ --- 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## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Measurement annotation in Vue Pdfviewer component -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 -![CalibrateAnnotation](../images/calibrate_annotation.png) +![Measurement annotations overview](../images/calibrate_annotation.png) ## Adding measurement annotations to the PDF document The measurement annotations can be added to the PDF document using the annotation toolbar. * 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. ![CalibrateTool](../images/calibrate_tool.png) -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)" %} @@ -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)" %} @@ -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)" %} @@ -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. ![CalibrateFillColor](../images/calibrate_fillcolor.png) -### 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. ![CalibrateStrokeColor](../images/calibrate_stroke.png) -### 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. ![CalibrateThickness](../images/calibrate_thickness.png) -### Editing opacity +### Edit opacity The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. ![CalibrateOpacity](../images/calibrate_opacity.png) -### 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. ![CalibrateProperty](../images/calibrate_lineprop.png) -## 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)" %} 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..bac45fea8 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md @@ -1,8 +1,8 @@ --- 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 +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## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Shape annotation in Vue Pdfviewer component -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 -![ShapeAnnotation](../images/shape_annot.png) +![Shape annotations overview](../images/shape_annot.png) ## 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. -![ShapeTool](../images/shape_toolbar.png) +![Shape annotation toolbar](../images/shape_toolbar.png) Refer to the following code sample to switch to the circle annotation mode. @@ -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)" %} @@ -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)" %} @@ -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. -![ShapeFillColor](../images/shape_fillColor.png) +![Edit fill color for shapes](../images/shape_fillColor.png) ### Editing stroke color The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. -![ShapeStrokeColor](../images/shape_strokecolor.png) +![Edit stroke color for shapes](../images/shape_strokecolor.png) ### Editing thickness The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool. -![ShapeThickness](../images/shape_thickness.png) +![Edit thickness for shapes](../images/shape_thickness.png) ### Editing opacity The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. -![ShapeOpacity](../images/shape_opacity.png) +![Edit opacity for shape](../images/shape_opacity.png) ### 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. -![ShapeProperty](../images/shape_lineproperty.png) +![Line properties dialog](../images/shape_lineproperty.png) -## 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)" %} 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..177d1422d 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. -![HandWritten Signature](../images/select_sign.png) +![Open the handwritten signature panel](../images/select_sign.png) -* Draw the signature in the signature panel. +* Draw the signature in the panel. -![HandWritten Signature](../images/add_sign.png) +![Draw the handwritten signature](../images/add_sign.png) -* 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. -![HandWritten Signature](../images/create_sign.png) +![Place the handwritten signature on the page](../images/create_sign.png) Refer to the following code sample to switch to the handwritten signature mode programmatically. @@ -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" %} @@ -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)" %} @@ -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. -![SignatureStrokeColor](../images/change_stroke.png) +![Change signature stroke color](../images/change_stroke.png) -### 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. -![SignatureThickness](../images/change_thickness.png) +![Change signature border thickness](../images/change_thickness.png) -### 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. -![SignatureOpacity](../images/change_opacity.png) \ No newline at end of file +![Change signature opacity](../images/change_opacity.png) \ 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..f92d3aa36 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/stamp-annotation.md @@ -1,7 +1,7 @@ --- 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 @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Stamp annotation in Vue Pdfviewer component -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 ![StampAnnotation](../images/stamp_annot.png) -## 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. ![StampTool](../images/stamp_tool.png) -* Select the annotation type to be added to the page in the pop-up. +* Select a stamp type to enable its annotation mode. ![StampPopup](../images/selectstamp_annot.png) -* 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 %} @@ -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)" %} @@ -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. ![CustomStamp](../images/customStamp.png) -* 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 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..58146d3ec 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,8 +1,8 @@ --- 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## @@ -10,34 +10,33 @@ domainurl: ##DomainURL## # Sticky notes annotation in Vue Pdfviewer component -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. ![StickyNotesAnnotation](../images/stickynotes_annotation.png) -## 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. ![StickyNotesTool](../images/stickynotes_tool.png) -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. ![StickyNotesComment](../images/stickynotes_comment.png) -## 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)" %} @@ -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)" %} @@ -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. ![StickyNotesOpacity](../images/sticky_opacity.png) ### 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. ![StickyNotesComment](../images/commentPanel.png) -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. ![StickyNotesEdit](../images/sticky_editbtn.png) -## 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 %} @@ -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)" %} 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..6058fa455 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,8 +1,8 @@ --- 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## @@ -10,30 +10,30 @@ domainurl: ##DomainURL## # Text markup annotation in Vue Pdfviewer 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. ![Alt text](../images/text_markup_annotation.png) -## 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. ![Alt text](../images/highlight_context.png) 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**. ![Alt text](../images/highlight_button.png) -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. @@ -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)" %} @@ -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. ![Alt text](../images/underline_context.png) 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**. ![Alt text](../images/underline_button.png) @@ -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)" %} @@ -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. ![Alt text](../images/strikethrough_context.png) 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**. ![Alt text](../images/strikethrough_button.png) @@ -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: @@ -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. ![Alt text](../images/squiggly_context.png) From 742d13d484db61eecdc6735aa58b9ae27a4f6160 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Thu, 16 Oct 2025 13:55:05 +0530 Subject: [PATCH 02/16] 986927: Refining the Form designer folder --- Document-Processing-toc.html | 1 + .../form-designer/create-programmatically.md | 2411 +---------------- .../create-with-user-interface-interaction.md | 52 +- .../vue/form-designer/form-field-events.md | 2 +- .../PDF/PDF-Viewer/vue/form-filling.md | 138 + 5 files changed, 202 insertions(+), 2402 deletions(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/form-filling.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 7ecf8be2c..44466897b 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -820,6 +820,7 @@
  • Form Field events
    • +
  • Form Filling
  • Organize Pages
  • Print
  • Download
    • 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..9dfa678bb 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 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: +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)" %} @@ -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)" %} @@ -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)" %} @@ -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. ![Alt text](../images/saveformfield.gif) -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. ![Alt text](../images/printformfield.gif) -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. -![Alt text](../images/openexistingpdf.gif) +![Open a PDF with existing form fields](../images/openexistingpdf.gif) ## 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 %} - -![Password Field Settings](../images/password.png) - -### 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 %} - -![CheckBox Field Settings](../images/checkbox.png) - -### 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 %} - - -![RadioButton Field Settings](../images/radiobutton.png) - -### 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 %} - -![ListBox Field Settings](../images/listbox.png) - -### 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 %} - -![DropDown Field Settings](../images/dropdown.png) +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..7a1a09d55 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,8 +1,8 @@ --- 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 TypeScript PDF Viewer component | Syncfusion +description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion TypeScript PDF Viewer component. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -10,20 +10,20 @@ domainurl: ##DomainURL## # Create form fields with UI interaction 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: +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. -![Alt text](../images/addformfield.gif) +![Add a form field using the toolbar](../images/addformfield.gif) ## 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. -![Alt text](../images/dragformfield.gif) +![Drag a selected form field in the PDF Viewer](../images/dragformfield.gif) ## 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. -![Alt text](../images/resizeformfield.gif) +![Resize a selected form field in the PDF Viewer](../images/resizeformfield.gif) ## 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. -![Alt text](../images/generalproperties.png) +![Form field general properties dialog](../images/generalproperties.png) -![Alt text](../images/appearanceproperties.png) +![Form field appearance properties dialog](../images/appearanceproperties.png) -![Alt text](../images/dropdownproperties.png) +![DropDown field properties dialog](../images/dropdownproperties.png) ## 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. -![Alt text](../images/clipboardformfield.png) +![Clipboard options for a form field in the context menu](../images/clipboardformfield.png) ## 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 15ae44d5e..c61704c17 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# PDF Viewer Form Field events +# PDF Viewer Form Field events in Vue The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are: 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..c12634a9d --- /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 + +![Form filling in Vue PDF Viewer](./images/form-filling.png) + +## Disabling form fields + +The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer. + +{% tabs %} +{% highlight html tabtitle="Composition API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (~/src/App.vue)" %} + + + + + +{% endhighlight %} +{% endtabs %} + +## Add a handwritten signature to a signature field + +Add a handwritten signature to a signature field by following these steps: + +* Click the signature field in the PDF document to open the signature panel. + +![Signature field in Vue PDF Viewer](./images/form-filling-signature.png) + +* Draw the signature in the signature panel. + +![Signature panel in Vue PDF Viewer](./images/form-filling-signature-dialog.png) + +* Select **CREATE**. The drawn signature is added to the signature field. + +![Signature added in Vue PDF Viewer](./images/form-filling-signature-signed.png) + +## Delete a signature from a signature field + +Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. + +![Deleting a signature in Vue PDF Viewer](./images/form-filling-signature-del.png) + +## Export and import form fields + +The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported: + +* FDF +* XFDF +* JSON + +For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/form-designer/create-programmatically#export-and-import-form-fields). + +## See also + +* [Handwritten signature in Vue PDF Viewer](./annotations/signature-annotation) +* [Form Designer events](./form-designer/form-field-events) From d2120ebd484ea37b4c107321a02399851cbd0db9 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Thu, 16 Oct 2025 16:50:03 +0530 Subject: [PATCH 03/16] 986927: Refining the Openpdf File and save pdf file --- .../programmatically-work-with-form-field.md | 249 ------------------ .../user-interaction-with-form-fields.md | 219 --------------- .../vue/open-pdf-file/from-amazon-s3.md | 36 +-- .../from-azure-active-directory.md | 92 ++++--- .../open-pdf-file/from-azure-blob-storage.md | 34 +-- .../from-box-cloud-file-storage.md | 49 ++-- .../from-dropbox-cloud-file-storage.md | 101 ++++--- .../from-google-cloud-storage.md | 24 +- .../vue/open-pdf-file/from-google-drive.md | 22 +- .../vue/open-pdf-file/from-one-drive.md | 24 +- .../vue/save-pdf-file/to-amazon-s3.md | 34 +-- .../to-azure-active-directory.md | 58 ++-- .../save-pdf-file/to-azure-blob-storage.md | 40 +-- .../to-box-cloud-file-storage.md | 27 +- .../to-dropbox-cloud-file-storage.md | 44 ++-- .../save-pdf-file/to-google-cloud-storage.md | 24 +- .../vue/save-pdf-file/to-google-drive.md | 28 +- .../vue/save-pdf-file/to-one-drive.md | 34 +-- 18 files changed, 328 insertions(+), 811 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/formdesigner/programmatically-work-with-form-field.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/vue/formdesigner/user-interaction-with-form-fields.md 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. - -![Alt text](../images/saveformfield.gif) - -You can invoke download action using following code snippet. - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - - - -{% 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. - -![Alt text](../images/printformfield.gif) - -You can invoke print action using the following code snippet., - -{% tabs %} -{% highlight html tabtitle="Composition API (~/src/App.vue)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - - - -{% 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. - -![Alt text](../images/openexistingpdf.gif) \ 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. - -![Alt text](../images/addformfield.gif) - -## 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. - -![Alt text](../images/dragformfield.gif) - -## 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. - -![Alt text](../images/resizeformfield.gif) - -## 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. - -![Alt text](../images/generalproperties.png) - -![Alt text](../images/appearanceproperties.png) - -![Alt text](../images/dropdownproperties.png) - -## 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. - -![Alt text](../images/clipboardformfield.png) - -## 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)" %} - - - - - -{% endhighlight %} -{% highlight html tabtitle="Options API (~/src/App.vue)" %} - - - - - -{% endhighlight %} -{% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-amazon-s3.md index b831b7eec..382c2a9d2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-amazon-s3.md @@ -1,26 +1,26 @@ --- layout: post -title: Open PDF files from AWS S3 in Vue Pdfviewer component | Syncfusion -description: Learn about how to load PDF files from AWS S3 in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Open PDF files from AWS S3 +title: Open PDF from AWS S3 in Vue PDF Viewer | Syncfusion +description: Learn how to load PDFs from AWS S3 in the Syncfusion Vue PDF Viewer component using standalone and server-backed approaches. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Open PDF file from AWS S3 +# Open PDF from AWS S3 -PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3. +The Vue PDF Viewer component supports loading PDF files from AWS S3 using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. -## Using Standalone PDF Viewer +## Using the standalone PDF Viewer -To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below. +Follow these steps to load a PDF from AWS S3 in the standalone PDF Viewer. **Step 1:** Create a PDF Viewer sample in Vue -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF Viewer sample in Vue. This will set up the basic structure of your PDF Viewer application. +Follow the instructions in the [getting started guide (Vue)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a basic PDF Viewer sample. -**Step 2:** Modify the `src/App.vue` File in the Vue Project +**Step 2:** Modify the `src/App.vue` file in the Vue project 1. Import the required namespaces at the top of the file: @@ -34,7 +34,7 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu {% endhighlight %} {% endtabs %} -2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3. +2. Configure the AWS SDK with the region, access key, and secret access key so the application can interact with S3. N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account. @@ -52,7 +52,7 @@ N> Replace **Your Region** with the actual Region of your AWS S3 account and **Y {% endhighlight %} {% endtabs %} -3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion® PDF Viewer then load Base64 string generated into the viewer.load method. +3. Set parameters for fetching the PDF document from S3, including the bucket name and file key. Use S3.getObject to retrieve the document, convert it to a Base64 string, and pass it to viewer.load in the Syncfusion® PDF Viewer. N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account. @@ -97,13 +97,13 @@ N> The **npm install aws-sdk** package must be installed in your application to [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone). -## Using Server-Backed PDF Viewer +## Using the server-backed PDF Viewer -To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. -**Step 1:** Create a Simple PDF Viewer Sample in Vue +**Step 1:** Create a PDF Viewer sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Create a basic PDF Viewer sample by following the instructions in the [getting started guide (Vue)](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started). **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project @@ -186,7 +186,7 @@ public async Task Load([FromBody] Dictionary json } ``` -6. Open the `app settings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -205,9 +205,9 @@ public async Task Load([FromBody] Dictionary json N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name -**Step 3:** Set the PDF Viewer Properties in Vue PDF viewer component +**Step 3:** Configure the PDF Viewer component -Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your AWS S3 bucket to the documentPath property. +Set the serviceUrl to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from AWS S3. Ensure the document name matches an object in your bucket. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-active-directory.md index 71ba6499d..53d518089 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-active-directory.md @@ -1,119 +1,117 @@ --- layout: post -title: Open PDF files from AAD in Vue Pdfviewer component | Syncfusion -description: Learn about how to Open PDF files from AAD in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Open PDF files from AAD +title: Open PDF from Azure Active Directory in Vue PDF Viewer | Syncfusion +description: Learn how to load and save PDFs using Azure Active Directory (AAD) with the Syncfusion Vue PDF Viewer component. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Open PDF From Azure Active Directory in Viewer +# Open PDF from Azure Active Directory -### **Overview** +### Overview -The Syncfusion® PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer. +The Vue PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps explain how to securely load and store PDFs using AAD. -### **Steps to Open the PDF File from Azure Active Directory** +### Steps to open a PDF from Azure Active Directory --- -### **Step 1: Register an Application in Azure Active Directory (AAD)** +### Step 1: Register an application in Azure Active Directory (AAD) -1. **Go to the Azure Portal**: +1. **Go to the Azure portal**: - Navigate to [Azure Portal](https://portal.azure.com). -2. **Register your Application**: +2. **Register your application**: - In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**. - - Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**. + - Register your application and note the **Application (client) ID** and **Directory (tenant) ID**. ![app-registration](../images/app-registration.png) -3. **Create a Client Secret**: +3. **Create a client secret**: - In the registered application, go to **Certificates & secrets**. - Click **New client secret**. - - Provide a description and set an expiration period. - - Click **Add**. + - Provide a description, set an expiration period, and click **Add**. - Copy the client secret value immediately, as it will be hidden later. Store it securely. ![client-secret](../images/client-secret.png) --- -### **Step 2: Create the Azure Storage Account** +### Step 2: Create the Azure Storage account -1. **Create a Storage Account**: - - In the Azure portal, use the search bar to search for **Storage accounts**. - - Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.). +1. **Create a storage account**: + - In the Azure portal, search for **Storage accounts**. + - Create a new storage account by entering the required details (for example, name, location, resource group). ![storage-account](../images/storage-account.png) --- -### **Step 3: Assign Role to the Application** +### Step 3: Assign a role to the application -1. **Go to your Storage Account**: - - Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account. +1. **Open your storage account**: + - Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage account. -2. **Assign Role**: +2. **Assign a role**: - Assign the **Storage Blob Data Contributor** role to your registered application. - - In the **Assign access to** dropdown, select **User, group, or service principal**. - - Click on **Select members** and search for your registered application by name or client ID. - - Select your application and click **Select**. - - Click **Review + assign** to finalize the role assignment. + - In the **Assign access to** drop-down, choose **User, group, or service principal**. + - Click **Select members**, search for your registered application by name or client ID, choose it, and click **Select**. + - Click **Review + assign** to complete the role assignment. ![add-role](../images/add-role.png) --- -### **Step 4: Upload the PDF Document to the Azure Storage Account** +### Step 4: Upload the PDF to Azure Storage -1. **Navigate to Data Storage**: +1. **Navigate to data storage**: - In the Azure portal, go to **Data storage** > **Containers**. -2. **Upload the PDF File**: +2. **Upload the PDF file**: - Create a new container and upload the PDF document you want to access in the PDF Viewer. ![upload-pdf](../images/upload-pdf.png) --- -### **Step 5: Server-Side Configuration** +### Step 5: Server-side configuration -1. **Configure Server-Side Code**: - - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file: +1. **Configure server-side code**: + - Open the server-side application (for example, ASP.NET Core) and configure the following details in the `PdfViewerController` file: - `tenantId` (your Azure AD tenant ID), - `clientId` (your registered application client ID), - `clientSecret` (your registered application client secret), - `blobServiceEndpoint` (your storage account blob service URL), - `containerName` (your container name in Azure Blob Storage). -2. **Run the Web Service**: - - After configuring the necessary details, run the web service to make it accessible. +2. **Run the web service**: + - After saving the configuration values, run the web service so that the Vue application can reach it. --- -### **Step 6: Client-Side Configuration** +### Step 6: Client-side configuration -1. **Run the Vue Sample**: - - Start the Vue sample that includes the Syncfusion® PDF Viewer. +1. **Run the Vue sample**: + - Start the Vue sample that includes the Syncfusion PDF Viewer component. -2. **Load PDF from AAD**: - - When the user clicks the **Load from AAD** button, the Vue client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. - - The server will retrieve the PDF from Azure, convert it to a base64 string, and return it to the client. +2. **Load a PDF from AAD**: + - When the user selects **Load From AAD**, the Vue client sends an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage. + - The server retrieves the PDF from Azure, converts it to a Base64 string, and returns it to the client. -3. **Display PDF in the PDF Viewer**: - - Once the base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method. +3. **Display the PDF in the viewer**: + - After the Base64 string is received, the PDF Viewer loads the document by calling `viewer.load()`. --- -### **Step 7: Save the PDF Document to Azure** +### Step 7: Save the PDF to Azure 1. **Save PDF to AAD**: - - The user can click the **Save to AAD** button to upload any modifications to the PDF back to Azure Blob Storage. - - This action sends the modified PDF to the server, where it is converted into a byte array and saved to the specified Azure Blob container. + - When the user selects **Save To AAD**, the application uploads any PDF changes back to Azure Blob Storage. + - The server converts the updated PDF into a byte array and writes it to the specified Azure Blob container. --- -### **Server-Side Code Snippets** +### Server-side code ```csharp string tenantId = "Provide the tenant id here"; string clientId = "Provide the clientid here"; @@ -169,7 +167,7 @@ public async Task SaveToAAD([FromBody] Dictionary -### **Client-side Code Snippets** +### Client-side code {% tabs %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-blob-storage.md index 62907f07b..cb7c3d9b7 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-azure-blob-storage.md @@ -10,19 +10,19 @@ domainurl: ##DomainURL## # Open PDF file from Azure Blob Storage -PDF Viewer allows to load PDF file from Azure Blob Storage using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Azure Blob Storage. +The Vue PDF Viewer component supports loading PDF files from Azure Blob Storage using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. -## Using Standalone PDF Viewer +## Using the standalone PDF Viewer -To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from Azure Blob Storage in the standalone PDF Viewer. **Step 1:** Create a Simple PDF Viewer Sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF Viewer sample in Vue. This will give you a basic setup of the PDF Viewer component. -**Step 2:** Modify the `src/App.vue` File in the Vue Project +**Step 2:** Modify the `src/App.vue` file in the Vue project -1. Import the required namespaces at the top of the file: +1. Import the required modules at the top of the file: {% tabs %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} @@ -34,9 +34,9 @@ Start by following the steps provided in this [link](https://help.syncfusion.com {% endhighlight %} {% endtabs %} -2. Use the `SASUrl` to fetch the file details and convert the response object into an `ArrayBuffer`. Convert the `ArrayBuffer` into a `Uint8Array` for easier manipulation of the binary data. Then, convert the `Uint8Array` into a Base64 string and load this Base64 string into the PDF viewer. +2. Use the `SASUrl` to fetch the PDF file, convert the response to an `ArrayBuffer`, and then transform it into a `Uint8Array`. Convert the `Uint8Array` into a Base64 string and load it into the PDF Viewer. -N> Replace **Your SAS Url in Azure** with the actual SAS url for your Azure Blob Storage account. +N> Replace **Your SAS Url in Azure** with the actual SAS URL for your Azure Blob Storage account. {% tabs %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} @@ -68,13 +68,13 @@ N> The **npm install @azure/storage-blob** package must be installed in your app [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone). -## Using Server-Backed PDF Viewer +## Using the server-backed PDF Viewer -To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from Azure Blob Storage using the server-backed PDF Viewer. **Step 1:** Create a Simple PDF Viewer Sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF Viewer sample in Vue. This will give you a basic setup of the PDF Viewer component. **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project @@ -90,7 +90,7 @@ using Azure.Storage.Blobs; using Azure.Storage.Blobs.Specialized; ``` -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields +4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the values from the configuration to the corresponding fields: ```csharp private readonly string _storageConnectionString; @@ -105,7 +105,7 @@ public PdfViewerController(IConfiguration configuration, ILogger jsonObject) } ``` -6. Open the `app settings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open the `appsettings.json` file in your web service project and add the following lines below the existing `"AllowedHosts"` configuration: ```json { @@ -157,11 +157,11 @@ public IActionResult Load([FromBody] Dictionary jsonObject) } ``` -N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name +N> Replace the placeholders with your actual values: Azure storage connection string and container name. -**Step 3:** Set the PDF Viewer Properties in Vue PDF viewer component +**Step 3:** Configure the PDF Viewer component -Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Azure Blob Storage. Ensure that you correctly pass the document name from the files available in your azure container to the documentPath property. +Set the `serviceUrl` property of the PDF Viewer component to your web service endpoint (replace `https://localhost:44396/pdfviewer` with the actual URL of your server). Set the `documentPath` property to the PDF file name to load from Azure Blob Storage. Ensure the document name exists in your Azure container. {% tabs %} {% highlight html tabtitle="Composition API (Server-Backed)" %} diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-box-cloud-file-storage.md index 0ea1e4661..7dc452719 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-box-cloud-file-storage.md @@ -1,26 +1,26 @@ --- layout: post -title: Open PDF files from Box cloud file storage in Vue Pdfviewer component | Syncfusion -description: Learn about how to load PDF files from Box cloud file storage in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Open PDF files from Box cloud file storage +title: Open PDF from Box cloud storage in Vue PDF Viewer | Syncfusion +description: Learn how to load PDFs from Box cloud storage in the Syncfusion Vue PDF Viewer component using a server-backed approach. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Open PDF file from Box cloud file storage +# Open PDF from Box cloud storage -To load a PDF file from Box cloud file storage in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from Box cloud storage using the server-backed PDF Viewer. -**Step 1** Set up a Box developer account and create a Box application +**Step 1:** Set up a Box developer account and create a Box application -To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose. +Create a developer account and Box application in the [Box Developer Console](https://developer.box.com/). Note the Client ID and Client Secret. Use OAuth 2.0 to authenticate the application. -**Step 2:** Create a Simple PDF Viewer Sample in Vue +**Step 2:** Create a PDF Viewer sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF Viewer component. -**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project +**Step 3:** Modify the `PdfViewerController.cs` file in the web service project 1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. @@ -35,7 +35,7 @@ using Box.V2.Config; using Box.V2.Models; ``` -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields +4. Add the following private fields and constructor parameters to `PdfViewerController`. In the constructor, assign values from configuration to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -48,7 +48,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache { _hostingEnvironment = hostingEnvironment; _cache = cache; - _configuration = configuration; + _configuration = configuration; _accessToken = _configuration.GetValue("AccessToken"); _clientID = _configuration.GetValue("ClientID"); _clientSecret = _configuration.GetValue("ClientSecret"); @@ -56,17 +56,16 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the `Load()` method to load the PDF files from Box cloud file storage. +5. Modify the `Load()` method to load PDF files from Box cloud storage. ```csharp [HttpPost("Load")] [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] [Route("[controller]/Load")] -//Post action for Loading the PDF documents  - +// Post action for loading the PDF document public async Task Load([FromBody] Dictionary jsonObject) { - //Initialize the PDF viewer object with memory cache object + // Initialize the PDF viewer object with the memory cache object PdfRenderer pdfviewer = new PdfRenderer(_cache); MemoryStream stream = new MemoryStream(); @@ -86,7 +85,7 @@ public async Task Load([FromBody] Dictionary json var items = await client.FoldersManager.GetFolderItemsAsync(_folderID, 1000, autoPaginate: true); var files = items.Entries.Where(i => i.Type == "file"); - // Filter the files based on the objectName + // Filter the files based on the object name var matchingFile = files.FirstOrDefault(file => file.Name == objectName); // Fetch the file from Box storage by its name @@ -108,7 +107,7 @@ public async Task Load([FromBody] Dictionary json } ``` -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open the `appsettings.json` file in your web service project, and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -126,11 +125,11 @@ public async Task Load([FromBody] Dictionary json } ``` -N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret. +N> Replace the placeholders with your actual Box values: Access Token, Folder ID, Client ID, and Client Secret. -**Step 4:** Set the PDF Viewer Properties in Vue PDF viewer component +**Step 4:** Configure the Vue PDF Viewer component -Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Box cloud file storage. Ensure that you correctly pass the document name from the files available in your box folder to the documentPath property. +Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) to your web service endpoint (replace the localhost URL with your server URL). Set `documentPath` to the PDF file name to load from Box cloud storage. Ensure the document name exists in your Box folder. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -149,7 +148,7 @@ import { ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-vue-pdfviewer'; -// Replace the "localhost:44396" with the actual URL of your server +// Replace "localhost:44396" with the actual URL of your server const serviceUrl = "https://localhost:44396/pdfviewer"; const documentPath = "PDF_Succinctly.pdf"; @@ -181,7 +180,7 @@ export default { }, data() { return { - // Replace the "localhost:44396" with the actual URL of your server + // Replace "localhost:44396" with the actual URL of your server serviceUrl: "https://localhost:44396/pdfviewer", documentPath: "PDF_Succinctly.pdf" }; @@ -198,6 +197,6 @@ export default { N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example. -N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to pass the document name from the box folder to the `documentPath` property of the PDF viewer component +N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to pass the document name from the box folder to the `documentPath` property of the PDF Viewer component. -[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage) \ No newline at end of file +[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-dropbox-cloud-file-storage.md index 2a6169f04..7a0ea3edc 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/open-pdf-file/from-dropbox-cloud-file-storage.md @@ -1,66 +1,63 @@ --- layout: post -title: Open PDF from Dropbox cloud storage in Vue Pdfviewer | Syncfusion -description: Learn about how to load PDF files from Dropbox cloud file storage in Syncfusion Vue Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Open PDF files from Dropbox cloud file storage +ttitle: Open PDF from Dropbox cloud storage in Vue PDF Viewer | Syncfusion +description: Learn how to load PDFs from Dropbox cloud storage in the Syncfusion Vue PDF Viewer component using standalone and server-backed approaches. +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## --- -# Open PDF file from Dropbox cloud file storage +# Open PDF from Dropbox cloud storage -PDF Viewer allows to load PDF file from Drop Box using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Drop Box. +The Vue PDF Viewer component supports loading PDF files from Dropbox using either the standalone or the server-backed PDF Viewer. The following sections walk through both approaches. -## Using Standalone PDF Viewer +## Using the standalone PDF Viewer -To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below +To load a PDF file from Dropbox cloud storage in the standalone PDF Viewer, follow these steps: -**Step 1** Create a Dropbox API +**Step 1:** Create a Dropbox API app -To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data. +Follow the Dropbox documentation to create an API app: https://www.dropbox.com/developers/documentation/dotnet#tutorial. This enables programmatic access with secure credentials. -**Step 2:** Create a Simple PDF Viewer Sample in Vue +**Step 2:** Create a PDF Viewer sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Follow the steps in this [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to set up a basic Vue PDF Viewer application. -**Step 3:** Modify the `src/App.vue` File in the Angular Project +**Step 3:** Modify the `src/App.vue` file in the Vue project -1. Import the required namespaces at the top of the file: +1. Import the required module at the top of the file: {% tabs %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} - - {% endhighlight %} {% endtabs %} -2. Create an instance of the Dropbox class using an access token for authentication. Next, call the filesDownload method of this Dropbox instance to download the file located at /PDF_Succinctly.pdf. Upon successfully downloading the file, extract the file blob from the response. Convert this file blob to a Base64 string using the blobToBase64 method. Finally, load the Base64 string into a PDF viewer control. +2. Create an instance of the `Dropbox` class with an access token, download the target PDF file, convert it to Base64, and then load it into the PDF Viewer component. -N> Replace **Your Access Token** with the actual Access Token of your Drop Box account. +N> Replace the placeholder with your actual Dropbox access token. {% tabs %} {% highlight html tabtitle="Options API (~/src/App.vue)" %} - - {% endhighlight %} {% endtabs %} -N> The **npm install dropbox** package must be installed in your application to use the previous code example. +N> Install the **dropbox** package (`npm install dropbox`) in your application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone) -## Using Server-Backed PDF Viewer +## Using the server-backed PDF Viewer -To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below +To load a PDF file from Dropbox cloud storage in the server-backed PDF Viewer, follow these steps: -**Step 1** Create a Dropbox API +**Step 1:** Create a Dropbox API app -To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data. +Follow the Dropbox documentation to create an API app: https://www.dropbox.com/developers/documentation/dotnet#tutorial. This enables programmatic access with secure credentials. -**Step 2:** Create a Simple PDF Viewer Sample in Vue +**Step 2:** Create a PDF Viewer sample in Vue -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to create a simple PDF viewer sample in Vue. This will give you a basic setup of the PDF viewer component. +Follow the steps in this [getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started) to set up a basic Vue PDF Viewer application. -**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project +**Step 3:** Modify the `PdfViewerController.cs` file in the web service project -1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project. +1. Create a web service project in .NET Core 3.0 or above. You can refer to this [article](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for guidance on creating the web service project. 2. Open the `PdfViewerController.cs` file in your web service project. @@ -105,10 +101,9 @@ using Dropbox.Api; using Dropbox.Api.Files; ``` -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields +4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the values from the configuration to the corresponding fields. ```csharp - private IConfiguration _configuration; public readonly string _accessToken; public readonly string _folderName; @@ -117,24 +112,22 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache { _hostingEnvironment = hostingEnvironment; _cache = cache; - _configuration = configuration; + _configuration = configuration; _accessToken = _configuration.GetValue("AccessToken"); _folderName = _configuration.GetValue("FolderName"); } ``` -5. Modify the `Load()` method to load the PDF files from Dropbox cloud file storage. +5. Modify the `Load()` method to load the PDF files from Dropbox cloud storage. ```csharp - [HttpPost("Load")] [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] [Route("[controller]/Load")] -//Post action for Loading the PDF documents \ - +// Post action for loading the PDF documents public async Task Load([FromBody] Dictionary jsonObject) { - //Initialize the PDF viewer object with memory cache object + // Initialize the PDF viewer object with memory cache object PdfRenderer pdfviewer = new PdfRenderer(_cache); MemoryStream stream = new MemoryStream(); object jsonResult = new object(); @@ -146,7 +139,7 @@ public async Task Load([FromBody] Dictionary json string fileName = jsonObject["document"]; using (var dropBox = new DropboxClient(_accessToken)) - { + { using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName)) { var byteArray = await response.GetContentAsByteArrayAsync(); @@ -165,10 +158,9 @@ public async Task Load([FromBody] Dictionary json jsonResult = pdfviewer.Load(stream, jsonObject); return Content(JsonConvert.SerializeObject(jsonResult)); } - ``` -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open the `appsettings.json` file in your web service project and add the following lines below the existing `"AllowedHosts"` configuration: ```json { @@ -184,15 +176,14 @@ public async Task Load([FromBody] Dictionary json } ``` -N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name. +N> Replace the placeholders with your actual Dropbox access token and folder name. -**Step 4:** Set the PDF Viewer Properties in Vue PDF viewer component +**Step 4:** Configure the PDF Viewer component -Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Dropbox cloud file storage. Ensure that you correctly pass the document name from the files available in your dropbox folder to the documentPath property. +Set the `serviceUrl` property of the PDF Viewer component to the URL of your web service project (replace `https://localhost:44396/pdfviewer` with the actual server URL). Set the `documentPath` property to the name of the PDF file you want to load from Dropbox. Ensure the document name matches a file in your Dropbox folder. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} -