From 8379231daed32db9e3a55035ad56239cc571b024 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 14 Oct 2025 18:28:54 +0530 Subject: [PATCH 1/5] 986772: Updated missing API for annotation Section --- .../annotations/free-text-annotation.md | 44 ++++++++++ .../annotations/ink-annotation.md | 24 +++++- .../annotations/measurement-annotation.md | 24 ++++++ .../annotations/shape-annotation.md | 63 +++++++++++++- .../annotations/signature-annotation.md | 43 ++++++++++ .../annotations/stamp-annotation.md | 84 ++++++++++++++++++- .../annotations/sticky-notes-annotation.md | 6 +- .../annotations/text-markup-annotation.md | 42 ++++++++++ 8 files changed, 326 insertions(+), 4 deletions(-) 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 528d51092..e0d3c71bf 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 @@ -12,6 +12,26 @@ domainurl: ##DomainURL## The PDF Viewer control provides options to add, edit, and delete free text annotations. +## Enable or Disbale Free Text annotation + +Enables or disables the free text annotation feature in the PDF Viewer. For more details, see [enableFreeText API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablefreetext). + +```html +
+``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib', + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + enableFreeText: false +}); +viewer.appendTo('#pdfViewer'); +``` + ## Add a free text annotation to the PDF document Free text annotations can be added to the PDF document using the annotation toolbar. @@ -309,3 +329,27 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} + +N> To know more about FreeTextSettings, you can refer [FreeTextSettings API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#freetextsettings) + +## Set default free text placeholder + +The `isValidFreeText` property specifies whether newly added free text annotations display a placeholder. By default, `isValidFreeText` is `true`. +- `true`: Displays **Type here** as placeholder text. +- `false`: Leaves the annotation blank so that user-entered text remains visible. + +For more information, see [isValidFreeText API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isvalidfreetext). + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib', + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + // Set to true to display "Type here" as default text + // Set to false to retain user-entered text + isValidFreeText: true +}); +viewer.appendTo('#pdfViewer'); +``` \ No newline at end of file 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 46b11cc07..af320d477 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 @@ -14,6 +14,26 @@ The PDF Viewer control provides options to add, edit, and delete ink annotations ![Ink annotations overview](../images/ink_annotation.png) +## Enable or disable ink annotation + +Enables or disables the ink annotation feature in the PDF Viewer; defaults to true. For details, see [enableInkAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableinkannotation). + +```html +
+``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", + resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib", + enableInkAnnotation: false +}); +viewer.appendTo('#pdfViewer'); +``` + ## Add an ink annotation to the PDF document Ink annotations can be added to the PDF document using the annotation toolbar. @@ -269,4 +289,6 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +N> To know more about FreeTextSettings, you can refer [inkAnnotationSettings API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#inkannotationsettings) \ No newline at end of file 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 16dd71d3e..3028f1eda 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 @@ -629,3 +629,27 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} + +## Enable or disable import annotation measurement + +Controls whether the PDF Viewer recalculates measurement values for imported measurement annotations. For details, see [enableImportAnnotationMeasurement API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableimportannotationmeasurement). + +- true: Recalculates and displays measurement values using the viewer's current scale ratio and units. +- false: Preserves the values embedded in the imported annotations (no recalculation), which can appear as original comment text. + +```html +
+``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer({ + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib', + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + // Enable or disable import annotation measurement customization + enableImportAnnotationMeasurement: false +}); +viewer.appendTo('#pdfViewer'); +``` 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 5fc78e959..b8f727eae 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 @@ -18,6 +18,27 @@ The PDF Viewer control provides options to add, edit, and delete shape annotatio * Circle * Polygon +## Enable or disable shape annotation support + +Enables or disables the shape annotation feature in the PDF Viewer; defaults to true. For more information, see [enableShapeAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableshapeannotation) + +```html +
+``` + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer(); +viewer.resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib', +viewer.documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', +// Enable or disable shape annotation. +viewer.enableShapeAnnotation = false; +viewer.appendTo("#pdfViewer"); +``` + ![Shape annotations overview](../images/shape_annot.png) ## Adding a shape annotation to the PDF document @@ -514,6 +535,14 @@ Refer to the following code sample to set the default annotation settings. ## Set default properties during control initialization +The following properties can be used to set default shape annotation properties: + +- **lineSettings**: Default LineSettingsModel. See [LineSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#linesettings) +- **arrowSettings**: Default ArrowSettingsModel. See [ArrowSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#arrowsettings) +- **rectangleSettings**: Default RectangleSettingsModel. See [RectangleSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings) +- **circleSettings**: Default CircleSettingsModel. See [CircleSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#circlesettings) +- **polygonSettings**: Default PolygonSettingsModel. See [PolygonSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#polygonsettings) + Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. {% tabs %} @@ -551,4 +580,36 @@ pdfviewer.polygonSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yell pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + + +## Enable or disable shape label visibility + +Enables or disables the display of shape labels in the PDF Viewer; defaults to true. For more information, see [enableShapeLabel API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableshapelabel) + +```html +
+``` + +```ts +// Enable or disable shape labels. +viewer.enableShapeLabel = true; +``` + +## Configure shape label settings + +Defines the settings for shape labels using the [ShapeLabelSettingsModel] API. For more information, see [shapeLabelSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#shapelabelsettings) + +```ts +// Change the shape label settings. +viewer.shapeLabelSettings = { + opacity: 1, + fillColor: '#9c2592', + borderColor: '#ff0000', + fontColor: '#000', + fontSize: 16, + labelHeight: 24.6, + labelMaxWidth: 151, + labelContent: 'XYZ' +}; +``` \ No newline at end of file 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 565c36c7c..456ecca00 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 @@ -114,6 +114,49 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +## Control editability of handwritten signatures after download + +Use the isSignatureEditable property to control whether handwritten signatures remain editable after download. When set to false, signatures are flattened and cannot be edited after the file is downloaded. When set to true, signatures are preserved as editable. Defaults to false. + +For details, refer to the isSignatureEditable API. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; + +// Keep handwritten signatures editable after download (set to false to prevent editing) +pdfviewer.isSignatureEditable = true; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +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"; + +// Keep handwritten signatures editable after download (set to false to prevent editing) +pdfviewer.isSignatureEditable = true; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +> API reference: For more information, see [isSignatureEditable API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#issignatureeditable) + ## 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. 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 30c8f16e9..831a5ae8c 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 @@ -144,6 +144,45 @@ if (standardBusinessStamp) { {% endhighlight %} {% endtabs %} +## Enable or disable stamp annotations + +Use the `enableStampAnnotations` API to enable or disable stamp annotation in the PDF Viewer loads. Defaults to true. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; +// Enable or disable stamp annotations. +pdfviewer.enableStampAnnotations = false; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +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"; +// Enable or disable stamp annotations. +pdfviewer.enableStampAnnotations = false; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +>API reference: For more information about enableStampAnnotations, see [enableStampAnnotations API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablestampannotations) + ## Add a custom stamp to the PDF document * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it. @@ -311,6 +350,8 @@ if (customStamp) { {% endhighlight %} {% endtabs %} +> API reference: For more information about customStamp, see [customStamp API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stampsettings) + ## Edit an existing stamp annotation programmatically To modify an existing stamp annotation programmatically, use the editAnnotation() method. @@ -417,4 +458,45 @@ pdfviewer.stampSettings = {opacity: 0.3, author: 'Guest User'} pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +> API reference: For more information about stampSettings, see [stampSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stampsettings) + +## Configure custom stamp settings + +Use the customStampSettings property (CustomStampSettingsModel) to configure default behavior and constraints for custom stamp annotations, including size, position, locking, print behavior, and enabling custom stamp mode. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; +// Change the custom stamp settings. +pdfviewer.customStampSettings = { opacity: 1, author: 'XYZ', width: 100, height: 100, left: 200, top: 200, minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false, enableCustomStamp: true, allowedInteractions: ['None'], isPrint: true }; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +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"; +// Change the custom stamp settings. +pdfviewer.customStampSettings = { opacity: 1, author: 'XYZ', width: 100, height: 100, left: 200, top: 200, minHeight: 10, minWidth: 10, maxWidth: 100, maxHeight: 100, isLock: false, enableCustomStamp: true, allowedInteractions: ['None'], isPrint: true }; + +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +> API reference: For more information about customStampSettings, see [customStampSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#customstampsettings) 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 675193433..6b12504e4 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 @@ -218,6 +218,8 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +>API reference: For more information about stickyNotesSettings, see [stickyNotesSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#stickynotessettings) + ## Disable sticky note annotations The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. @@ -249,4 +251,6 @@ pdfviewer.enableStickyNotesAnnotation = false; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +>API reference: For more information about enableStickyNotesAnnotation, see [enableStickyNotesAnnotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablestickynotesannotation) \ No newline at end of file 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 44a285e84..f5206de05 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 @@ -960,6 +960,11 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +> API reference: +> * For more information about highlightSettings, see [highlightSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#highlightsettings). +> * For more information about underlineSettings, see [underlineSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#underlinesettings). +> * For more information about strikethroughSettings, see [strikethroughSettings API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#strikethroughsettings). + ## Perform undo and redo The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for: @@ -1084,6 +1089,43 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +>API reference: For more information about enabletextmarkupannotation, see [enabletextmarkupannotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupannotation). + +## Enable or disable text markup resizer + +Enable or disable the text markup resizer using the `enableTextMarkupResizer` API. Defaults to `false`. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +let pdfviewer: PdfViewer = new PdfViewer(); +pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; +pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; +viewer.enableTextMarkupResizer = true; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer); + +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.enableTextMarkupResizer = true; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + +>For more information about enabletextmarkupresizer, see [enabletextmarkupresizer API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) + ## See also * [Toolbar items](../toolbar) From e468a9a063bef29832b90173d1a7631a23eeba82 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 15 Oct 2025 12:50:22 +0530 Subject: [PATCH 2/5] 986772: Updated form designer missing API's --- .../form-designer/create-programmatically.md | 23 +++++++++++++++++ .../create-with-user-interface-interaction.md | 25 ++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) 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 f09497c8f..e468dba03 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 @@ -20,6 +20,29 @@ The PDF Viewer component provides options to add, edit, and delete form fields. - Signature field - Initial field +## Enable or Disable form designer toolbar + +Inject the FormDesigner module and set `enableFormDesigner` to `false` to display the Form Designer icon on the toolbar. The default value is `true`. You can refer [enableFormDesigner API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableformdesigner) for more information. + +Use the following code to enable or disable the form designer toolbar option. + + + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, Annotation, FormDesigner, FormFields); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib', + enableFormDesigner: false +}); +pdfviewer.appendTo('#PdfViewer'); +``` + ## Add a form field to PDF document programmatically 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. 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 cfcdb2540..e3da1c297 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 @@ -22,7 +22,11 @@ The PDF Viewer component supports interactive form field design, including drawi ## Enable or Disable form designer toolbar -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. +Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. + +You can refer to [enableFormDesignerToolbar API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableformdesignertoolbar) for more information. + +Use the following code to enable the toolbar option. ```ts import { PdfViewer } from '@syncfusion/ej2-pdfviewer'; @@ -33,6 +37,25 @@ pdfviewer.enableFormDesignerToolbar= true; ``` +## Show or hide form designer toolbar on initial load + +Open or close the form designer toolbar when the PDF document is loaded initially in the PDF Viewer control. Use the `isFormDesignerToolbarVisible` property to get or set the annotation toolbar visible status. The default value is false. You can refer to [isFormDesignerToolbarVisible API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isformdesignertoolbarvisible) for more information. + +Use the following code to enable or disable the form desinger toolbar on load: + +```ts +import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, + BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner); + +let viewer: PdfViewer = new PdfViewer(); +viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib'; +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', +viewer.appendTo('#pdfViewer'); +viewer.isFormDesignerToolbarVisible=true; +``` + ## Add the form field dynamically Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. From cd7cc437c8c63ae78d4f1e164b4ee427394f5e40 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 15 Oct 2025 14:47:50 +0530 Subject: [PATCH 3/5] 986772: Updated missing API Navigation Section --- .../bookmark-navigation.md | 8 ++++++++ .../page-navigation.md | 16 ++++++++++++++++ .../page-thumbnail-navigation.md | 14 ++++++++++++++ 3 files changed, 38 insertions(+) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md index d85c345b8..1a556346e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark-navigation.md @@ -73,6 +73,14 @@ document.getElementById('getBookmarks').addEventListener('click', () => { }); ``` +## Show or hide the bookmark panel on load + +The `isBookmarkPanelOpen` property gets or sets a boolean value to show or hide the bookmark panel while loading a document. Defaults to false. You can refer to [isBookmarkPanelOpen API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isbookmarkpanelopen) for mor Details + +```ts + viewer.isBookmarkPanelOpen = true; +``` + ## See also * [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md index e3f590f37..920f77b3f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-navigation.md @@ -188,6 +188,22 @@ document.getElementById('goToPreviousPage').addEventListener('click', () => { Find the [here](https://stackblitz.com/edit/5dqbkd?file=index.ts) to perform the page navigation options programmatically. +## Enable or disable navigation module and toolbar on load + +The `enableNavigation` property gets or sets a boolean value to enable or disable the page navigation of PDF Viewer while loading a document. Defaults to true. You can refer to [enableNavigation API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablenavigationtoolbar) for more information. + +```ts + // Enable or disable page navigation + viewer.enableNavigation = true; +``` + +The `enableNavigationToolbar` property gets or sets a boolean value to enable or disable the navigation toolbar of PDF Viewer while loading a document. Defaults to true. You can refer to [enableNavigationToolbar API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablenavigation) for more information. + +```ts + // Enable or disable navigation toolbar + viewer.enableNavigationToolbar = true; +``` + ## See also * [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md index be72aca9a..15d1cd5bb 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail-navigation.md @@ -41,6 +41,20 @@ pdfviewer.appendTo('#PdfViewer'); ![Alt text](../images/thumbnail.png) +## Enable or disable thumbnail view on load + +The `enableThumbnail` property gets or sets a boolean value to enable or disable the thumbnail view in PDF Viewer while loading a document. Defaults to true. You can refer to [enableThumbnail API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablenavigationtoolbar) for more information. + +```ts + viewer.enableThumbnail = false; +``` +## Show or hide thumbnail view panel on load + +The `isThumbnailViewOpen` property gets or sets a boolean value to show or hide the thumbnail view while loading a document. Defaults to false. You can refer to [isThumbnailViewOpen API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isthumbnailviewopen) for more information. + +```ts + viewer.isThumbnailViewOpen = true; +``` ## See also * [Toolbar items](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/toolbar/) From be35fca1577cd8e0b7ee7f56f22e27e502797e92 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 15 Oct 2025 18:26:01 +0530 Subject: [PATCH 4/5] 986772: Updated missing API for toolbar Section --- .../annotation-toolbar-customization.md | 18 ++++ .../form-designer-toolbar-customization.md | 16 ++++ .../primary-toolbar-customization.md | 86 +++++++++++++++++++ 3 files changed, 120 insertions(+) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar-customization.md index 0cc5fe09d..65046cb3f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar-customization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/annotation-toolbar-customization.md @@ -78,6 +78,24 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} +## Show annotation toolbar on initial load + +The `isAnnotationToolbarOpen` property gets or sets a boolean value to open the annotation toolbar when the PDF Viewer control loads a document initially. Defaults to false. See [isAnnotationToolbarOpen API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isannotationtoolbaropen) for details. + +```ts +// Show annotation toolbar on initial load +viewer.isAnnotationToolbarOpen = true; +``` + +## Show annotation toolbar on initial load and retrieve visible status + +The `isAnnotationToolbarVisible` property gets or sets a boolean value to open the annotation toolbar when the PDF Viewer control loads a document initially and retrieve its visible status. Defaults to false. See [isAnnotationToolbarVisible API documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#isannotationtoolbarvisible) for details. + +```ts +// Show annotation toolbar on initial load and check visibility +viewer.isAnnotationToolbarVisible = true; +``` + ## How to customize the annotation toolbar Choose which tools appear and control their order in the annotation toolbar. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar-customization.md index 8b9ea3202..d9b24bbb0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar-customization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/form-designer-toolbar-customization.md @@ -74,6 +74,22 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +### Enable or disable form designer toolbar on initial load + +Use the [enableFormDesignerToolbar](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#enableformdesignertoolbar) property to open the form designer toolbar when the PDF document is loaded initially. It accepts a boolean value and defaults to true. + +```ts +viewer.enableFormDesignerToolbar = false; +``` + +### Show form designer toolbar on initial load and retrieve visible status + +Use the [`isFormDesignerToolbarVisible`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/pdfViewerModel/#isformdesignertoolbarvisible) property to open the form designer toolbar when the PDF document is loaded initially and retrieve its visible status. It accepts a boolean value and defaults to false. + +```ts +viewer.isFormDesignerToolbarVisible = true; +``` + ## How to customize the form designer toolbar Choose which tools appear and control their order in the form designer toolbar. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar-customization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar-customization.md index e3f26c0cd..6c7b84849 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar-customization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/primary-toolbar-customization.md @@ -72,6 +72,17 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +## Enable or disable navigation toolbar on load + +Use the [enableNavigationToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableNavigationToolbar) property to show or hide the navigation toolbar when the PDF Viewer is loaded. + +Show or hide the navigation toolbar using the `enableNavigationToolbar` property: + +```ts + // Enable or disable navigation tool bar. +viewer.enableNavigationToolbar = true; +``` + The following code snippet explains how to show or hide the toolbar using the `showToolbar` method. {% tabs %} @@ -130,3 +141,78 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} + +## Configure toolbar settings + +Use the [toolbarSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property to define the settings of the PDF Viewer toolbar. It accepts a `ToolbarSettingsModel` object for configuring primary, annotation, and form designer toolbars. + +The following example demonstrates how to customize tooltip visibility and the toolbar items for each toolbar: + +```ts +import {PdfViewer, Toolbar, Magnification, Navigation, + LinkAnnotation, ThumbnailView, BookmarkView,TextSelection, TextSearch, Print, Annotation, FormFields,FormDesigner, +} from '@syncfusion/ej2-pdfviewer'; + +PdfViewer.Inject(Toolbar, Magnification, Navigation, + LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, + TextSearch, Print, Annotation, FormFields, FormDesigner +); + +let viewer: PdfViewer = new PdfViewer(); +viewer.resourceUrl = + 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib'; +viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; +// Change the tool bar settings. +viewer.toolbarSettings = { + showTooltip: false, + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption', + ], + annotationToolbarItems: [ + 'HighlightTool', + 'UnderlineTool', + 'StrikethroughTool', + 'ColorEditTool', + 'OpacityEditTool', + 'AnnotationDeleteTool', + 'StampAnnotationTool', + 'HandWrittenSignatureTool', + 'InkAnnotationTool', + 'ShapeTool', + 'CalibrateTool', + 'StrokeColorEditTool', + 'ThicknessEditTool', + 'FreeTextAnnotationTool', + 'FontFamilyAnnotationTool', + 'FontSizeAnnotationTool', + 'FontStylesAnnotationTool', + 'FontAlignAnnotationTool', + 'FontColorAnnotationTool', + 'CommentPanelTool', + ], + formDesignerToolbarItems: [ + 'TextboxTool', + 'PasswordTool', + 'CheckBoxTool', + 'RadioButtonTool', + 'DropdownTool', + 'ListboxTool', + 'DrawSignatureTool', + 'DeleteTool', + ], +}; +viewer.appendTo('#pdfViewer'); + +``` \ No newline at end of file From aebc9093ee152fcd465eb1543cc0228697ae1ca8 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 15 Oct 2025 19:30:24 +0530 Subject: [PATCH 5/5] 986772: Updated Missing API for download interaction magnification navigation print and text search --- .../PDF/PDF-Viewer/javascript-es6/download.md | 14 +++++- .../javascript-es6/interaction-mode.md | 2 +- .../javascript-es6/magnification.md | 2 +- .../PDF-Viewer/javascript-es6/navigation.md | 18 +++++++ .../PDF/PDF-Viewer/javascript-es6/print.md | 17 ++++++- .../PDF-Viewer/javascript-es6/text-search.md | 49 ++++++++++++++++++- 6 files changed, 96 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md index 9de12ca6c..7dccefdcc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md @@ -9,7 +9,12 @@ domainurl: ##DomainURL## --- # Download in Typescript Pdf viewer control -The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet. +The PDF Viewer supports downloading the loaded PDF file. + +## Enable or disable download option +Use the [enableDownload](https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#enableDownload) property to enable or disable the download option when the PDF Viewer is loaded. It accepts a boolean value and defaults to true. + +You can enable/disable the download using the following code snippet. ```html @@ -103,6 +108,13 @@ pdfviewer.download(); {% endhighlight %} {% endtabs %} +## Customize download file name +Use the [downloadFileName](https://ej2.syncfusion.com/documentation/api/pdfviewer/pdfViewerModel/#downloadFileName) property to set the download file name for the PDF Viewer. It accepts a string value. For example: + +```ts +viewer.downloadFileName = 'Document_Downloaded'; +``` + ## How to get the base64 string while downloading the PDF document The [downloadEnd](https://ej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event of the PDF viewer allows you to get the downloaded document as a base64 string. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md index 1fde05e4c..a228a02dc 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Interaction mode in Typescript Pdfviewer control -The PDF Viewer provides interaction mode for easy interaction with the loaded PDF document. Selection mode and panning mode are the two interactions modes. +The PDF Viewer provides interaction mode for easy interaction with the loaded PDF document. Selection mode and panning mode are the two interactions modes. You can refer to [interactionMode API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#interactionmode) for more information. ## Selection mode diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md index 7c93f1521..68b43007d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Magnification in Typescript Pdfviewer control -The magnification tools of the PDF Viewer contains ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools in the default toolbar. The PDF Viewer also has an option to show or hide the magnification tools in the default toolbar. +The magnification tools of the PDF Viewer contains ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools in the default toolbar. The PDF Viewer also has an option to show or hide the magnification tools in the default toolbar. You can refer to [enableMagnification API Documention](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablemagnification) for more information. The following code snippet describes how to enable the magnification in PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md index 6126b01d0..28984fa39 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md @@ -12,6 +12,24 @@ domainurl: ##DomainURL## The ASP.NET Core PDF Viewer supports different internal and external navigations. +## Enable or disable navigation features + +The following properties allow you to toggle navigation: + +**enableNavigation** (boolean) + Enables or disables the Navigation module of PDF Viewer. Defaults to true. [API reference](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablenavigation) + ```ts + // Enable or disable navigation + viewer.enableNavigation = false; + ``` + +**enableNavigationToolbar** (boolean) + Enables or disables the Navigation toolbar of PDF Viewer. Defaults to true. [API reference](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enablenavigationtoolbar) + ```ts + // Enable or disable navigation toolbar + viewer.enableNavigationToolbar = true; + ``` + ## Toolbar page navigation option The default toolbar of PDF Viewer contains the following navigation options diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md index 00a801840..b1634b5c8 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md @@ -9,7 +9,18 @@ domainurl: ##DomainURL## --- # Print in Typescript Pdfviewer control -The PDF Viewer supports printing the loaded PDF file. You can enable/disable the print using the following code snippet. +The PDF Viewer supports printing the loaded PDF file. + +## Enable or disable print option. + +The `enablePrint` property enables or disables the print option of the PDF Viewer. The default value is `true`. For more details, see the [enablePrint](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableprint) API documentation. + +```ts + // Enable or disable print. + viewer.enablePrint = false; +``` + +You can enable/disable the print using the following code snippet. ```html @@ -137,7 +148,9 @@ pdfviewer.appendTo('#PdfViewer'); ## EnablePrintRotation in the PDF Viewer -The `EnablePrintRotation` property controls whether landscape pages are auto-rotated to best fit when printing. The default value is `true`. Set to `false` to preserve the original page orientation and suppress automatic rotation during print. +The `EnablePrintRotation` property controls whether landscape pages are auto-rotated to best fit when printing. The default value is `true`. Set to `false` to preserve the original page orientation and suppress automatic rotation during print. You can refer to [EnablePrintRotation API Documentation](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enableprintrotation) for more information. + +You can enable/disable the print rotation using the following code snippet. {% tabs %} {% highlight ts tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search.md index f199bb140..5e978cb99 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search.md @@ -9,7 +9,13 @@ domainurl: ##DomainURL## --- # Text search in Typescript Pdfviewer control -The Text Search option in PDF Viewer is used to find and highlight the text content from the document. You can enable/disable the text search using the following code snippet. +The Text Search option in PDF Viewer is used to find and highlight the text content from the document. + +## Enable or disable text search option. + +Use [enableTextSearch](https://ej2.syncfusion.com/documentation/api/pdfviewer/#enabletextsearch) to enable or disable the text search in the PDF Viewer. + +You can enable/disable the text search using the following code snippet. ```html @@ -66,6 +72,47 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} +## Customize text search highlight colors + +Use [textSearchColorSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#textsearchcolorsettings) property to customize the color of the text search highlight and search term. + +You can customize the highlight and search colors using the following code snippet. + +{% tabs %} +{% highlight ts tabtitle="Standalone" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib' }); +pdfviewer.textSearchColorSettings = { + searchHighlightColor: '#4070ff', + searchColor: '#FF4081' +}; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% highlight ts tabtitle="Server-Backed" %} + +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection); + +let pdfviewer: PdfViewer = new PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', + serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' + }); + +pdfviewer.textSearchColorSettings = { + searchHighlightColor: '#4070ff', + searchColor: '#FF4081' +}; +pdfviewer.appendTo('#PdfViewer'); + +{% endhighlight %} +{% endtabs %} + ## Text search features ### Real time search suggestion while typing