From 2af2d39697b5f0068609487c314f0543134f7722 Mon Sep 17 00:00:00 2001 From: AnanthaGokulaRaman Date: Wed, 1 Oct 2025 09:31:46 +0530 Subject: [PATCH 01/21] 984044:documentation partially revamped. --- .../annotations/annotations-in-mobile-view.md | 116 ++++++------- .../javascript-es6/annotations/comments.md | 88 +++++----- .../annotations/free-text-annotation.md | 102 +++++------ .../annotations/ink-annotation.md | 64 +++---- .../annotations/line-angle-constraints.md | 45 +++-- .../annotations/measurement-annotation.md | 58 +++---- .../annotations/shape-annotation.md | 50 +++--- .../annotations/signature-annotation.md | 50 +++--- .../annotations/stamp-annotation.md | 47 +++-- .../annotations/sticky-notes-annotation.md | 57 +++---- .../annotations/text-markup-annotation.md | 160 +++++++++--------- .../form-designer/create-programmatically.md | 143 ++++++++-------- .../create-with-user-interface-interaction.md | 54 +++--- .../programmatically-work-with-form-field.md | 62 ++++--- .../user-interaction-with-form-fields.md | 74 ++++---- .../add-annotation-in-text-search-ts.md | 22 ++- .../javascript-es6/how-to/add-header-value.md | 17 +- .../how-to/annotation-selectors.md | 17 +- .../open-pdf-file/from-amazon-s3.md | 36 ++-- .../from-azure-active-directory.md | 32 ++-- .../open-pdf-file/from-azure-blob-storage.md | 40 +++-- .../from-box-cloud-file-storage.md | 30 ++-- .../from-dropbox-cloud-file-storage.md | 32 ++-- .../from-google-cloud-storage.md | 26 ++- .../open-pdf-file/from-google-drive.md | 24 ++- .../open-pdf-file/from-one-drive.md | 28 ++- .../save-pdf-file/to-amazon-s3.md | 40 +++-- .../to-azure-active-directory.md | 60 ++++--- .../save-pdf-file/to-azure-blob-storage.md | 52 +++--- .../to-box-cloud-file-storage.md | 32 ++-- .../to-dropbox-cloud-file-storage.md | 48 +++--- .../save-pdf-file/to-google-cloud-storage.md | 28 ++- .../save-pdf-file/to-google-drive.md | 34 ++-- .../save-pdf-file/to-one-drive.md | 42 +++-- ...mage-in-azure-app-service-for-container.md | 43 ++--- ...ocker-image-in-azure-kubernetes-service.md | 76 +++------ ...in-azure-app-service-from-visual-studio.md | 40 +++-- .../pdfviewer-server-docker-image-overview.md | 61 +++---- .../cp-command-not-recognized.md | 23 ++- .../document-loading-issues.md | 31 ++-- .../troubleshooting/troubleshooting.md | 15 +- 41 files changed, 1008 insertions(+), 1091 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md index 88be1e40d..2aa1ad75d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-in-mobile-view.md @@ -1,123 +1,123 @@ --- layout: post -title: Annotations in mobile view in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Annotations in mobile view in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Annotations in mobile view in TypeScript PDF Viewer control | Syncfusion +description: Learn how to use annotations in mobile view with the Syncfusion TypeScript PDF Viewer (Essential JS 2). platform: document-processing control: Annotations in mobile view publishingplatform: Typescript documentation: ug domainurl: ##DomainURL## --- -# Annotations in mobile view in Typescript Pdfviewer control +# Annotations in mobile view in TypeScript PDF Viewer control -## To Open the Annotation Toolbar +## Open the annotation toolbar -**Step 1:** To enable the annotation toolbar, click the editAnnotation toolbar. +**Step 1:** Click Edit Annotation on the toolbar to enable the annotation toolbar. -![Alt text](../images/edit-annotation.png) +![Enable the annotation toolbar](../images/edit-annotation.png) -**Step 2:** After enabling the annotation toolbar. +**Step 2:** The annotation toolbar appears below the main toolbar. -![Alt text](../images/after-enabling-annotation-toolbar.png) +![Annotation toolbar displayed](../images/after-enabling-annotation-toolbar.png) -## To add sticky notes annotation +## Add sticky note annotations -**Step 1:** click sticky notes icon and then click in the page where you want to add this. +**Step 1:** Click the Sticky Notes icon, then tap the page where the note should be placed. -![Alt text](../images/add-sticky-notes.png) +![Open sticky note tool](../images/add-sticky-notes.png) -**Step 2:** Click in the page to add the sticky notes annotation. +**Step 2:** Tap the page to add the sticky note annotation. -![Alt text](../images/sticky-notes-in-page.png) +![Sticky note annotation added on the page](../images/sticky-notes-in-page.png) -## To add text markup annotation +## Add text markup annotations -**Step 1:** click any one of the text markup icon, then select the text you want to mark, then touch the selected text to apply the markup annotation. +**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup. -![Alt text](../images/select-text.png) +![Select text for markup](../images/select-text.png) -**Step 2:** Add the text markup annotation in the PDF page +**Step 2:** The text markup annotation is applied to the selected text. -![Alt text](../images/add-text-markup.png) +![Text markup applied on the page](../images/add-text-markup.png) -## To add shape and measure annotations +## Add shape and measurement annotations -**Step 1:** click the shape/measure icon in the toolbar. It will show the toolbar with shape/measure types. +**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar. -![Alt text](../images/add-shapes.png) +![Open shape and measurement tools](../images/add-shapes.png) -**Step 2:** Click the shape/measure type and add annotation to the page. +**Step 2:** Choose a shape or measurement type, then draw it on the page. -![Alt text](../images/open-radius.png) +![Select measurement type](../images/open-radius.png) -**Step 3:** Add the annotation in the PDF page. +**Step 3:** The annotation appears on the PDF page. -![Alt text](../images/radius-annotation.png) +![Measurement annotation placed on the page](../images/radius-annotation.png) -## To add the stamp annotation +## Add stamp annotations -**Step 1:** click the stamp icon and select the stamp type from the menu items. +**Step 1:** Tap the Stamp icon and select a stamp type from the menu. -![Alt text](../images/open-stamp.png) +![Open stamp tool](../images/open-stamp.png) -**Step 2:** Add the stamp annotation in the page. +**Step 2:** Tap the page to place the stamp annotation. -![Alt text](../images/add-revised.png) +![Stamp annotation added on the page](../images/add-revised.png) -## To add signature +## Add signature annotations -**Step 1:** click the signature icon. This will open the signature canvas to draw signature. After drawn the sign, should click the create button and touch the viewer to add the signature. +**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it. -![Alt text](../images/add-signature.png) +![Open signature canvas](../images/add-signature.png) -**Step 2:** Add the signature in the page. +**Step 2:** The signature is added to the page. -![Alt text](../images/adding-signature.png) +![Signature placed on the page](../images/adding-signature.png) -## To add ink annotation +## Add ink annotations -**Step 1:** Click the ink icon tool and draw in the page. +**Step 1:** Tap the Ink tool and draw on the page. -![Alt text](../images/open-ink.png) +![Open ink tool](../images/open-ink.png) -**Step 2:** Add the ink annotation in the page. +**Step 2:** The ink annotation appears on the page. -![Alt text](../.././pdfviewer/how-to/images/ink-annotation.png) +![Ink annotation drawn on the page](../.././pdfviewer/how-to/images/ink-annotation.png) -## Change Annotation Change (Before adding) +## Change annotation properties (before adding) -**Step 1:** We can change the properties before adding the annotation. +**Step 1:** Change properties before placing the annotation. -**Step 2:** Click the annotation icon, this will show the toolbar with corresponding properties. We can change the property and add the annotation in the page. +**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page. -![Alt text](../images/open-fillcolor.png) +![Adjust fill color before adding](../images/open-fillcolor.png) -## Change Annotation Property (After Adding) +## Change annotation properties (after adding) -**Step 1:** We can change the annotation property after adding the annotation. +**Step 1:** Change annotation properties after adding the annotation. -**Step 2:** Select the added annotation, it will show the corresponding property tool. This will help us to change the property of the annotation. +**Step 2:** Select the annotation to show the property toolbar, then adjust the properties. -![Alt text](../images/change-property.png) +![Edit annotation properties after adding](../images/change-property.png) -## Delete Annotation +## Delete annotations -**Step 1:** To delete the annotation, first select the annotation, it will show the property toolbar. In the property tool there is an icon to delete the annotation. +**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it. -![Alt text](../images/delete-icon.png) +![Delete icon in the property toolbar](../images/delete-icon.png) -## Open Comment Panel +## Open the comment panel -**Step 1:** We can open the comment panel through the icon in the property tool or through the annotation toolbar. +**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar. -![Alt text](../images/open-comment.png) +![Open the comment panel](../images/open-comment.png) -**Step 1:** After opening the comment panel +**Step 2:** The comment panel appears. -![Alt text](../images/comment-panel.png) +![Comment panel displayed](../images/comment-panel.png) ## Close the comment panel -**Step 1:** To close the comment panel, click the close button. +**Step 1:** Tap the Close button to close the comment panel. -![Alt text](../images/close-comment-panel.png) \ No newline at end of file +![Close the comment panel](../images/close-comment-panel.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md index 58aeed5e6..36a2cf41d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md @@ -1,7 +1,7 @@ --- layout: post -title: Comments in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Comments in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Comments in TypeScript PDF Viewer control | Syncfusion +description: Learn about comments, replies, and status in the Syncfusion TypeScript PDF Viewer (Essential JS 2). platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Comments in Typescript PDF Viewer control +# Comments in TypeScript PDF Viewer control -The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents: +The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents: * Shape annotation * Stamp annotation @@ -21,11 +21,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 @@ -34,87 +34,87 @@ 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. -![CommentEdit](../images/commentsdelete.png) +![Delete comments or replies](../images/commentsdelete.png) ->The annotation will be deleted on deleting the comment using comment panel. +>Deleting the root comment from the comment panel also deletes the associated annotation. ## How to check the comments added by the user -The comments added to the PDF document can be viewed by using the `comments` property of the annotation. +Comments added to the PDF document can be read using the annotation's `comments` property. -Refer to the following code to check the comments added in the PDF document using a button click event. +The following example logs comments in response to a button click. ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md index 152e43cfd..f66ccd37d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Free text annotation in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Free text annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Free text annotation in TypeScript PDF Viewer control | Syncfusion +description: Learn about free text annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,23 +9,23 @@ documentation: ug domainurl: ##DomainURL## --- -# Free text annotation in Typescript PDF Viewer control +# Free text annotation in TypeScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the free text annotations. +The PDF Viewer control provides options to add, edit, and delete free text annotations. -## Adding a free text annotation to the PDF document +## Add a free text annotation to the PDF document -The Free text annotations can be added to the PDF document using the annotation toolbar. +Free text annotations can be added to the PDF document using the annotation toolbar. -* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. -* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode. -* You can add the text over the pages of the PDF document. +* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it. +* Select the **Free Text Annotation** button to enable free text annotation mode. +* Add text anywhere on the pages of the PDF document. -In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode. +When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. -![FreeTextAnnotation in TypeScript PDF Viewer](../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 using a button click. +The following example switches to free text annotation mode using a button click. ```html @@ -76,11 +76,11 @@ if (addFreeTextAnnotationButton) { {% endhighlight %} {% endtabs %} -## Adding a free text annotation programatically 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/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/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(): ```html @@ -151,11 +151,11 @@ if (addFreeTextAnnotation) { {% 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(): ```html @@ -216,71 +216,71 @@ if (changeContent) { {% endhighlight %} {% endtabs %} -N> Please note that the current version of the PDF Viewer does not offer the functionality to edit existing text within a PDF document. However, you can add new free text annotations and modify existing free text annotations within the document. +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. -## Editing the properties of free text annotation +## Edit the properties of free text annotations -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. +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. -### Editing font family +### Edit font family -The font family of the annotation can be edited by selecting the desired font in the Font Family tool. +Edit the font family by selecting a font in the Font Family tool. -![FontFamily](../images/fontfamily.png) +![Change font family](../images/fontfamily.png) -### Editing font size +### Edit font size -The font size of the annotation can be edited by selecting the desired size in the Font Size tool. +Edit the font size by selecting a size in the Font Size tool. -![FontSize](../images/fontsize.png) +![Change font size](../images/fontsize.png) -### Editing font color +### Edit font color -The font color of the annotation can be edited using the color palette provided in the Font Color tool. +Edit the font color using the color palette in the Font Color tool. -![FontColor](../images/fontcolor.png) +![Change font color](../images/fontcolor.png) -### Editing the text alignment +### Edit text alignment -The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool. +Align text by selecting an option from the Text Align tool. -![FreeTextAnnotation](../images/textalign.png) +![Set text alignment](../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 ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md index b9fb6afbc..46fd9b327 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Ink annotation in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Ink annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Ink annotation in TypeScript PDF Viewer control | Syncfusion +description: Learn about ink annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,23 +9,23 @@ documentation: ug domainurl: ##DomainURL## --- -# Ink annotation in Typescript PDF Viewer control +# Ink annotation in TypeScript PDF Viewer control -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. ```html @@ -72,11 +72,11 @@ if (addInkAnnotation) { {% endhighlight %} {% endtabs %} -## Adding a Ink annotation programatically to the PDF document +## Add an ink annotation programmatically to the PDF document -The PDF Viewer library allows you to add the Ink annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here is an example of how you can use the **addAnnotation()** method to move the Ink annotation programmatically: +Here is an example of adding an ink annotation programmatically using addAnnotation(): ```html @@ -138,11 +138,11 @@ if (addInkAnnotation) { {% 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(): ```html @@ -216,33 +216,33 @@ if (editInkAnnotation) { {% 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. +After changing default values, the selected values are applied. Refer to the following code sample to set the default ink annotation settings. {% tabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md index 4e25e41d3..496f8b3b4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/line-angle-constraints.md @@ -1,20 +1,20 @@ --- layout: post -title: Line Angle Constraints in TypeScript PdfViewer | Syncfusion -description: Learn here all about Line Angle Constraints in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Line angle constraints in TypeScript PDF Viewer | Syncfusion +description: Learn about line angle constraints in the Syncfusion TypeScript PDF Viewer, including how to enable snapping, configure angle increments, and draw with precision. platform: document-processing control: Line Angle Constraints -publishingplatform: Typescript +publishingplatform: TypeScript documentation: ug domainurl: ##DomainURL## --- -# Line Angle Constraints in TypeScript PDF Viewer +# Line angle constraints in TypeScript 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: @@ -45,50 +45,49 @@ 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. -[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) +[View a sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to) -N> You can refer to our [TypeScript PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [TypeScript PDF Viewer example](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) to know how to render and configure the PDF Viewer. +N> Refer to the TypeScript PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/javascript-pdf-viewer) for feature highlights. Explore the [TypeScript PDF Viewer examples](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) to learn how to render and configure the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md index 676317e5f..4f63a8969 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Measurement annotation in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Measurement annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Measurement annotation in TypeScript PDF Viewer control | Syncfusion +description: Learn about measurement annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Measurement annotation in Typescript PDF Viewer control +# Measurement annotation in TypeScript PDF Viewer control -The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are: +The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: * Distance * Perimeter @@ -19,22 +19,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. ```html @@ -84,11 +84,11 @@ if (distanceMode) { {% 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/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) 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(): ```html @@ -264,11 +264,11 @@ if (addVolumeAnnotation) { {% 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(): ```html @@ -475,43 +475,43 @@ if (editVolumeAnnotation) { {% 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. +Default properties for measurement 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. @@ -525,7 +525,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"; -pdfviewer. = + pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} @@ -538,7 +538,7 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer. = + pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md index a53615fc3..aef8286b3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Shape annotation in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Shape annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Shape annotation in TypeScript PDF Viewer control | Syncfusion +description: Learn about shape annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Shape annotation in Typescript PDF Viewer control +# Shape annotation in TypeScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are: +The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: * Line * Arrow @@ -19,20 +19,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. -N> While you're in the pan mode, for navigating through the document, and you click on the shape annotation button to add the shape annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface. +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. @@ -85,11 +85,11 @@ if (circleAnnotationButton) { {% 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/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) 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(): ```html @@ -268,11 +268,11 @@ if (addPolygonAnnotation) { {% 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(): ```html @@ -479,43 +479,43 @@ if (editPolygonAnnotation) { ## Editing the 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 shapes](../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_lineprty.png) +![Line properties dialog](../images/shape_lineprty.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 ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md index 48eb41820..e424e25de 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/signature-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Handwritten signature in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Handwritten signature in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Handwritten signature in TypeScript PDF Viewer control | Syncfusion +description: Learn about handwritten signatures in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, enable/disable, and edit properties. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,26 +9,26 @@ documentation: ug domainurl: ##DomainURL## --- -# Handwritten signature Typescript PDF Viewer control +# Handwritten signature in TypeScript 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. @@ -80,9 +80,9 @@ if (handWrittenSignature) { {% 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" %} @@ -115,11 +115,11 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Adding Handwritten signature programatically to the PDF document +## Add a handwritten signature programmatically to the PDF document With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) 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(): ```html @@ -244,24 +244,24 @@ if(addHandwrittenSignature){ [View sample in GitHub](https://github.com/SyncfusionExamples/typescript-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) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md index 7cc4e55b1..27dc647a5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Stamp annotation in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Stamp annotation in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Stamp annotation in TypeScript PDF Viewer control | Syncfusion +description: Learn about stamp annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,9 +9,9 @@ documentation: ug domainurl: ##DomainURL## --- -# Stamp annotation in Typescript PDF Viewer control +# Stamp annotation in TypeScript PDF Viewer control -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents: +The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: * Dynamic * Sign Here @@ -20,24 +20,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. -N> While you're in the pan mode, for navigating through the document, and you click on the stamp annotation button to add the stamp annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface. +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. ```html @@ -145,23 +145,23 @@ if (standardBusinessStamp) { {% 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. -## Adding a Stamp annotation to the PDF document Programmatically +## Add a stamp annotation to the PDF document programmatically -With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. -Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically: +Here are examples showing how to add stamp annotations programmatically using addAnnotation(): ```html @@ -312,11 +312,11 @@ if (customStamp) { {% 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(): ```html @@ -383,12 +383,11 @@ if (editAnnotation) { {% endhighlight %} {% endtabs %} -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the stamp annotation can be set before creating the control using the StampSettings. +Default properties for stamp annotations can be set before creating the control using StampSettings. -After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. -Refer to the following code sample to set the default sticky note annotation settings. +After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings. {% tabs %} {% highlight ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md index 9918d84d5..49b4f9f69 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md @@ -1,7 +1,7 @@ --- layout: post -title: Sticky notes in Typescript PDF Viewer control | Syncfusion -description: Learn here all about Sticky notes in Syncfusion Typescript PDF Viewer control of Syncfusion Essential JS 2 and more. +title: Sticky notes in TypeScript PDF Viewer control | Syncfusion +description: Learn about sticky note annotations in the Syncfusion TypeScript PDF Viewer (Essential JS 2): add, edit, delete, and default settings. platform: document-processing control: PDF Viewer publishingplatform: Typescript @@ -9,36 +9,35 @@ documentation: ug domainurl: ##DomainURL## --- -# Sticky notes in Typescript PDF Viewer control +# Sticky notes in TypeScript PDF Viewer control -The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document. +The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. ![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/documentation/api/pdfviewer/annotation/#annotation) method. +The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) 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(): ```html @@ -97,11 +96,11 @@ if (stickyNote) { {% 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(): ```html @@ -165,31 +164,31 @@ if (stickyNote) { {% 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 %} {% highlight ts tabtitle="Standalone" %} @@ -220,9 +219,9 @@ pdfviewer.appendTo('#PdfViewer'); {% 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 ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md index 66cb992ca..676bf007e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md @@ -1,40 +1,40 @@ --- layout: post -title: Text markup annotation in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Text markup annotation in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Text markup annotation in TypeScript PDF Viewer | Syncfusion +description: Learn about text markup annotations in the Syncfusion TypeScript PDF Viewer, including highlight, underline, strikethrough, and squiggly—add, edit, delete, and configure programmatically. platform: document-processing control: Text markup annotation -publishingplatform: Typescript +publishingplatform: TypeScript documentation: ug domainurl: ##DomainURL## --- -# Text markup annotation in Typescript Pdfviewer control +# Text markup annotation in TypeScript PDF Viewer -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. @@ -174,11 +174,11 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/highlight-normal-mode-cs1/index.html" %} -## 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/documentation/api/pdfviewer/annotation/#annotation) method. +Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically: +Example: ```html @@ -235,22 +235,22 @@ if (highlight) { {% 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) @@ -391,11 +391,11 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/underline-normal-mode-cs1/index.html" %} -## Underline a text programmatically +## Underline text programmatically -The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically: +Example: ```html @@ -452,22 +452,22 @@ if (underline) { {% 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) @@ -537,7 +537,7 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/strikethrough-mode-cs1/index.html" %} -Refer to the following code snippet to switch back to normal mode from underline mode. +Refer to the following code snippet to switch back to normal mode from strikethrough mode. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -609,11 +609,11 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/strikethrough-normal-mode-cs1/index.html" %} -## 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/documentation/api/pdfviewer/annotation/#annotation) method. +Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically: +Example: ```html @@ -670,21 +670,21 @@ if (strikethrough) { {% 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) 2. Using the annotation toolbar - * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. - * Select the **Squiggly** button in the annotation toolbar. It enables the squiggly mode. - * Select the text and the squiggly annotation will be added. - * You can also select the text and apply the squiggly annotation using the **Squiggly** button. +* Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. +* Select **Squiggly** to enable squiggly mode. +* Select text to add the squiggly annotation. +* Alternatively, select text first and then click **Squiggly**. ![Alt text](../images/squiggly_button.png) @@ -754,7 +754,7 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/squiggly-mode-cs1/index.html" %} -Refer to the following code snippet to switch back to normal mode from underline mode. +Refer to the following code snippet to switch back to normal mode from squiggly mode. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -826,11 +826,11 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/squiggly-normal-mode-cs1/index.html" %} -## Squiggly a text programmatically +## Add squiggly to text programmatically -The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. +Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method. -Here's an example of how you can use the **addAnnotation()** method to apply Squiggly programmatically: +Example: ```html @@ -889,39 +889,39 @@ if (squiggly) { ## Deleting a text markup annotation -The selected annotation can be deleted by the following ways: +The selected annotation can be deleted in the following ways: -1. Using Delete key - * Select the annotation to be deleted. - * Click the Delete key in the keyboard. The selected annotation will be deleted. +1. Using the Delete/Backspace key + * Select the annotation. + * Press Delete (or Backspace). The selected annotation is removed. 2. Using the annotation toolbar - * Select the annotation to be deleted. - * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted. + * Select the annotation. + * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. ![Alt text](../images/delete_button.png) -## Editing the properties of the text markup annotation +## Edit text markup annotation properties The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar. -### Editing color +### Edit color -The color of the annotation can be edited using the color palette provided in the Edit Color tool. +Use the color palette in the Edit Color tool to change the annotation color. ![Alt text](../images/edit_color.png) -### Editing opacity +### Edit opacity -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. +Use the range slider in the Edit Opacity tool to change annotation opacity. ![Alt text](../images/edit_opacity.png) -## Setting default properties during control initialization +## Set default properties during control initialization -The properties of the text markup annotation can be set before creating the control using highlightSettings, underlineSettings, strikethroughSettings and squigglySettings. +Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. ->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values. +> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings. Refer to the following code snippet to set the default annotation settings. @@ -961,22 +961,22 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -## Performing undo and redo +## Perform undo and redo -The PDF Viewer performs undo and redo for the changes made in the PDF document. In text markup annotation, undo and redo actions are provided for: +The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: * Inclusion of the text markup annotations. * Deletion of the text markup annotations. * Change of either color or opacity of the text markup annotations. -Undo and redo actions can be done by the following ways: +Undo and redo actions can be performed in the following ways: 1. Using keyboard shortcuts: - After performing a text markup annotation action, you can undo it by using Ctrl + Z shortcut and redo by using Ctrl + Y shortcut. -2. Using toolbar: - Undo and redo can be done using the **Undo** tool and **Redo** tool provided in the toolbar. + After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo. +2. Using the toolbar: + Use the **Undo** and **Redo** tools in the toolbar. -Refer to the following code snippet for calling undo and redo actions from the client-side. +Refer to the following code snippet to call undo and redo actions from the client side. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -1045,17 +1045,17 @@ Add the below `serviceUrl` in the `index.ts` file {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/text-markup-annotation/undo-redo-cs1/index.html" %} -## Saving the text markup annotation +## Save text markup annotations -When you click the download tool in the toolbar, the text markup annotations will be saved in the PDF document. This action will not affect the original document. +Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. -## Printing the text markup annotation +## Print text markup annotations -When the print tool is selected in the toolbar, the PDF document will be printed along with the text markup annotations added to the pages. This action will not affect the original document. +Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. -## Disabling text markup annotation +## Disable text markup annotation -The PDF Viewer control provides an option to disable the text markup annotation feature. The code snippet for disabling the feature is as follows. +Disable text markup annotations using the `enableTextMarkupAnnotation` property. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -1088,4 +1088,4 @@ pdfviewer.appendTo('#PdfViewer'); ## See also * [Toolbar items](../toolbar) -* [Feature Modules](../feature-module) +* [Feature modules](../feature-module) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md index 0b5227170..260e14cbf 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-programmatically.md @@ -1,30 +1,28 @@ --- layout: post -title: Create programmatically in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Create programmatically in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Create form fields programmatically in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to add, update, delete, save, print, validate, and import/export form fields in the Syncfusion TypeScript PDF Viewer component. platform: document-processing -control: Create programmatically -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- # Create programmatically in Typescript Pdfviewer control -The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are: +The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are: - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field ## Add a form field to PDF document programmatically -Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code. +Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -100,15 +98,14 @@ pdfviewer.documentLoad = function (args) { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.ts` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/addformfield-cs3/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 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 ts tabtitle="index.ts" %} @@ -185,15 +182,14 @@ pdfviewer.formDesignerModule.updateFormField(pdfviewer.formFieldCollections[0], {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.ts` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/updateformfield-cs3/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. +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 ts tabtitle="index.ts" %} @@ -270,19 +266,18 @@ pdfviewer.documentLoad = function (args) { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `serviceUrl` in the `index.ts` file +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: `pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/deleteformfield-cs3/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. +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) +![Save form fields from the PDF Viewer](../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 ts tabtitle="Standalone" %} @@ -315,11 +310,11 @@ pdfviewer.download(); ## 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) +![Print the PDF with form fields](../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 ts tabtitle="Standalone" %} @@ -360,7 +355,7 @@ pdfviewer.print.print(); ## setFormFieldMode programmatically -The **setFormFieldMode** method is a function in the Syncfusion PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below. +The setFormFieldMode method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked. ``` @@ -406,15 +401,15 @@ document.getElementById('addPasswordField').addEventListener('click', function ( ## 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 ts tabtitle="Standalone" %} @@ -454,11 +449,11 @@ var nonfilledFormFields = args.nonFillableFields; ## 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 `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. +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 +- FDF +- XFDF +- JSON ### Export and import as FDF @@ -467,7 +462,7 @@ Using the `exportFormFields` method, the form field data can be exported in the * 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 the form field data as FDF. +The following example exports and imports form field data as FDF. ```ts @@ -492,7 +487,7 @@ document.getElementById('importFdf').addEventListener('click', ()=> { ### Export and import as XFDF -The following code explains how to export the form field data as XFDF. +The following example exports and imports form field data as XFDF. ```ts @@ -517,7 +512,7 @@ document.getElementById('importXfdf').addEventListener('click', ()=> { ### Export and import as JSON -The following code explains how to export the form field data as JSON. +The following example exports and imports form field data as JSON. ```ts @@ -542,7 +537,7 @@ document.getElementById('importJson').addEventListener('click', ()=> { ### 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. @@ -587,20 +582,20 @@ document.getElementById('importData').addEventListener('click', ()=> { ``` ## Form field properties -Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively. +Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings. - * Textbox - * Password - * CheckBox - * RadioButton - * ListBox - * DropDown - * SignatureField - * InitialField +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field ### Signature and initial fields settings -Using the `updateFormField` method, the form fields can be updated programmatically. +Use the updateFormField method to modify form fields programmatically. The following code example explains how to update the signature field properties on a button click. @@ -621,7 +616,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the signature field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a signature field added from the Form Designer toolbar. ```ts @@ -659,9 +654,9 @@ viewer.signatureFieldSettings = { ``` -![Signature Field Settings](../images/SignatureField.png) +![Signature field settings in the PDF Viewer](../images/SignatureField.png) -The following code example explains how to update the properties of the initial field added to the document from the form designer toolbar. +The following code shows how to configure default properties for an initial field added from the Form Designer toolbar. ```ts @@ -699,13 +694,13 @@ viewer.initialFieldSettings = { ``` -![Initial Field Settings](../images/InitialField.png) +![Initial field settings in the PDF Viewer](../images/InitialField.png) ### Textbox field settings Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the Textbox field properties on a button click. +The following example updates Textbox field properties on a button click. ```html @@ -741,7 +736,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Textbox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar. ```ts @@ -785,13 +780,13 @@ viewer.textFieldSettings = { ``` -![Textbox Field Settings](../images/Textbox.png) +![Textbox field settings in the PDF Viewer](../images/Textbox.png) ### Password field settings Using the `updateFormField` method, the form fields can be updated programmatically. -The following code example explains how to update the Password field properties on a button click. +The following example updates Password field properties on a button click. ```html @@ -826,7 +821,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Password field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a Password field added from the Form Designer toolbar. ```ts @@ -868,13 +863,13 @@ viewer.passwordFieldSettings = { ``` -![Password Field Settings](../images/Password.png) +![Password field settings in the PDF Viewer](../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. +The following example updates CheckBox field properties on a button click. ```html @@ -903,7 +898,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the CheckBox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar. ```ts @@ -934,13 +929,13 @@ viewer.checkBoxFieldSettings = { ``` -![Checkbox Settings](../images/Checkbox.png) +![CheckBox field settings in the PDF Viewer](../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. +The following example updates RadioButton field properties on a button click. ```html @@ -969,7 +964,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the RadioButton field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar. ```ts @@ -1001,13 +996,13 @@ viewer.radioButtonFieldSettings = { ``` -![Radiobutton Settings](../images/Radiobutton.png) +![RadioButton field settings in the PDF Viewer](../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. +The following example updates ListBox field properties on a button click. ```html @@ -1041,7 +1036,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Listbox field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar. ```ts @@ -1084,13 +1079,13 @@ viewer.listBoxFieldSettings = { ``` -![Listbox Settings](../images/Listbox.png) +![ListBox field settings in the PDF Viewer](../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. +The following example updates DropDown field properties on a button click. ```html @@ -1124,7 +1119,7 @@ document.getElementById('updateProperties').addEventListener('click',function() ``` -The following code example explains how to update the properties of the Dropdown field added to the document from the form designer toolbar. +The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar. ```ts @@ -1167,4 +1162,4 @@ viewer.listBoxFieldSettings = { ``` -![Dropdown Settings](../images/Dropdown.png) \ No newline at end of file +![DropDown field settings in the PDF Viewer](../images/Dropdown.png) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md index 789fb974e..fd01f2a66 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md @@ -1,30 +1,28 @@ --- layout: post -title: User interaction in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Create with user interface interaction in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Design form fields using the UI 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. platform: document-processing -control: Create with user interface interaction -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- # Create with user interface interaction -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. ```ts import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; @@ -37,41 +35,41 @@ pdfviewer.enableFormDesignerToolbar= true; ## 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. ```ts import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/programmatically-work-with-form-field.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/programmatically-work-with-form-field.md index 57ba56d5c..4bd66e330 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/programmatically-work-with-form-field.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/programmatically-work-with-form-field.md @@ -1,30 +1,28 @@ --- layout: post -title: Programmatically work with form field in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Programmatically work with form field in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Programmatically work with form fields in the TypeScript PDF Viewer component | Syncfusion +description: Learn how to programmatically add, update, delete, save, print, and manage form fields in the Syncfusion TypeScript PDF Viewer component. platform: document-processing -control: Programmatically work with form field -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Programmatically work with form field in Typescript Pdfviewer control +# Programmatically work with form fields in TypeScript 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 +## Add a form field to a 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. Provide the field type and its property object as parameters. Use the following example to add a form field when the document loads. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -37,9 +35,9 @@ Using addFormField method, the form fields can be added to the PDF document prog {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/addformfield-cs4/index.html" %} -## Edit/Update form field programmatically +## Edit or update a 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 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 value and background color of a Textbox field. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -52,9 +50,9 @@ Using updateFormField method, Form Field can be updated programmatically. We sho {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/updateformfield-cs4/index.html" %} -## Delete form field programmatically +## Delete a 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 from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -67,13 +65,13 @@ Using deleteFormField method, the form field can be deleted programmatically. We {% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/deleteformfield-cs4/index.html" %} -## Saving the form fields +## Save 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. This action does not modify the original source file. Refer to the following GIF for reference. -![Alt text](../images/saveformfield.gif) +![Save form fields from the PDF Viewer](../images/saveformfield.gif) -You can invoke download action using following code snippet. +You can invoke the download action using the following code snippet. ```ts import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; @@ -88,13 +86,13 @@ pdfviewer.download(); ``` -## Printing the form fields +## Print 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 along with the added form fields. This action does not modify the original document. Refer to the following GIF for reference. -![Alt text](../images/printformfield.gif) +![Print the PDF with form fields](../images/printformfield.gif) -You can invoke print action using the following code snippet., +You can invoke the print action using the following code snippet. ```ts import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; @@ -109,8 +107,8 @@ pdfviewer.print.print(); ``` -## Open the existing PDF document +## Open an 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 previously saved PDF that contains form fields by selecting the Open icon on the toolbar. Refer to the following GIF for reference. -![Alt text](../images/openexistingpdf.gif) \ No newline at end of file +![Open a PDF with existing form fields](../images/openexistingpdf.gif) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/user-interaction-with-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/user-interaction-with-form-fields.md index 288f1be1b..ed78c78fb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/user-interaction-with-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/formdesigner/user-interaction-with-form-fields.md @@ -1,77 +1,75 @@ --- layout: post -title: User interaction with form fields in Typescript Pdfviewer control | Syncfusion -description: Learn here all about User interaction with form fields in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Design form fields using the UI 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. platform: document-processing -control: User interaction with form fields -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# User interaction with form fields in Typescript Pdfviewer control +# User interaction with form fields in TypeScript PDF Viewer 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. Select a form field icon on the toolbar to add a field and draw 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 +## Enable or disable the 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 option. ```ts import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.enableFormDesignerToolbar= true; +pdfviewer.enableFormDesignerToolbar = true; ``` -## Add the form field dynamically +## Add a 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 a 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 +## Drag a 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 +## Resize a 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 +## Edit or update a 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 +## Clipboard operations with form fields -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 +## 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. ```ts import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; @@ -81,4 +79,4 @@ let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.undo(); pdfviewer.redo(); -``` \ No newline at end of file +``` diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-annotation-in-text-search-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-annotation-in-text-search-ts.md index 6ba677ad8..ee3fa11e4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-annotation-in-text-search-ts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-annotation-in-text-search-ts.md @@ -1,25 +1,23 @@ --- layout: post -title: Add Annotation in Text Search in TypeScript PdfViewer | Syncfusion -description: Learn how to add rectangle annotations using search text bounds in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Add rectangle annotations from text search in TypeScript PDF Viewer +description: Learn to add rectangle annotations using text search bounds in the TypeScript PDF Viewer component, including initialization and search controls. platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug -domainurl: ##DomainURL## --- -# Add Rectangle Annotations Using Search Text Bounds in PDF Viewer +# Add rectangle annotations using text search bounds in PDF Viewer ## Overview -This guide demonstrates how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This technique is useful for emphasizing search results with visual markers in annotation-supported applications. +This guide explains how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This approach visually emphasizes search results in annotation-enabled applications. ## Steps to Add Rectangle Annotations on Search Result Highlight **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample. -**Step 2:** Initialize the PDF Viewer with Required Modules +**Step 2:** Initialize the PDF Viewer with required modules ```ts import { pdf } from '@syncfusion/ej2'; @@ -36,9 +34,9 @@ const pdfviewer: PdfViewer = new PdfViewer({ pdfviewer.appendTo('#PdfViewer'); ``` -**Step 3:** Implement code blocks to automatically add Rectangle Annotation on Search Result Highlight +**Step 3:** Add a rectangle annotation when a search result is highlighted -Define a callback function for the `textSearchHighlight` event to add rectangle annotations +Define a callback for the `textSearchHighlight` event to add a rectangle annotation at each match. ```ts // Highlight event handler for text search, which adds a rectangle annotation where the text is found @@ -56,7 +54,7 @@ pdfviewer.textSearchHighlight = function(args: TextSearchHighlightEventArgs): vo ``` -**Step 3:** Add Search Controls +**Step 4:** Add search controls Ensure you have the appropriate HTML buttons for text search operations @@ -66,7 +64,7 @@ Ensure you have the appropriate HTML buttons for text search operations ``` -Use the following Typescript code snippet to handle search controls: +Use the following TypeScript code to handle search controls: ```ts // Add event listener to "searchText" button to trigger a search for the term 'PDF' @@ -94,6 +92,6 @@ if (searchCancelButton) { } ``` -By following this guide, you will enable the PDF Viewer to add rectangle annotations at search result locations, thus increasing the visibility of search results in your application. +Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, increasing the visibility of matches. [View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-header-value.md index d24dc18f1..6ab774237 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-header-value.md @@ -1,19 +1,17 @@ --- layout: post -title: Add header value in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Add header value in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Add header values to AJAX requests in TypeScript PDF Viewer +description: Learn how to add custom header values to PDF Viewer AJAX requests using ajaxRequestSettings and ajaxHeaders in the TypeScript PDF Viewer component. platform: document-processing -control: Add header value -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Add header value in Typescript Pdfviewer control +# Add header values in TypeScript PDF Viewer -To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request. +To add header values to AJAX requests, use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings). This property specifies custom headers for each outgoing request. -Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer: +Example: Add a custom Authorization header using ajaxRequestSettings ```ts @@ -31,4 +29,5 @@ viewer.ajaxRequestSettings = { ``` -Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/typescript-nv1way?file=index.ts) \ No newline at end of file +Sample: How to add custom headers using ajaxRequestSettings +[StackBlitz example](https://stackblitz.com/edit/typescript-nv1way?file=index.ts) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/annotation-selectors.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/annotation-selectors.md index 9069f4bae..c59cee1ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/annotation-selectors.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/annotation-selectors.md @@ -1,19 +1,17 @@ --- layout: post -title: Annotation selectors in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Annotation selectors in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Customize annotation selectors in TypeScript PDF Viewer +description: Learn how to customize annotation selectors in the TypeScript PDF Viewer component using annotationSelectorSettings with examples. platform: document-processing -control: Annotation selectors -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Annotation selectors in Typescript Pdfviewer control +# Customize annotation selectors in TypeScript PDF Viewer -To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control. +Customize the annotation selector using the [annotationSelectorSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PDF Viewer. -Here is an example of how you can customize the selector of the shape annotation: +Example: customize the selector of a shape annotation ``` @@ -30,4 +28,5 @@ document.getElementById('annotationSelector').addEventListener('click', () => { ``` -Find the sample [how to customize the annotation selector](https://stackblitz.com/edit/typescript-u7xjdv?file=index.ts) \ No newline at end of file +Sample: How to customize the annotation selector +https://stackblitz.com/edit/typescript-u7xjdv?file=index.ts diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-amazon-s3.md index 4f1ddff04..2194f957e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-amazon-s3.md @@ -1,25 +1,23 @@ --- layout: post -title: Open PDF files from AWS S3 in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Open PDF files from AWS S3 in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from AWS S3 in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from AWS S3 in the Syncfusion TypeScript PDF Viewer component using standalone and server-backed approaches. platform: document-processing -control: Open PDF files from AWS S3 -publishingplatform: Typescript +control: PDF Viewer 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 TypeScript 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 TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions in the getting started guide (TypeScript) to create a basic PDF Viewer sample: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started **Step 2:** Modify the `src/app/app.ts` File in the TypeScript Project @@ -29,7 +27,7 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu import * as AWS from 'aws-sdk'; ``` -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. @@ -41,7 +39,7 @@ AWS.config.update({ }); ``` -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 (bucket name and file key). Use S3.getObject to retrieve the document, convert it to a Base64 string, and pass it to viewer.load. 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. @@ -75,13 +73,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 Typescript +**Step 1:** Create a PDF Viewer sample in TypeScript -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. +Create a basic PDF Viewer sample by following the getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project @@ -176,11 +174,11 @@ 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 +N> Replace the placeholders with your actual AWS credentials and bucket name: Access Key, Secret Key, and Bucket Name. -**Step 3:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 3:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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](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 AWS S3. Ensure the document name matches an object in your bucket. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-active-directory.md index c124e6235..15b6d8556 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-active-directory.md @@ -1,25 +1,23 @@ --- layout: post -title: Open PDF From AAD in Typescript Pdfviewer control | Syncfusion -description: Learn how to Open PDF From AAD in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Azure Active Directory in TypeScript PDF Viewer | Syncfusion +description: Learn how to load and save PDFs using Azure Active Directory (AAD) with the Syncfusion TypeScript PDF Viewer component. platform: document-processing control: PDF Viewer -publishingplatform: Typescript 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 TypeScript 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**: - Navigate to [Azure Portal](https://portal.azure.com). @@ -41,7 +39,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **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**. @@ -51,7 +49,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **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. @@ -66,7 +64,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ![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**: - In the Azure portal, go to **Data storage** > **Containers**. @@ -77,7 +75,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ![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: @@ -92,7 +90,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **Step 6: Client-Side Configuration** +### Step 6: Client-side configuration 1. **Run the TS Sample**: - Start the TS sample that includes the Syncfusion PDF Viewer. @@ -106,7 +104,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **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. @@ -114,7 +112,7 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **Server-Side Code Snippets** +### Server-side code ```cs string tenantId = "Provide the tenant id here"; string clientId = "Provide the clientid here"; @@ -170,7 +168,7 @@ public async Task SaveToAAD([FromBody] Dictionary -### **Client-side Code Snippets** +### Client-side code ```ts import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer'; diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-blob-storage.md index cf0f2a2b8..c48fadcaa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-azure-blob-storage.md @@ -1,27 +1,25 @@ --- layout: post -title: Open PDF from Azure Blob Storage in Typescript Pdfviewer | Syncfusion -description: Learn here all about Open PDF files from Azure Blob Storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Azure Blob Storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from Azure Blob Storage in the Syncfusion TypeScript PDF Viewer component using standalone and server-backed approaches. platform: document-processing -control: Open PDF files from Azure Blob Storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Open PDF file from Azure Blob Storage +# Open PDF 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 TypeScript 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 Typescript +**Step 1:** Create a PDF Viewer sample in TypeScript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. -**Step 2:** Modify the `src/app/app.ts` File in the Angular Project +**Step 2:** Modify the src/app/app.ts file in the TypeScript project 1. Add the following private properties to the `app.ts`, and assign the values from the configuration to the corresponding properties @@ -33,7 +31,7 @@ private containerName: string = "*Your container name in Azure*"; private blobName: string = "*Your Blob name in Azure*"; ``` -2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer. +2. Construct the URL to the PDF in Azure Blob Storage. Call fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then load the base64 string into the PDF Viewer. ```typescript pdfviewer.created = function () { @@ -50,7 +48,7 @@ pdfviewer.created = function () { } ``` -3. Then it retrieves the PDF file from the given URL and converts the fetched Blob to a base64 string using blobToBase64. +3. Retrieve the PDF from the URL and convert the fetched Blob to a base64 string using blobToBase64. ```typescript function fetchAndConvertToBase64(url : any) { @@ -72,7 +70,7 @@ function fetchAndConvertToBase64(url : any) { } ``` -4. Uses FileReader to convert a Blob to a base64 string. Resolves the promise with the base64 string or rejects it in case of an error. +4. Use FileReader to convert a Blob to a base64 string. Resolve the promise with the base64 string or reject it in case of an error. ```typescript function blobToBase64(blob : any) { @@ -92,11 +90,11 @@ function blobToBase64(blob : any) { [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 Typescript +**Step 1:** Create a PDF Viewer sample in TypeScript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. @@ -129,7 +127,7 @@ public PdfViewerController(IConfiguration configuration, ILogger 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 Typescript PDF viewer component +**Step 3:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 contanier 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 Azure Blob Storage. Ensure the document name exists in your Azure container. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-box-cloud-file-storage.md index a5b127ee3..018d79ede 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-box-cloud-file-storage.md @@ -1,27 +1,25 @@ --- layout: post -title: Open PDF files from Box cloud file storage in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Open PDF files from Box cloud file storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Box cloud storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from Box cloud storage in the Syncfusion TypeScript PDF Viewer component using a server-backed approach. platform: document-processing -control: Open PDF files from Box cloud file storage -publishingplatform: Typescript +control: PDF Viewer 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 Typescript +**Step 2:** Create a PDF Viewer sample in TypeScript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. 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. @@ -36,7 +34,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; @@ -57,7 +55,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Load()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from Box cloud file storage. +5. Modify the [Load()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load PDF files from Box cloud storage. ```csharp [HttpPost("Load")] @@ -128,11 +126,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 Typescript 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 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. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-dropbox-cloud-file-storage.md index eaa2b7f20..55ce60873 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-dropbox-cloud-file-storage.md @@ -1,17 +1,15 @@ --- layout: post -title: Open PDF from Dropbox cloud storage in Typescript Pdfviewer | Syncfusion -description: Learn here all about Open PDF files from Dropbox cloud file storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Dropbox cloud storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from Dropbox cloud storage in the Syncfusion TypeScript PDF Viewer component using standalone and server-backed approaches. platform: document-processing -control: Open PDF files from Dropbox cloud file storage -publishingplatform: Typescript +control: PDF Viewer 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 TypeScript PDF Viewer component supports loading PDF files from Dropbox using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches. ## Using Standalone PDF Viewer @@ -19,13 +17,13 @@ To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can foll **Step 1** Create a Dropbox API -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 Typescript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. -**Step 3:** Modify the `src/app/app.ts` File in the Angular Project +**Step 3:** Modify the src/app/app.ts file in the TypeScript project 1. Import the required namespaces at the top of the file: @@ -35,7 +33,7 @@ import { Dropbox } from 'dropbox'; 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. -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. ```typescript pdfviewer.created = function () { @@ -64,19 +62,19 @@ N> The **npm install dropbox** package must be installed in your application to [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 -**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. -**Step 2:** Create a Simple PDF Viewer Sample in Typescript +**Step 2:** Create a PDF Viewer sample in TypeScript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. 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. @@ -166,11 +164,11 @@ 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 values: Access Token and Folder Name. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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](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 Dropbox. Ensure the document name exists in your Dropbox folder. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-cloud-storage.md index ea37190c3..0294293da 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-cloud-storage.md @@ -1,23 +1,21 @@ --- layout: post -title: Open PDF files from Google Cloud Storage in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Open PDF files from Google Cloud Storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Google Cloud Storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from Google Cloud Storage in the Syncfusion TypeScript PDF Viewer component using a server-backed approach. platform: document-processing -control: Open PDF files from Google Cloud Storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Open PDF file from Google Cloud Storage +# Open PDF from Google Cloud Storage -To load a PDF file from Google Cloud Storage in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from Google Cloud Storage using the server-backed PDF Viewer. **Step 1:** Create a Simple PDF Viewer Sample in Typescript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. -**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project +**Step 2:** 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. @@ -31,7 +29,7 @@ using Google.Cloud.Storage.V1; using Google.Apis.Auth.OAuth2; ``` -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 readonly object _storageClient @@ -94,7 +92,7 @@ public IActionResult Load([FromBody] Dictionary jsonObject) } ``` -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration +6. Open appsettings.json in the web service project and add the following keys below the existing AllowedHosts configuration ```json { @@ -109,13 +107,13 @@ public IActionResult Load([FromBody] Dictionary jsonObject) } ``` -N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket +N> Replace the placeholder with the actual Google Cloud Storage bucket name. -N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename. +N> Replace path/to/service-account-key.json with the actual file path to your service account key JSON file. -**Step 3:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 3:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 Google Cloud Storage. Ensure that you correctly pass the document name from the files available in your bucket 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 Google Cloud Storage. Ensure the document name exists in your bucket. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-drive.md index 681803fa7..d55ab0378 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-google-drive.md @@ -1,17 +1,15 @@ --- layout: post -title: Open PDF files from Google Drive in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Open PDF files from Google Drive in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from Google Drive in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from Google Drive in the Syncfusion TypeScript PDF Viewer component using a server-backed approach. platform: document-processing -control: Open PDF files from Google Drive -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Open PDF file from Google Drive +# Open PDF from Google Drive -To load a PDF file from Google Drive in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from Google Drive using the server-backed PDF Viewer. **Step 1** Set up Google Drive API @@ -21,7 +19,7 @@ You must set up a project in the Google Developers Console and enable the Google Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. 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 +33,7 @@ using Google.Apis.Drive.v3; using Google.Apis.Util.Store; ``` -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; @@ -126,7 +124,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 appsettings.json in the web service project and add the following keys below the existing AllowedHosts configuration ```json { @@ -143,13 +141,13 @@ public async Task Load([FromBody] Dictionary json } ``` -N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. +N> Replace the placeholders with your actual values: Google Drive Folder ID, Application name, and the path to the OAuth 2.0 client IDs JSON file. N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 Google Drive. Ensure that you correctly pass the document name from the files available in your drive 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 Google Drive. Ensure the document name exists in your Drive folder. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md index 3e0c33370..7f69439c2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/open-pdf-file/from-one-drive.md @@ -1,27 +1,25 @@ --- layout: post -title: Open PDF files from One Drive in Typescript Pdfviewer control | Syncfusion -description: Learn here all about Open PDF files from One Drive in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Open PDF from OneDrive in TypeScript PDF Viewer | Syncfusion +description: Learn how to load PDFs from OneDrive in the Syncfusion TypeScript PDF Viewer component using a server-backed approach. platform: document-processing -control: Open PDF files from One Drive -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Open PDF file from One Drive +# Open PDF from OneDrive -To load a PDF file from One Drive in a PDF Viewer, you can follow the steps below +Follow these steps to load a PDF from OneDrive using the server-backed PDF Viewer. -**Step 1** Create the Microsoft graph API. +**Step 1:** Create a Microsoft Graph API application -Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs. +Create a Microsoft Graph API application and obtain the application ID and tenant ID. Follow this guide: https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive **Step 2:** Create a Simple PDF Viewer Sample in Typescript Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. 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. @@ -36,7 +34,7 @@ using Microsoft.Identity.Client; using Helpers; ``` -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; @@ -121,7 +119,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 appsettings.json in the web service project and add the following keys below the existing AllowedHosts configuration ```json { @@ -139,11 +137,11 @@ public async Task Load([FromBody] Dictionary json ``` -N> Replace **Your_Tenent_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name. +N> Replace the placeholders with your actual values: Tenant ID, Application ID, and OneDrive folder name. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Configure the PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 One Drive. Ensure that you correctly pass the document name from the files available in your drive 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 OneDrive. Ensure the document name exists in your OneDrive folder. ```typescript diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md index ca410866f..c22b2812f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-amazon-s3.md @@ -1,17 +1,15 @@ --- layout: post -title: Save PDF files to AWS S3 Typescript Pdfviewer control | Syncfusion -description: Learn here all about how to Save PDF files to AWS S3 in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to AWS S3 in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to AWS S3 using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing -control: Save PDF files to AWS S3 -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to AWS S3 +# Save PDF files to AWS S3 -PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3. +The TypeScript PDF Viewer component supports saving PDF files to AWS S3 using either the standalone or server-backed configuration. The following steps demonstrate both approaches. ## Using Standalone PDF Viewer @@ -21,7 +19,7 @@ To save a PDF file to AWS S3, you can follow the steps below: Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` File in the Angular Project +**Step 2:** Modify the `src/app/app.ts` file in the Angular project 1. Import the required namespaces at the top of the file: @@ -29,7 +27,7 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu import * as AWS from 'aws-sdk'; ``` -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. This enables the application to interact with AWS services such as 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. @@ -41,7 +39,7 @@ AWS.config.update({ }); ``` -3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. +3. Configure a custom toolbar item for the download function to save a PDF file to AWS S3. ```typescript let toolItem1: CustomToolbarItemModel = { @@ -60,7 +58,7 @@ pdfviewer.toolbarClick = function (args) { }; ``` -4. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance. +4. Retrieve the PDF Viewer instance, save the current PDF as a Blob, read it using FileReader to get an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the `putObject` method. 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. @@ -91,11 +89,11 @@ function saveDocument() { } ``` -N> The **npm install aws-sdk** package must be installed in your application to use the previous code example. +N> Install the aws-sdk package in the application to use the previous code example: npm install aws-sdk [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 server-backed PDF Viewer To save a PDF file to AWS S3, you can follow the steps below: @@ -103,9 +101,9 @@ To save a PDF file to AWS S3, you can follow the steps below: Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. -**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project +**Step 2:** 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 later. For instructions, see this article: https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above 2. Open the `PdfViewerController.cs` file in your web service project. @@ -137,7 +135,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to AWS S3 bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the AWS S3 bucket. ```csharp @@ -174,7 +172,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -191,11 +189,11 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -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 +N> Replace the placeholders with the actual AWS access key, secret key, and bucket name. -**Step 3:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 3:** Set the PDF Viewer properties in the TypeScript PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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. +Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from AWS S3, and ensure that the document exists in the target bucket. ```typescript @@ -213,6 +211,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example. +N> Install the AWSSDK.S3 NuGet package in the web service application to use the previous code example. [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%20Server-Backend) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-active-directory.md index 1f005eb3e..af585f46e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-active-directory.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-active-directory.md @@ -1,36 +1,34 @@ --- layout: post -title: Save PDF To AAD Typescript Pdfviewer | Syncfusion -description: Learn how to Save PDF To AAD in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Azure Active Directory (AAD) in TypeScript PDF Viewer | Syncfusion +description: Learn how to load and save PDF files with Azure Active Directory (AAD) using the Syncfusion TypeScript PDF Viewer component and a server-backed web service. platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug -domainurl: ##DomainURL## --- -# Save PDF To Azure Active Directory in Viewer +# Save PDF files to Azure Active Directory (AAD) -### **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 TypeScript PDF Viewer component supports loading and saving PDF files with Azure Active Directory (AAD). The following steps describe how to securely load and store PDF documents using a server-backed web service. -### **Steps to Open the PDF File from Azure Active Directory** +### Steps to open the PDF file 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 the 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**. ![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. @@ -41,9 +39,9 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **Step 2: Create the Azure Storage Account** +### Step 2: Create the Azure Storage account -1. **Create a 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.). @@ -51,12 +49,12 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az --- -### **Step 3: Assign Role to the Application** +### Step 3: Assign a role to the application -1. **Go to your Storage Account**: +1. Go to the 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. @@ -66,20 +64,20 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az ![add-role](../images/add-role.png) --- -### **Step 4: Upload the PDF Document to the Azure Storage Account** +### Step 4: Upload the PDF document 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**: +1. Configure server-side code: - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file: - `tenantId` (your Azure AD tenant ID), - `clientId` (your registered application client ID), @@ -87,34 +85,34 @@ The Syncfusion PDF Viewer allows you to load and save PDF files directly from Az - `blobServiceEndpoint` (your storage account blob service URL), - `containerName` (your container name in Azure Blob Storage). -2. **Run the Web Service**: +2. Run the web service: - After configuring the necessary details, run the web service to make it accessible. --- -### **Step 6: Client-Side Configuration** +### Step 6: Client-side configuration -1. **Run the TS Sample**: +1. Run the TypeScript sample: - Start the TS sample that includes the Syncfusion PDF Viewer. -2. **Load PDF from AAD**: +2. Load a PDF from AAD: - When the user clicks the **Load from AAD** button, the JS 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. -3. **Display PDF in the PDF Viewer**: +3. Display the PDF in the PDF Viewer: - Once the base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method. --- -### **Step 7: Save the PDF Document to Azure** +### Step 7: Save the PDF document to Azure -1. **Save PDF to AAD**: +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. --- -### **Server-Side Code Snippets** +### Server-side code snippets ```cs string tenantId = "Provide the tenant id here"; string clientId = "Provide the clientid here"; @@ -170,7 +168,7 @@ public async Task SaveToAAD([FromBody] Dictionary -### **Client-side Code Snippets** +### Client-side code snippets ```ts import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer'; diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md index 8034bd1c7..72bcfe2f2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-azure-blob-storage.md @@ -1,27 +1,25 @@ --- layout: post -title: Save PDF to Azure Blob Storage Typescript Pdfviewer | Syncfusion -description: Learn here all about how to Save PDF files to Azure Blob Storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Azure Blob Storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to Azure Blob Storage using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing -control: Save PDF files to Azure Blob Storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to Azure Blob Storage +# Save PDF files to Azure Blob Storage -PDF Viewer allows to save PDF file to Azure Blob Storage using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to Azure Blob Storage. +The TypeScript PDF Viewer component supports saving PDF files to Azure Blob Storage using either the standalone or server-backed configuration. The following steps demonstrate both approaches. ## Using Standalone PDF Viewer -To save a PDF file to Azure Blob Storage, you can follow the steps below +To save a PDF file to Azure Blob Storage, follow these steps: -**Step 1:** Create a PDF Viewer sample in Typescript +**Step 1:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in Typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 2:** Modify the `src/app/app.ts` File in the Angular Project +**Step 2:** Modify the `src/app/app.ts` file in the Angular project 1. Import the required namespaces at the top of the file: @@ -29,15 +27,15 @@ Follow the instructions provided in this [link](https://help.syncfusion.com/docu import { BlockBlobClient } from "@azure/storage-blob"; ``` -2. Add the following private properties to the `app.ts`, and assign the values from the configuration to the corresponding properties +2. Add the following private property to `app.ts`, and assign the value from the configuration to the corresponding property. -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 the Azure Blob Storage account. ```typescript private SASUrl: string = "*Your SAS Url in Azure*"; ``` -3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. +3. Configure a custom toolbar item for the download function to save a PDF file to Azure Blob Storage. ```typescript let toolItem1: CustomToolbarItemModel = { @@ -56,7 +54,7 @@ pdfviewer.toolbarClick = function (args) { }; ``` -4. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob as an ArrayBuffer and upload the ArrayBuffer to Azure Blob Storage using 'BlockBlobClient'. +4. Retrieve the PDF Viewer instance and save the current PDF as a Blob. Then, read the Blob as an ArrayBuffer and upload the ArrayBuffer to Azure Blob Storage using `BlockBlobClient`. ```typescript function saveDocument() { @@ -76,21 +74,21 @@ function saveDocument() { }; ``` -N> The **npm install @azure/storage-blob** package must be installed in your application to use the previous code example. +N> Install the @azure/storage-blob package in the application to use the previous code example: npm install @azure/storage-blob [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 server-backed PDF Viewer To save a PDF file to Azure Blob Storage, you can follow the steps below -**Step 1:** Create a PDF Viewer sample in Typescript +**Step 1:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in Typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project +**Step 2:** 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 later. For instructions, see this article: https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above 2. Open the `PdfViewerController.cs` file in your web service project. @@ -117,7 +115,7 @@ public PdfViewerController(IConfiguration configuration, ILogger jsonObject) } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -169,11 +167,11 @@ public IActionResult Download([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 the actual Azure Storage connection string and container name. -**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component +**Step 3:** Set the PDF Viewer properties in the TypeScript PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 contanier to the documentPath property. +Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Azure Blob Storage, and ensure that the document exists in the target container. ```typescript import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, @@ -190,6 +188,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example. +N> Install the Azure.Storage.Blobs NuGet package in the web service application to use the previous code example. [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%20Server-Backend). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md index 60783cf88..75ad0d150 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-box-cloud-file-storage.md @@ -1,27 +1,25 @@ --- layout: post -title: Save PDF files to Box cloud file storage Typescript Pdfviewer control | Syncfusion -description: Learn here all about how to Save PDF files to Box cloud file storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Box cloud storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to Box cloud storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing -control: Save PDF files to Box cloud file storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to Box cloud file storage +# Save PDF files to Box cloud storage To save a PDF file to Box cloud file storage, you can follow the steps below: -**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. **Step 2:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the 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. @@ -36,7 +34,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 the `PdfViewerController` class. In the constructor, assign configuration values to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -57,7 +55,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Box cloud file storage bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Box cloud storage folder. ```csharp [HttpPost("Download")] @@ -96,7 +94,7 @@ public async Task Download([FromBody] Dictionary } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -114,11 +112,11 @@ public async Task Download([FromBody] Dictionary } ``` -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 the actual Box access token, folder ID, client ID, and client secret. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Set the PDF Viewer properties in the TypeScript 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. +Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Box cloud storage, and ensure that the document exists in the target folder. ```typescript @@ -136,8 +134,8 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example. +N> Install the Box.V2.Core NuGet package in the web service 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 to load from Box cloud storage. 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 diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md index 09ec4c749..75067453c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-dropbox-cloud-file-storage.md @@ -1,31 +1,29 @@ --- layout: post -title: Save PDF to Dropbox cloud storage Typescript Pdfviewer | Syncfusion -description: Learn here all about how to Save PDF to Dropbox cloud file storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Dropbox in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to Dropbox using the Syncfusion TypeScript PDF Viewer component in standalone and server-backed configurations. platform: document-processing -control: Save PDF files to Dropbox cloud file storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to Dropbox cloud file storage +# Save PDF files to 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 TypeScript PDF Viewer component supports saving PDF files to Dropbox using either the standalone or server-backed configuration. The following steps demonstrate both approaches. ## Using Standalone PDF Viewer -To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below +To save a PDF file to Dropbox, 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. **Step 2:** Create a Simple PDF Viewer Sample in Typescript -Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF viewer sample in Typescript. This will give you a basic setup of the PDF viewer component. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. -**Step 3:** Modify the `src/app/app.ts` File in the Angular Project +**Step 3:** Modify the `src/app/app.ts` file in the Angular project 1. Import the required namespaces at the top of the file: @@ -33,7 +31,7 @@ Start by following the steps provided in this [link](https://help.syncfusion.com import { Dropbox } from 'dropbox'; ``` -2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage. +2. Configure a custom toolbar item for the download function to save a PDF file to Dropbox. ```typescript let toolItem1: CustomToolbarItemModel = { @@ -52,7 +50,7 @@ pdfviewer.toolbarClick = function (args) { }; ``` -3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Drop Box using the filesUpload method of the Drop Box instance. +3. Retrieve the PDF Viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Dropbox using the `filesUpload` method. N> Replace **Your Access Token** with the actual Access Token of your Drop Box account. @@ -80,23 +78,23 @@ function saveDocument() { } ``` -N> The **npm install dropbox** package must be installed in your application to use the previous code example. +N> Install the dropbox package in the application to use the previous code example: npm install dropbox [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 server-backed PDF Viewer To save a PDF file to Dropbox cloud file storage, you can follow the steps below: -**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. **Step 2:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the 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. @@ -110,7 +108,7 @@ 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 configuration values to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -127,7 +125,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Dropbox cloud file storage bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Dropbox folder. ```csharp @@ -164,7 +162,7 @@ public async Task Download([FromBody] Dictionary } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -180,11 +178,11 @@ public async Task Download([FromBody] Dictionary } ``` -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 the actual Dropbox access token and target folder name. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Set the PDF Viewer properties in the TypeScript 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. +Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Dropbox, and ensure that the document exists in the target folder. ```typescript @@ -202,6 +200,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example. +N> Install the Dropbox.Api NuGet package in the web service 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%20Server-Backed) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md index 8be5ee55f..88c0c0bea 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-cloud-storage.md @@ -1,21 +1,19 @@ --- layout: post -title: Save PDF files to Google Cloud Storage Typescript Pdfviewer control | Syncfusion -description: Learn here all about how to Save PDF files to Google Cloud Storage in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Google Cloud Storage in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to Google Cloud Storage using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing -control: Save PDF files to Google Cloud Storage -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to Google Cloud Storage +# Save PDF files to Google Cloud Storage To save a PDF file to Google Cloud Storage, you can follow the steps below: **Step 1:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the PDF Viewer application. **Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project @@ -31,7 +29,7 @@ using Google.Cloud.Storage.V1; using Google.Apis.Auth.OAuth2; ``` -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 configuration values to the corresponding fields. ```csharp // Private readonly object _storageClient @@ -60,7 +58,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Google Cloud Storage bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Cloud Storage bucket. ```csharp [HttpPost("Download")] @@ -88,7 +86,7 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -103,13 +101,13 @@ public IActionResult Download([FromBody] Dictionary jsonObject) } ``` -N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket +N> Replace the placeholder with the actual Google Cloud Storage bucket name. -N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename. +N> Replace `path/to/service-account-key.json` with the actual file path to the service account key JSON file. -**Step 3:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 3:** Set the PDF Viewer properties in the TypeScript PDF Viewer component -Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#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 Google Cloud Storage. Ensure that you correctly pass the document name from the files available in your bucket to the documentPath property. +Modify the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Cloud Storage, and ensure that the document exists in the target bucket. ```typescript @@ -127,6 +125,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example. +N> Install the Google.Cloud.Storage.V1 NuGet package in the web service application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md index 82bc2a6f3..192b0d3db 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-google-drive.md @@ -1,27 +1,25 @@ --- layout: post -title: Save PDF files to Google Drive Typescript Pdfviewer control | Syncfusion -description: Learn here all about how to Save PDF files to Google Drive in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to Google Drive in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to Google Drive using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing -control: Save PDF files to Google Drive -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to Google Drive +# Save PDF files to Google Drive To save a PDF file to Google Drive, you can follow the steps below: -**Step 1** Set up Google Drive API +**Step 1:** Set up the Google Drive API You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk). **Step 2:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the 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. @@ -35,7 +33,7 @@ using Google.Apis.Drive.v3; using Google.Apis.Util.Store; ``` -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 configuration values to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -55,7 +53,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Google Drive bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Google Drive folder. ```csharp [HttpPost("Download")] @@ -113,7 +111,7 @@ public async Task Download([FromBody] Dictionary } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -130,15 +128,15 @@ public async Task Download([FromBody] Dictionary } ``` -N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file. +N> Replace the placeholders with the actual Google Drive folder ID, application name, and the path to the OAuth 2.0 Client IDs JSON file. -N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`. +N> The folder ID is the unique identifier in the folder URL. For example, in `https://drive.google.com/drive/folders/abc123xyz456`, the ID is `abc123xyz456`. -N> You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save PDFs directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely. +N> Use a valid `client_id` from the JSON file to authenticate with the Google Drive API and save files securely. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Set the PDF Viewer properties in the TypeScript 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 Google Drive. Ensure that you correctly pass the document name from the files available in your drive folder to the documentPath property. +Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from Google Drive, and ensure that the document exists in the target folder. ```typescript @@ -156,6 +154,6 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example. +N> Install the Google.Apis.Drive.v3 NuGet package in the web service application to use the previous code example. [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-drive). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md index df4145c1d..163ab4b19 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/save-pdf-file/to-one-drive.md @@ -1,27 +1,25 @@ --- layout: post -title: Save PDF files to One Drive Typescript Pdfviewer control | Syncfusion -description: Learn here all about how to Save PDF files to One Drive in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Save PDF files to OneDrive in TypeScript PDF Viewer | Syncfusion +description: Learn how to save PDF files to OneDrive using the Syncfusion TypeScript PDF Viewer component with a server-backed web service. platform: document-processing -control: Save PDF files to One Drive -publishingplatform: Typescript +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Save PDF file to One Drive +# Save PDF files to OneDrive To save a PDF file to One Drive, you can follow the steps below: -**Step 1** Create the Microsoft graph API. +**Step 1:** Create a Microsoft Graph API application Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs. **Step 2:** Create a PDF Viewer sample in TypeScript -Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in typescript. This will set up the basic structure of your PDF Viewer application. +Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample in TypeScript. This sets up the basic structure of the 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. @@ -36,7 +34,7 @@ using Microsoft.Identity.Client; using Helpers; ``` -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 configuration values to the corresponding fields. ```csharp private IConfiguration _configuration; @@ -55,7 +53,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache } ``` -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to One Drive bucket +5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the OneDrive folder. ```csharp [HttpPost("Download")] @@ -102,7 +100,7 @@ public async Task Download([FromBody] Dictionary } ``` -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 the web service project and add the following lines below the existing `"AllowedHosts"` configuration. ```json { @@ -120,11 +118,11 @@ public async Task Download([FromBody] Dictionary ``` -N> Replace **Your_Tenent_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name. +N> Replace the placeholders with the actual tenant ID, application ID, and OneDrive folder name. -**Step 4:** Set the PDF Viewer Properties in Typescript PDF viewer component +**Step 4:** Set the PDF Viewer properties in the TypeScript 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 One Drive. Ensure that you correctly pass the document name from the files available in your drive folder to the documentPath property. +Modify the `serviceUrl` property of the PDF Viewer component with the accurate URL of the web service, replacing `https://localhost:44396/pdfviewer` with the actual server URL. Set the `documentPath` property to the desired PDF file name to load from OneDrive, and ensure that the document exists in the target folder. ```typescript @@ -142,13 +140,11 @@ viewer.load('PDF_Succinctly.pdf', null); ``` -N> The following NuGet packages are required to use the previous code example -* **Microsoft.Identity.Client** -* **Microsoft.Graph** -* **Microsoft.Extensions.Configuration** -* **Microsoft.Extensions.Configuration.FileExtensions** -* **Microsoft.Extensions.Configuration.Json** - -You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code. +N> Install the following NuGet packages in the web service application: +- Microsoft.Identity.Client +- Microsoft.Graph +- Microsoft.Extensions.Configuration +- Microsoft.Extensions.Configuration.FileExtensions +- Microsoft.Extensions.Configuration.Json [View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-one-drive) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md index 934ae65c3..d66b1a815 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-app-service-for-container.md @@ -1,58 +1,47 @@ --- layout: post -title: How to deploy docker image in azure app service for container in Typescript Pdfviewer control | Syncfusion -description: Learn here all about How to deploy docker image in azure app service for container in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: How to deploy docker image in azure app service for container -publishingplatform: Typescript +title: Deploy Docker image to Azure App Service for Containers +description: Step-by-step guide to deploy the Syncfusion PDF Viewer server Docker image to Azure App Service for Containers and connect it to a TypeScript (JavaScript ES6) client. +platform: javascript-es6 +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# How to deploy docker image in azure app service for container in Typescript Pdfviewer control +# Deploy Docker image to Azure App Service for Containers ## Prerequisites -* Have [`Azure account`](https://azure.microsoft.com/en-gb/) and [`Azure CLI`](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) setup in your environment. +- Azure account and Azure CLI installed: https://docs.microsoft.com/cli/azure +- Sign in to Azure: -* Run the following command to open the Azure login page. Sign into your [`Microsoft Azure account`](https://azure.microsoft.com/en-gb/). - -``` +```console az login ``` **Step 1:** Create a resource group. -Create a resource group using the [`az group create`](https://docs.microsoft.com/en-us/cli/azure/group#az-group-create) command. - -The following example creates a resource group named pdfviewerresourcegroup in the eastus location. - -``` +```console az group create --name pdfviewerresourcegroup --location "East US" ``` **Step 2:** Create an Azure App Service plan. -Create an App Service plan in the resource group with the [`az appservice plan create`](https://docs.microsoft.com/en-us/cli/azure/appservice/plan?view=azure-cli-latest#az-appservice-plan-create) command. - -The following example creates an App Service plan named pdfviewerappservice in the Standard pricing tier (--sku S1) and in a Linux container (--is-linux). - -``` +```console az appservice plan create --name pdfviewerappservice --resource-group pdfviewerresourcegroup --sku S1 --is-linux ``` **Step 3:** Create a Docker Compose app. -Create a multi-container [`web app`](https://docs.microsoft.com/en-us/azure/app-service/containers/app-service-linux-intro) in the pdfviewerappservice App Service plan with the [`az webapp create`](https://docs.microsoft.com/en-us/cli/azure/webapp?view=azure-cli-latest#az-webapp-create) command. The following command creates the web app using the provided Docker compose file. Please look into the section for getting started with Docker compose to create the Docker compose file for the PDF Viewer server and use the created Docker compose file here. +Create a multi-container web app in the plan using your docker-compose file (ensure it references syncfusion/pdfviewer-server:latest and sets SYNCFUSION_LICENSE_KEY). -``` -az webapp create --resource-group pdfviewerappservice --plan pdfviewerappservice --name pdfviewer-server --multicontainer-config-type compose --multicontainer-config-file pdfviewer-server-compose.yml +```console +az webapp create --resource-group pdfviewerresourcegroup --plan pdfviewerappservice --name pdfviewer-server --multicontainer-config-type compose --multicontainer-config-file pdfviewer-server-compose.yml ``` **Step 4:** Browse to the app. -Browse to the deployed app at `http://.azurewebsites.net`,. i.e. `http://pdfviewerappservice.azurewebsites.net`. Open this link in a browser and navigate to the PDF Viewer Web API control `http://pdfviewerappservice.azurewebsites.net/api/pdfviewer`. It returns the default get method response. +Open the app at http://.azurewebsites.net (for example, http://pdfviewerappservice.azurewebsites.net). Verify the API at http://pdfviewerappservice.azurewebsites.net/api/pdfviewer to confirm a default GET response. -Append the app service running the URL `http://pdfviewerappservice.azurewebsites.net/api/pdfviewer` to the service URL in the client-side PDF Viewer control. For more information about how to get started with the PDF Viewer control, refer to this [`getting started page`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/?). +Append the service endpoint (for example, http://pdfviewerappservice.azurewebsites.net/api/pdfviewer) to the PDF Viewer client’s serviceUrl. Getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/ -For more information about the app container service, please look deeper into the [`Microsoft Azure Container Service`](https://docs.microsoft.com/en-us/azure/app-service/containers/quickstart-multi-container) for a production-ready setup. \ No newline at end of file +For production guidance, see Microsoft Azure App Service for containers: https://docs.microsoft.com/azure/app-service/containers/quickstart-multi-container diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md index 043ff9d30..1095cf533 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-docker-image-in-azure-kubernetes-service.md @@ -1,61 +1,47 @@ --- layout: post -title: How to deploy docker image in azure kubernetes service in Typescript Pdfviewer control | Syncfusion -description: Learn here all about How to deploy docker image in azure kubernetes service in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: How to deploy docker image in azure kubernetes service -publishingplatform: Typescript +title: Deploy Docker image to Azure Kubernetes Service (AKS) +description: Deploy the Syncfusion PDF Viewer server Docker image to Azure Kubernetes Service (AKS), expose it with a LoadBalancer, and connect it to a TypeScript (JavaScript ES6) client. +platform: javascript-es6 +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# How to deploy docker image in azure kubernetes service in Typescript Pdfviewer control +# Deploy Docker image to Azure Kubernetes Service (AKS) ## Prerequisites -* Have [`Azure account`](https://azure.microsoft.com/en-gb/) and [`Azure CLI`](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) setup in your environment. +- Azure account and Azure CLI installed: https://docs.microsoft.com/cli/azure +- Sign in to Azure: -* Run the following command to open the Azure login page. Sign into your [`Microsoft Azure account`](https://azure.microsoft.com/en-gb/). - -``` +```console az login ``` **Step 1:** Create a resource group. -Create a resource group using the [`az group create`](https://docs.microsoft.com/en-us/cli/azure/group#az-group-create) command. - -The following example creates a resource group named pdfviewerresourcegroup in the eastus location. - -``` +```console az group create --name pdfviewerresourcegroup --location "East US" ``` -**Step 2:** Create AKS cluster. - -Use the [`az aks create`](https://docs.microsoft.com/en-us/cli/azure/aks?view=azure-cli-latest#az-aks-create) command to create an AKS cluster. The following example creates a cluster named pdfviewercluster with one node. +**Step 2:** Create an AKS cluster. -``` +```console az aks create --resource-group pdfviewerresourcegroup --name pdfviewercluster --node-count 1 ``` **Step 3:** Connect to the cluster. -Install the [`kubectl`](https://kubernetes.io/docs/reference/kubectl/kubectl/) into the workspace using the following command. +Install kubectl and configure access. -``` +```console az aks install-cli -``` - -To configure kubectl to connect to your Kubernetes cluster, use the [`az aks get-credentials`](https://docs.microsoft.com/en-us/cli/azure/aks?view=azure-cli-latest#az-aks-get-credentials) command. This command downloads credentials and configures the Kubernetes CLI to use them. - -``` az aks get-credentials --resource-group pdfviewerresourcegroup --name pdfviewercluster ``` **Step 4:** Create services and deployments. -[`Kubernetes Services`](https://kubernetes.io/docs/concepts/services-networking/service/) and [`Deployments`](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) can be configured in a file. To run the PDF Viewer server, you have to define a Service and a Deployment pdfviewerserver. To do this, create the pdfviewer-server.yaml file in the current directory using the following code. +Create a pdfviewer-server.yaml file with a Deployment and a Service. ```yaml apiVersion: apps/v1 @@ -69,20 +55,19 @@ spec: selector: matchLabels: app: pdfviewerserver - strategy: {} template: metadata: labels: app: pdfviewerserver spec: containers: - - image: syncfusion/pdfviewerserver:latest - name: pdfviewerserver - ports: - - containerPort: 80 - env: - - name: SYNCFUSION_LICENSE_KEY - value: "YOUR_LICENSE_KEY" + - image: syncfusion/pdfviewerserver:latest + name: pdfviewerserver + ports: + - containerPort: 80 + env: + - name: SYNCFUSION_LICENSE_KEY + value: "YOUR_LICENSE_KEY" --- apiVersion: v1 kind: Service @@ -92,27 +77,22 @@ metadata: name: pdfviewerserver spec: ports: - - port: 80 - targetPort: 80 + - port: 80 + targetPort: 80 selector: app: pdfviewerserver type: LoadBalancer ``` -**Step 5:** To create all Services and Deployments needed to run the PDF Viewer server, execute the following. - -```console -kubectl create -f ./pdfviewer-server.yaml -``` - -Run the following command to get the Kubernetes cluster deployed with service details and copy the external IP address of the PDF Viewer service. +**Step 5:** Apply the configuration and get the external IP. ```console +kubectl apply -f ./pdfviewer-server.yaml kubectl get all ``` -Browse the copied external IP address and navigate to the PDF Viewer Web API control `http:///api/pdfviewer`. It returns the default get method response. +Browse to http:///api/pdfviewer to verify the default GET response. -**Step 6:** Append the Kubernetes service running the URL `http:///api/pdfviewer` to the service URL in the client-side PDF Viewer control. For more information about how to get started with the PDF Viewer control, refer to this [`getting started page`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/?). +**Step 6:** Use the service endpoint (for example, http:///api/pdfviewer) as the client’s serviceUrl. Getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/ -For more details about the Azure Kubernetes service, please look deeper into [`Microsoft Azure Kubernetes Service`](https://docs.microsoft.com/en-us/azure/aks/kubernetes-walkthrough) for a production-ready setup. \ No newline at end of file +For production guidance, see Azure Kubernetes Service documentation: https://docs.microsoft.com/azure/aks/kubernetes-walkthrough diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md index 0a735e04b..b91685261 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/how-to-deploy-pdfviewer-server-app-in-azure-app-service-from-visual-studio.md @@ -1,43 +1,41 @@ --- layout: post -title: How to deploy pdfviewer server app in azure app service from visual studio in Typescript Pdfviewer control | Syncfusion -description: Learn here all about How to deploy pdfviewer server app in azure app service from visual studio in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: How to deploy pdfviewer server app in azure app service from visual studio -publishingplatform: Typescript +title: Deploy PDF Viewer server app to Azure App Service from Visual Studio +description: Publish the Syncfusion PDF Viewer Web API application from Visual Studio to Azure App Service and connect it to a TypeScript (JavaScript ES6) client. +platform: javascript-es6 +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# How to deploy pdfviewer server app in azure app service from visual studio in Typescript Pdfviewer control +# Deploy PDF Viewer server app to Azure App Service from Visual Studio ## Prerequisites -* Visual Studio 2017 or Visual Studio 2019. -* An [`Azure subscription`](https://azure.microsoft.com/en-gb/). -* Create the [`PDF Viewer Web API application`](https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core). -* Make sure you’ve built the project using the Build > Build Solution menu command before following the deployment steps. +- Visual Studio 2017 or 2019 +- Azure subscription: https://azure.microsoft.com/ +- A PDF Viewer Web API application: https://www.syncfusion.com/kb/10346/how-to-create-pdf-viewer-web-service-application-in-asp-net-core +- Build the project (Build > Build Solution) before publishing ## Publish to Azure App Service -**Step 1:** In Solution Explorer, right-click the project and choose Publish (or use the Build > Publish menu item). +**Step 1:** In Solution Explorer, right-click the project and choose Publish (or use Build > Publish). - ![azure publish ](../images/azure_publish.png) +![azure publish](../images/azure_publish.png) -**Step 2:** If you have previously configured any publishing profiles, the Publish pane appears, in which case, select Create new profile. +**Step 2:** If a profile exists, select Create new profile. -**Step 3:** In the Pick a publish target dialog box, choose App Service. +**Step 3:** In Pick a publish target, choose App Service. ![azure target](../images/azure_target.png) -**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, then the default app service settings populate the fields. +**Step 4:** Select Publish. In Create App Service, sign in if prompted and review the default settings. -![azure pdfviewer ](../images/azure_pdfviewer.png) +![azure pdfviewer](../images/azure_pdfviewer.png) -**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser at `http://.azurewebsites.net`. (i.e. `http:// ej2-pdfviewer-server20200513053326.azurewebsites.net`). +**Step 5:** Select Create. After deployment, the app loads at http://.azurewebsites.net (for example, http://ej2-pdfviewer-server20200513053326.azurewebsites.net). -**Step 6:** Navigate to the PDF Viewer Web API control `http://ej2-pdfviewer-server20200513053326.azurewebsites.net/api/pdfviewer`. It returns the default get method response. +**Step 6:** Verify the API at http://ej2-pdfviewer-server20200513053326.azurewebsites.net/api/pdfviewer. A default GET response indicates the server is running. -Append the app service running the URL `http://ej2-pdfviewer-server20200513053326.azurewebsites.net./api/pdfviewer` to the service URL in the client-side PDF Viewer control. For more information about how to get started with the PDF Viewer control, refer to this [`getting started page`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/?). +Use the service endpoint (for example, http://ej2-pdfviewer-server20200513053326.azurewebsites.net/api/pdfviewer) as the PDF Viewer client’s serviceUrl. Getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/ -For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup. \ No newline at end of file +For production guidance, see Azure App Service deployment documentation: https://docs.microsoft.com/visualstudio/deployment/ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md index 1b346855b..6a0cde4b2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/server-deployment/pdfviewer-server-docker-image-overview.md @@ -1,30 +1,27 @@ --- layout: post -title: PDF Viewer Server Docker Image in Typescript | Syncfusion -description: Learn here all about Pdfviewer server docker image overview in Syncfusion Typescript Pdfviewer control of Syncfusion Essential JS 2 and more. -platform: document-processing -control: Pdfviewer server docker image overview -publishingplatform: Typescript +title: PDF Viewer server Docker image overview +description: Learn how to run and connect to the Syncfusion PDF Viewer server Docker image, set the license key, and configure Redis cache in a TypeScript (JavaScript ES6) application. +platform: javascript-es6 +control: PDF Viewer documentation: ug -domainurl: ##DomainURL## --- -# Pdfviewer server docker image overview in Typescript Pdfviewer control +# PDF Viewer server Docker image overview -The Syncfusion PDF Viewer control allows you to view, print, form-fill, and annotate PDF files in your web applications. This PDF Viewer control requires a server-side backend Web API service to render PDF contents. +The Syncfusion PDF Viewer component enables viewing, printing, form filling, and annotating PDF files in web applications. The client component requires a server-side Web API to process and render PDF content. -This Docker image is the predefined Docker container of Syncfusion’s PDF Viewer backend. You can deploy it quickly to your infrastructure. +This Docker image provides a preconfigured container for the PDF Viewer server backend and can be deployed quickly in most environments. -PDF Viewer is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key) +PDF Viewer is a commercial product and requires a valid license in production environments. Request a license or trial key from the Syncfusion licensing portal: https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key -PDF Viewer control is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms. +PDF Viewer is available for JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor. ## Prerequisites -Have [`Docker`](https://www.docker.com/products/container-runtime/#/download) installed in your environment: +Install Docker in the target environment: -* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). - -* On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows). +- On Windows, install Docker Desktop for Windows: https://hub.docker.com/editions/community/docker-ce-desktop-windows +- On macOS, install Docker Desktop for Mac: https://hub.docker.com/editions/community/docker-ce-desktop-mac ## How to use this PDF Viewer Docker image @@ -34,7 +31,7 @@ Have [`Docker`](https://www.docker.com/products/container-runtime/#/download) in docker pull syncfusion/pdfviewer-server ``` -**Step 2:** Create the docker-compose.yml file with the following code in your file system. +**Step 2:** Create a docker-compose.yml file in the desired folder. ```yaml version: '3.4' @@ -43,27 +40,27 @@ services: pdfviewer-server: image: syncfusion/pdfviewer-server:latest environment: - #Provide your license key for activation + # Provide your license key for activation SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY ports: - - "6001:80" + - "6001:80" ``` -**Step 3:** In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and execute the following. +**Step 3:** In a terminal, navigate to the folder containing docker-compose.yml and run: ```console docker-compose up ``` -Also, you can run the Docker container along with the license key using this docker run command. +Alternatively, run the container directly with the license key: ```console docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY= YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest ``` -Now the PDF Viewer server Docker instance runs in the localhost with the provided port number `http://localhost:6001`. Open this link in the browser and navigate to the PDF Viewer Web API control `http://localhost:6001/api/pdfviewer`. It returns the default get method response. +When the container starts, the server is available at http://localhost:6001. Open the API endpoint at http://localhost:6001/api/pdfviewer to verify the default GET response. -**Step 4:** Append the Docker instance running the URL `(http://localhost:6001/api/pdfviewer)` to the service URL in the client-side PDF Viewer control. For more information about how to get started with PDF Viewer control, refer to this [`getting started page`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/?). +**Step 4:** Set the PDF Viewer client’s serviceUrl to the server endpoint (for example, http://localhost:6001/api/pdfviewer). For details on creating a client application, see the getting started guide: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started/ ```html @@ -113,13 +110,13 @@ if(ele) { ``` -## How to configure the distributed Redis Cache in this Docker image +## How to configure the distributed Redis cache in this Docker image -The PDF Viewer server library internally caches the loaded document instance and you can extend the cache option to a distributed cache environment. Please follow these steps to configure the Azure Cache for a Redis instance to the PDF Viewer server library using a Docker compose file. +The PDF Viewer server caches loaded document instances. To use a distributed cache, configure Azure Cache for Redis with docker-compose as follows. -**Step 1:** Create the [`Azure Cache for the Redis instance`](https://docs.microsoft.com/en-us/azure/azure-cache-for-redis/cache-dotnet-core-quickstart) and copy the connection string. +**Step 1:** Create an Azure Cache for Redis instance and copy the connection string: https://docs.microsoft.com/azure/azure-cache-for-redis/cache-dotnet-core-quickstart -**Step 2:** Provide the connection string to the `REDIS_CACHE_CONNECTION_STRING` environment variable in the pdfviewer-server docker-compose file. The default cache sliding expiration time is 10 minutes. You can also configure it by setting the value to the `DOCUMENT_SLIDING_EXPIRATION_TIME` environment variable. +**Step 2:** Provide the connection string with the REDIS_CACHE_CONNECTION_STRING variable in docker-compose. The default sliding expiration is 10 minutes. To change it, set DOCUMENT_SLIDING_EXPIRATION_TIME. ```yaml version: '3.4' @@ -127,12 +124,18 @@ services: pdfviewer-server: image: syncfusion/pdfviewer-server:latest environment: - #Provide your license key for activation + # Provide your license key for activation SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY REDIS_CACHE_CONNECTION_STRING: YOUR_REDIS_CACHE_CONNECTION_STRING DOCUMENT_SLIDING_EXPIRATION_TIME: “20” ports: - - "6001:80" + - "6001:80" ``` -Refer to these getting started pages to create a PDF Viewer in [`Angular`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started), [`React`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started), [`Vue`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started), [`ASP.NET MVC`]https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started), [`ASP.NET Core`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started), and [`Blazor`](https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/server-side-application). \ No newline at end of file +Refer to the getting started guides: +- Angular: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started +- React: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started +- Vue: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/vue/getting-started +- ASP.NET MVC: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started +- ASP.NET Core: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started +- Blazor: https://blazor.syncfusion.com/documentation/pdfviewer/getting-started/server-side-application diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/cp-command-not-recognized.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/cp-command-not-recognized.md index 747a51cc8..26a8f9f8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/cp-command-not-recognized.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/cp-command-not-recognized.md @@ -1,26 +1,31 @@ --- layout: post -title: Troubleshoot 'cp' is not recognized as a command in Typescript PDF Viewer control | Syncfusion -description: Learn here all about how to solve 'cp' is not recognized as a command in Syncfusion Essential JS 2 and more. +title: Fix "cp is not recognized" on Windows for the TypeScript PDF Viewer +description: Use Windows-friendly copy commands to replace Unix cp when copying ej2-pdfviewer-lib assets for the TypeScript PDF Viewer—examples for CMD (xcopy) and PowerShell (Copy-Item). platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug -domainurl: ##DomainURL## --- # Troubleshoot error 'cp' is not recognized as a command -The error message you're seeing, "'cp' is not recognized as an internal or external command," is because the `cp` command you're trying to use is not recognized on Windows command prompt. +The Unix `cp` command is not available in the Windows Command Prompt. Use one of the following Windows-native alternatives to copy the required assets. -On Windows, you should use the `copy` command to copy files and directories instead of `cp`. The equivalent command in Windows to copy a directory and its contents recursively is: +- CMD (xcopy) — recursive directory copy: ```batch xcopy /s /e /i .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib src\ej2-pdfviewer-lib ``` -Here, `/s` indicates that you want to copy directories and subdirectories recursively. Also, note that Windows uses backslashes `\` as path separators, not forward slashes `/`. +- PowerShell (Copy-Item) — recursive directory copy: -Make sure to run this command in the appropriate directory where you want to perform the copy operation. +```powershell +Copy-Item .\node_modules\@syncfusion\ej2-pdfviewer\dist\ej2-pdfviewer-lib -Destination .\src\ej2-pdfviewer-lib -Recurse -Force +``` + +Notes: +- Run the command from the project root so the node_modules path resolves correctly. +- Windows paths use backslashes (\). Adjust paths if your project structure differs. +- Ensure sufficient permissions to write to the destination folder. -**Note:** If you encounter other issues or error messages while working with the Windows Command Prompt, make sure to double-check your command syntax and file paths for accuracy. Additionally, ensure that you have the necessary permissions to perform the copy operation in the specified directories. \ No newline at end of file +For cross-platform scripts in package.json, consider tools such as "shx" or "copyfiles" to avoid OS-specific commands. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md index 5afff5d92..6ddc55471 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/document-loading-issues.md @@ -1,18 +1,17 @@ --- layout: post -title: Document Loading Issues in Version 23.1 or Newer Typescript Pdfviewer Component -description: Learn here all about troubleshooting Document Loading Issues in Version 23.1 or newer in Typescript Pdfviewer of Syncfusion Essential JS 2 and more. +title: Fix document loading issues in v23.1+ for the TypeScript PDF Viewer component +description: Resolve document rendering failures in v23.1 or newer by calling dataBind before load, verifying source URLs, checking CORS and CSP, and confirming network connectivity in the TypeScript PDF Viewer. platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug --- # Document Loading Issues in Version 23.1 or Newer -If you're experiencing problems with your document not rendering in the viewer, especially when using version 23.1 or a newer version, follow these troubleshooting steps to resolve the issue: +If the document does not render in the viewer when using version 23.1 or newer, follow these steps: -1. **Check for `viewer.dataBind()` Requirement**: Ensure that you have called `viewer.dataBind()` as required in version 23.1 or newer. This explicit call is essential for initializing data binding and document rendering correctly. It is must to call the dataBind() method before load. +1. Call `pdfviewer.dataBind()` before `load()`. Starting with v23.1, an explicit dataBind call is required to initialize data binding and render correctly. ```ts import { PdfViewer, Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, @@ -28,18 +27,12 @@ pdfviewer.dataBind(); pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); ``` -2. **Verify Document Source**: Confirm that the document source or URL you're trying to display is valid and accessible. Incorrect URLs or document paths can lead to loading issues. +2. Verify the document source. Ensure the URL or path is valid and accessible. +3. Check network connectivity. The viewer cannot fetch the document without a stable connection. +4. Inspect console errors. Use browser developer tools to identify issues. +5. Validate the initialization order. Initialize the viewer, call `dataBind()`, then call `load()`. +6. Update to the latest viewer version. Issues may be resolved in newer releases. +7. Configure CORS correctly for cross-domain documents. +8. Review Content Security Policy (CSP) settings. Ensure external resources are permitted. See the Content Security Policy troubleshooting guide in the Syncfusion documentation for details. -3. **Network Connectivity**: Ensure that your application has a stable network connection. Document rendering may fail if the viewer can't fetch the document due to network issues. - -4. **Console Errors**: Use your browser's developer tools to check for any error messages or warnings in the console. These messages can provide insights into what's causing the document not to load. - -5. **Loading Sequence**: Make sure that you're calling `viewer.dataBind()` and initiating document loading in the correct sequence. The viewer should be properly initialized before attempting to load a document. - -7. **Update Viewer**: Ensure that you're using the latest version of the viewer library or framework. Sometimes, issues related to document loading are resolved in newer releases. - -8. **Cross-Origin Resource Sharing (CORS)**: If you're loading documents from a different domain, ensure that CORS headers are correctly configured to allow cross-origin requests. - -9. **Content Security Policies (CSP)**: Check if your application's Content Security Policy allows the loading of external resources, as this can affect document loading. Refer [here](https://ej2.syncfusion.com/javascript/documentation/common/troubleshoot/content-security-policy) to troubleshoot. - -By following these troubleshooting steps, you should be able to address issues related to document loading in version 23.1 or newer, ensuring that your documents render correctly in the viewer. \ No newline at end of file +Following this checklist typically resolves document loading issues in v23.1 or newer. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/troubleshooting.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/troubleshooting.md index e9da5416c..37c0020b5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/troubleshooting.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/troubleshooting/troubleshooting.md @@ -1,18 +1,19 @@ --- layout: post -title: Manually Copy Files from node_modules in Typescript PDF Viewer control | Syncfusion -description: Learn here all about why do i have to manually copy files from node_modules in Syncfusion Essential JS 2 and more. +title: Why manual copy from node_modules is required in the TypeScript PDF Viewer +description: Understand why certain lazy-loaded assets from ej2-pdfviewer-lib must be copied from node_modules when not using a bundler, how pdfium.js is handled, and when to reference assets directly in the TypeScript PDF Viewer. platform: document-processing control: PDF Viewer -publishingplatform: Typescript documentation: ug -domainurl: ##DomainURL## --- # Why Do I Have to Manually Copy Files from node_modules into My App? -PDF Viewer offers flexibility across different build systems, remaining both framework-agnostic and independent of bundlers. Even without a bundler, you can seamlessly integrate the PDF Viewer by directly linking its assets through standard HTML tags. +The PDF Viewer supports multiple build systems and can work without a bundler by referencing assets directly using HTML tags. To keep load times efficient, the library is split into smaller modules and uses lazy loading for certain assets. -Moreover, our codebase is meticulously divided into distinct files, enabling selective loading of components when required. This strategic approach to lazy loading prevents unwieldy file sizes that a single bundle might impose, which is often impractical. +- The primary entry point, "pdfium.js", is typically included by bundlers automatically. +- Additional resources under "ej2-pdfviewer-lib" are loaded on demand at runtime. Because the host app does not know about these lazy-loaded files, they are not automatically emitted by bundlers or available to static servers unless they are copied and referenced. -While 'pdfium.js,' the primary entry point, is commonly bundled automatically, the supplementary assets from 'ej2-pdfviewer-lib' need to be manually incorporated due to their on-demand loading. This necessity arises because the host application lacks inherent awareness of these assets' lazy loading behavior. \ No newline at end of file +When not using a bundler (or when the bundler does not emit these assets), copy the required files from node_modules to a web-accessible path in your app (for example, "src/ej2-pdfviewer-lib") and reference them accordingly. This ensures the viewer can fetch the lazy-loaded assets when needed and prevents runtime 404 errors. + +If a bundler is configured to emit static assets from node_modules, verify that the output contains the necessary files from "@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib" and that your app serves them from a public path. Otherwise, perform a manual copy step during your build process. From 7c4182f2fb2a84b55d9ee927e1865d33a78f03b0 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Fri, 3 Oct 2025 09:49:36 +0530 Subject: [PATCH 02/21] 984044: UG document restructure for TS --- Document-Processing-toc.html | 73 +++ .../PDF/PDF-Viewer/javascript-es6/download.md | 2 +- .../PDF/PDF-Viewer/javascript-es6/faq.md | 66 +++ ...how-to-add-annotation-in-text-search-ts.md | 97 ++++ .../faq/how-to-add-header-value.md | 33 ++ .../faq/how-to-add-save-button-ts.md | 108 +++++ .../faq/how-to-annotation-selectors.md | 32 ++ ...e-author-name-using-annotation-settings.md | 59 +++ .../faq/how-to-clear-annotations.md | 54 +++ ...configure-annotationselector-setting-ts.md | 67 +++ .../javascript-es6/faq/how-to-conformance.md | 27 ++ ...how-to-control-annotation-visibility-ts.md | 122 +++++ ...-library-bounds-to-pdf-viewer-bounds-ts.md | 137 ++++++ .../how-to-create-pdfviewer-service-core.md | 430 ++++++++++++++++++ .../faq/how-to-create-pdfviewer-service.md | 279 ++++++++++++ .../faq/how-to-custom-context-menu.md | 296 ++++++++++++ .../how-to-custom-font-signature-field-ts.md | 69 +++ .../faq/how-to-custom-fonts-ts.md | 51 +++ .../faq/how-to-customize-text-search-color.md | 70 +++ .../faq/how-to-delete-annotation.md | 35 ++ .../faq/how-to-disable-context-menu.md | 35 ++ .../faq/how-to-disable-tile-rendering.md | 37 ++ ...-display-custom-tool-tip-for-annotation.md | 42 ++ .../faq/how-to-download-start-event-ts.md | 31 ++ .../faq/how-to-enable-local-storage-ts.md | 45 ++ .../faq/how-to-enable-resize.md | 25 + .../faq/how-to-enable-text-selection-ts.md | 65 +++ .../faq/how-to-export-as-image-ts.md | 110 +++++ .../faq/how-to-extract-text-completed-ts.md | 35 ++ .../faq/how-to-extract-text-option-ts.md | 56 +++ .../faq/how-to-extract-text-ts.md | 84 ++++ .../faq/how-to-find-text-async-ts.md | 96 ++++ .../faq/how-to-get-base64-ts.md | 62 +++ .../faq/how-to-get-page-info-ts.md | 50 ++ ...w-to-highlight-underline-strikeout-text.md | 37 ++ .../how-to-identify-added-annotation-mode.md | 28 ++ .../faq/how-to-import-annotations.md | 130 ++++++ .../faq/how-to-import-export-annotation-ts.md | 72 +++ .../faq/how-to-load-document.md | 48 ++ .../faq/how-to-min-max-zoom-ts.md | 112 +++++ .../faq/how-to-open-bookmark-ts.md | 43 ++ .../faq/how-to-open-thumbnail.md | 33 ++ .../faq/how-to-overlapped-annotation.md | 27 ++ ...agerenderstarted-pagerendercompleted-ts.md | 41 ++ .../faq/how-to-print-document.md | 33 ++ ...lve-unable-to-find-an-entry-point-error.md | 27 ++ ...w-to-restricting-zoom-in-mobile-mode-ts.md | 71 +++ .../faq/how-to-save-pdf-document-to-url.md | 121 +++++ .../how-to-select-multi-page-annotations.md | 35 ++ .../faq/how-to-show-custom-stamp-item-ts.md | 52 +++ .../faq/how-to-show-hide-annotation-ts.md | 82 ++++ ...to-signatureselect-signatureunselect-ts.md | 40 ++ .../faq/how-to-unload-document.md | 33 ++ .../javascript-es6/faq/images/Coreapp.png | Bin 0 -> 61828 bytes .../javascript-es6/faq/images/Coreapp1.png | Bin 0 -> 22480 bytes .../faq/images/CoreappCreate.png | Bin 0 -> 22405 bytes .../ErrorinformationuintheNetworkTab.png | Bin 0 -> 70374 bytes .../faq/images/Nugetpackage.png | Bin 0 -> 27391 bytes .../javascript-es6/faq/images/Start.png | Bin 0 -> 67372 bytes .../javascript-es6/faq/images/add-revised.png | Bin 0 -> 28372 bytes .../javascript-es6/faq/images/add-shapes.png | Bin 0 -> 19221 bytes .../faq/images/add-signature.png | Bin 0 -> 22529 bytes .../faq/images/add-sticky-notes.png | Bin 0 -> 20021 bytes .../faq/images/add-text-markup.png | Bin 0 -> 23517 bytes .../faq/images/addformfield.gif | Bin 0 -> 94430 bytes .../faq/images/adding-signature.png | Bin 0 -> 19302 bytes .../after-enabling-annotation-toolbar.png | Bin 0 -> 18960 bytes .../faq/images/api-controller.png | Bin 0 -> 80992 bytes .../faq/images/apicontroller.png | Bin 0 -> 40609 bytes .../faq/images/appearanceproperties.png | Bin 0 -> 62299 bytes .../faq/images/azure_pdfviewer.png | Bin 0 -> 54989 bytes .../faq/images/azure_publish.png | Bin 0 -> 22968 bytes .../faq/images/azure_target.png | Bin 0 -> 12220 bytes .../javascript-es6/faq/images/bookmark.png | Bin 0 -> 88444 bytes .../faq/images/change-property.png | Bin 0 -> 23044 bytes .../faq/images/clipboardformfield.png | Bin 0 -> 75195 bytes .../faq/images/close-comment-panel.png | Bin 0 -> 6322 bytes .../faq/images/comment-panel.png | Bin 0 -> 18581 bytes .../faq/images/default-template.png | Bin 0 -> 87447 bytes .../javascript-es6/faq/images/delete-icon.png | Bin 0 -> 23763 bytes .../faq/images/delete_button.png | Bin 0 -> 47729 bytes .../javascript-es6/faq/images/download.png | Bin 0 -> 28938 bytes .../faq/images/dragformfield.gif | Bin 0 -> 98661 bytes .../faq/images/dropdownproperties.png | Bin 0 -> 71291 bytes .../faq/images/edit-annotation.png | Bin 0 -> 16388 bytes .../javascript-es6/faq/images/edit_color.png | Bin 0 -> 55977 bytes .../faq/images/edit_opacity.png | Bin 0 -> 44045 bytes .../faq/images/generalproperties.png | Bin 0 -> 60454 bytes .../faq/images/highlight_button.PNG | Bin 0 -> 46241 bytes .../faq/images/highlight_context.png | Bin 0 -> 47247 bytes .../faq/images/ink-annotation.png | Bin 0 -> 28262 bytes .../javascript-es6/faq/images/link.png | Bin 0 -> 56224 bytes .../javascript-es6/faq/images/navigation.png | Bin 0 -> 46189 bytes .../faq/images/open-comment.png | Bin 0 -> 23349 bytes .../faq/images/open-fillcolor.png | Bin 0 -> 21372 bytes .../javascript-es6/faq/images/open-ink.png | Bin 0 -> 18662 bytes .../javascript-es6/faq/images/open-radius.png | Bin 0 -> 19925 bytes .../javascript-es6/faq/images/open-stamp.png | Bin 0 -> 28981 bytes .../faq/images/openexistingpdf.gif | Bin 0 -> 98092 bytes .../javascript-es6/faq/images/pan.png | Bin 0 -> 44086 bytes .../faq/images/pdfviewer-dependency.png | Bin 0 -> 158580 bytes .../javascript-es6/faq/images/print.png | Bin 0 -> 45039 bytes .../faq/images/printformfield.gif | Bin 0 -> 98428 bytes .../faq/images/radius-annotation.png | Bin 0 -> 22784 bytes .../faq/images/resizeformfield.gif | Bin 0 -> 96653 bytes .../faq/images/saveformfield.gif | Bin 0 -> 97787 bytes .../javascript-es6/faq/images/search.png | Bin 0 -> 80906 bytes .../javascript-es6/faq/images/select-text.png | Bin 0 -> 23051 bytes .../javascript-es6/faq/images/selection.png | Bin 0 -> 50279 bytes .../faq/images/solution-explorer.png | Bin 0 -> 52072 bytes .../faq/images/sticky-notes-in-page.png | Bin 0 -> 20085 bytes .../faq/images/strikethrough_button.png | Bin 0 -> 47296 bytes .../faq/images/strikethrough_context.png | Bin 0 -> 47404 bytes .../faq/images/text_markup_annotation.png | Bin 0 -> 45919 bytes .../javascript-es6/faq/images/thumbnail.png | Bin 0 -> 38072 bytes .../javascript-es6/faq/images/toc.png | Bin 0 -> 42093 bytes .../javascript-es6/faq/images/toolbar.png | Bin 0 -> 30896 bytes .../faq/images/underline_button.png | Bin 0 -> 46772 bytes .../faq/images/underline_context.png | Bin 0 -> 47128 bytes .../faq/images/viewer-dependency.png | Bin 0 -> 76382 bytes .../javascript-es6/faq/images/zoom.png | Bin 0 -> 60529 bytes .../javascript-es6/feature-module.md | 16 +- .../bookmark-navigation.md | 80 ++++ .../hyperlink-navigation.md | 21 + .../page-navigation.md | 195 ++++++++ .../page-thumbnail-navigation.md | 48 ++ .../table-of-content-navigation.md | 76 ++++ .../PDF/PDF-Viewer/javascript-es6/print.md | 171 ++++++- .../annotation-toolbar-customization.md | 0 .../toolbar-customization/custom-toolbar.md | 0 .../form-designer-toolbar-customization.md | 0 .../toolbar-customization/mobile-toolbar.md | 134 ++++++ .../organize-page-toolbar.md | 0 .../primary-toolbar-customization.md | 133 ++++++ 134 files changed, 4809 insertions(+), 10 deletions(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-add-annotation-in-text-search-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-add-header-value.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-add-save-button-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-annotation-selectors.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-change-author-name-using-annotation-settings.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-clear-annotations.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-configure-annotationselector-setting-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-conformance.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-control-annotation-visibility-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-create-pdfviewer-service-core.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-create-pdfviewer-service.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-custom-context-menu.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-custom-font-signature-field-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-custom-fonts-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-customize-text-search-color.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-delete-annotation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-disable-context-menu.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-disable-tile-rendering.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-display-custom-tool-tip-for-annotation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-download-start-event-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-enable-local-storage-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-enable-resize.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-enable-text-selection-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-export-as-image-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-extract-text-completed-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-extract-text-option-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-extract-text-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-find-text-async-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-get-base64-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-get-page-info-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-highlight-underline-strikeout-text.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-identify-added-annotation-mode.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-import-annotations.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-import-export-annotation-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-load-document.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-min-max-zoom-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-open-bookmark-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-open-thumbnail.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-overlapped-annotation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-pagerenderstarted-pagerendercompleted-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-print-document.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-resolve-unable-to-find-an-entry-point-error.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-restricting-zoom-in-mobile-mode-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-save-pdf-document-to-url.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-select-multi-page-annotations.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-show-custom-stamp-item-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-show-hide-annotation-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-signatureselect-signatureunselect-ts.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/how-to-unload-document.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/Coreapp.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/Coreapp1.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/CoreappCreate.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/ErrorinformationuintheNetworkTab.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/Nugetpackage.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/Start.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/add-revised.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/add-shapes.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/add-signature.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/add-sticky-notes.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/add-text-markup.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/addformfield.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/adding-signature.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/after-enabling-annotation-toolbar.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/api-controller.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/apicontroller.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/appearanceproperties.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/azure_pdfviewer.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/azure_publish.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/azure_target.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/bookmark.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/change-property.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/clipboardformfield.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/close-comment-panel.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/comment-panel.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/default-template.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/delete-icon.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/delete_button.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/download.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/dragformfield.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/dropdownproperties.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/edit-annotation.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/edit_color.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/edit_opacity.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/generalproperties.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/highlight_button.PNG create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/highlight_context.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/ink-annotation.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/link.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/navigation.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/open-comment.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/open-fillcolor.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/open-ink.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/open-radius.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/open-stamp.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/openexistingpdf.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/pan.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/pdfviewer-dependency.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/print.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/printformfield.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/radius-annotation.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/resizeformfield.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/saveformfield.gif create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/search.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/select-text.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/selection.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/solution-explorer.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/sticky-notes-in-page.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/strikethrough_button.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/strikethrough_context.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/text_markup_annotation.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/thumbnail.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/toc.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/toolbar.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/underline_button.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/underline_context.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/viewer-dependency.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/faq/images/zoom.png create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/hyperlink-navigation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/table-of-content-navigation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar-customization.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar-customization.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/organize-page-toolbar.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar-customization.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 14bbb0eb0..b244ac412 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1019,8 +1019,28 @@
  • Toolbar
    • +
  • Toolbar Customization + +
  • Mobile Toolbar Interface
  • Navigation
    • +
  • Interactive Navigation + +
  • Magnification
  • Accessibility
  • Text Search
    • @@ -1112,6 +1132,59 @@
  • Show and Hide Annotations
    • +
  • FAQ + +
  • Troubleshooting
    • -
  • Organize Pages
    • +
  • Organize Pages + +
  • Print
  • Download
  • Globalization
    • @@ -1079,7 +1088,7 @@
  • How to Deploy PdfViewer Server App in Azure App Service from Visual Studio
    • -
  • How To +
  • How to
    • -
  • FAQ - -
  • Troubleshooting