From 2499b724caa04c5a3116760ccd431e31fcd0454c Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Fri, 19 Jun 2026 19:12:58 +0530 Subject: [PATCH 1/7] 1033233: Service URL changes updated for Typescript PDF Viewer --- .../Localization/default-language.md | 13 - .../javascript-es6/accessibility.md | 60 - .../annotation-types/Squiggly-annotation.md | 108 -- .../annotation-types/area-annotation.md | 89 -- .../annotation-types/arrow-annotation.md | 67 -- .../annotation-types/circle-annotation.md | 89 -- .../annotation-types/free-text-annotation.md | 95 -- .../annotation-types/highlight-annotation.md | 102 -- .../annotation-types/ink-annotation.md | 81 -- .../annotation-types/line-annotation.md | 88 -- .../annotation-types/perimeter-annotation.md | 106 -- .../annotation-types/polygon-annotation.md | 90 -- .../annotation-types/radius-annotation.md | 96 -- .../annotation-types/rectangle-annotation.md | 89 -- .../annotation-types/stamp-annotation.md | 109 -- .../sticky-notes-annotation.md | 61 - .../strikethrough-annotation.md | 116 -- .../annotation-types/underline-annotation.md | 115 -- .../annotation-types/volume-annotation.md | 98 -- .../annotations/annotations-undo-redo.md | 4 - .../javascript-es6/annotations/comments.md | 91 -- .../annotations/customize-annotation.md | 34 - .../annotations/free-text-annotation.md | 311 ----- .../annotations/ink-annotation.md | 272 ----- .../annotations/measurement-annotation.md | 631 ----------- .../annotations/shape-annotation.md | 554 --------- .../annotations/signature-annotation.md | 35 - .../annotations/stamp-annotation.md | 420 ------- .../annotations/sticky-notes-annotation.md | 252 ---- .../annotations/text-markup-annotation.md | 1009 ----------------- .../PDF/PDF-Viewer/javascript-es6/download.md | 29 - .../import-form-fields.md | 2 - .../javascript-es6/globalization.md | 12 - .../how-to/add-save-button-ts.md | 26 - ...e-author-name-using-annotation-settings.md | 13 - ...-library-bounds-to-pdf-viewer-bounds-ts.md | 2 +- .../how-to/custom-context-menu.md | 2 - .../javascript-es6/how-to/min-max-zoom-ts.md | 39 - .../restricting-zoom-in-mobile-mode-ts.md | 25 - .../javascript-es6/interaction-mode.md | 22 - .../interactive-pdf-navigation/bookmark.md | 11 - .../interactive-pdf-navigation/hyperlink.md | 53 - .../page-thumbnail.md | 12 - .../interactive-pdf-navigation/page.md | 47 - .../javascript-es6/magnification.md | 12 - .../PDF-Viewer/javascript-es6/navigation.md | 95 -- .../open-pdf-file/from-amazon-s3.md | 129 +-- .../open-pdf-file/from-azure-blob-storage.md | 117 +- .../from-dropbox-cloud-file-storage.md | 130 +-- .../organize-pages/programmatic-support.md | 39 - .../javascript-es6/organize-pages/toolbar.md | 39 - .../PDF-Viewer/javascript-es6/organize-pdf.md | 39 - .../PDF/PDF-Viewer/javascript-es6/print.md | 99 -- .../print/enable-print-rotation.md | 15 - .../PDF-Viewer/javascript-es6/print/events.md | 34 - .../javascript-es6/print/overview.md | 39 - .../javascript-es6/print/print-modes.md | 15 - .../javascript-es6/print/print-quality.md | 15 - .../save-pdf-file/to-azure-blob-storage.md | 116 +- .../to-dropbox-cloud-file-storage.md | 124 +- .../javascript-es6/text-search/find-text.md | 68 -- .../text-search/text-search-features.md | 61 - .../javascript-es6/textselection.md | 17 - .../toolbar-customization/custom-toolbar.md | 14 - .../toolbar-customization/mobile-toolbar.md | 27 - .../PDF/PDF-Viewer/javascript-es6/toolbar.md | 491 -------- .../document-loading-issues.md | 2 +- 67 files changed, 7 insertions(+), 7310 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md index 175c5f2a24..ee18fb449e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md @@ -34,19 +34,6 @@ const pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; -import {L10n} from '@syncfusion/ej2-base'; -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); - -const 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/'; - locale: 'en-US' //Using locale update culture -}); -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md index acfcb88985..e87551bde7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/accessibility.md @@ -188,66 +188,6 @@ pdfviewer.commandManager = { }; 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'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.commandManager = { - keyboardCommand: [{ - name: 'customCopy', - gesture: { - pdfKeys: PdfKeys.G, - modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt - } - }, - { - name: 'customPaste', - gesture: { - pdfKeys: PdfKeys.H, - modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt - } - }, - { - name: 'customCut', - gesture: { - pdfKeys: PdfKeys.Z, - modifierKeys: ModifierKeys.Control - } - }, - { - name: 'customSelectAll', - gesture: { - pdfKeys: PdfKeys.E, - modifierKeys: ModifierKeys.Control - } - }, - ] -}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/Squiggly-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/Squiggly-annotation.md index 4d955d5854..75bbc0a3f0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/Squiggly-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/Squiggly-annotation.md @@ -59,24 +59,6 @@ document.getElementById('squigglyMode')?.addEventListener('click', () => { pdfviewer.annotation.setAnnotationMode('Squiggly'); }); -document.getElementById('setNone')?.addEventListener('click', () => { - pdfviewer.annotation.setAnnotationMode('None'); -}); -{% 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.appendTo('#PdfViewer'); - -document.getElementById('squigglyMode')?.addEventListener('click', () => { - pdfviewer.annotation.setAnnotationMode('Squiggly'); -}); - document.getElementById('setNone')?.addEventListener('click', () => { pdfviewer.annotation.setAnnotationMode('None'); }); @@ -101,23 +83,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addSquiggly')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Squiggly', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as SquigglySettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SquigglySettings } 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.appendTo('#PdfViewer'); - document.getElementById('addSquiggly')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Squiggly', { bounds: [{ x: 97, y: 110, width: 350, height: 14 }], @@ -169,27 +134,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editSquiggly')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - const ann = pdfviewer.annotationCollection[i]; - if (ann.author === 'Guest User' || ann.subject === 'Corrections') { - ann.color = '#ff0000'; - ann.opacity = 0.8; - pdfviewer.annotation.editAnnotation(ann); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editSquiggly')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { const ann = pdfviewer.annotationCollection[i]; @@ -221,18 +165,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - squigglySettings: { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9} -}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -257,35 +189,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.p pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -//Apply Squiggly Settings while adding individual Annotation -document.getElementById('squiggly')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Squiggly', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 1', - color: '#ffff00', - opacity: 0.9 - } as SquigglySettings); - - pdfviewer.annotation.addAnnotation('Squiggly', { - bounds: [{ x: 107, y: 220, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 2', - color: '#ff1010ff', - opacity: 0.9 - } as SquigglySettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SquigglySettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //Apply Squiggly Settings while adding individual Annotation document.getElementById('squiggly')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Squiggly', { @@ -323,17 +226,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enableTextMarkupAnnotation= false; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.enableTextMarkupAnnotation= false; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/area-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/area-annotation.md index 03c0a6c61d..9a152a7efe 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/area-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/area-annotation.md @@ -45,20 +45,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('areaMode')?.addEventListener('click', function () { - pdfviewer.annotationModule.setAnnotationMode('Area'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('areaMode')?.addEventListener('click', function () { pdfviewer.annotationModule.setAnnotationMode('Area'); }); @@ -84,27 +70,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addAreaAnnotation')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Area', { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [ - { x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 } - ] - } as AreaSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, AreaSettings } 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - document.getElementById('addAreaAnnotation')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Area', { offset: { x: 200, y: 500 }, @@ -199,35 +164,6 @@ if (editAreaAnnotation) { }); } -{% 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.appendTo('#PdfViewer'); - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - {% endhighlight %} {% endtabs %} @@ -245,18 +181,6 @@ 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' }; -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.areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' }; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} @@ -352,19 +276,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; 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.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/arrow-annotation.md index b4e1774128..5742cf80e6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/arrow-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/arrow-annotation.md @@ -45,20 +45,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('arrowMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Arrow'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('arrowMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Arrow'); }); @@ -84,25 +70,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addArrowAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Arrow', { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - } as ArrowSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, ArrowSettings } 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - document.getElementById('addArrowAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Arrow', { offset: { x: 200, y: 370 }, @@ -178,28 +145,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editArrowAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Arrow') { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = '#FFFF00'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editArrowAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Arrow') { @@ -228,18 +173,6 @@ 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.arrowSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' }; -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.arrowSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' }; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/circle-annotation.md index 5e25076539..3be97f942d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/circle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/circle-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('circleMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Circle'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('circleMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Circle'); }); @@ -99,25 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addCircleAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Circle', { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - } as CircleSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, CircleSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addCircleAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Circle', { offset: { x: 200, y: 620 }, @@ -186,28 +153,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editCircleAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Circle') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = '#FFFF00'; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editCircleAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Circle') { @@ -238,17 +183,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.circleSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' }; 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.circleSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -286,29 +220,6 @@ document.getElementById('Circle')?.addEventListener('click', function () { } as CircleSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CircleSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Circle Settings while adding individual Annotation -document.getElementById('Circle')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Circle', { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75, - opacity: 0.5, - strokeColor: '#FF0000', - fillColor: '#000fff#', - author: 'User1' - } as CircleSettings); -}); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/free-text-annotation.md index 6776a48a31..092f6988ef 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/free-text-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addFreeTextAnnotation')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('FreeText'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('addFreeTextAnnotation')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('FreeText'); }); @@ -86,30 +72,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addFreeTextProgram')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('FreeText', { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: 'Helvetica', - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: 'Syncfusion' - } as FreeTextSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, FreeTextSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addFreeTextProgram')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('FreeText', { offset: { x: 120, y: 80 }, @@ -220,26 +182,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('changeContent')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('changeContent')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Text Box') { @@ -267,17 +209,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }; 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.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -318,32 +249,6 @@ document.getElementById('FreeText')?.addEventListener('click', function () { } as FreeTextSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FreeTextSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply FreeText Settings while adding individual Annotation -document.getElementById('FreeText')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('FreeText', { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: 'Helvetica', - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: 'Syncfusion', - fillColor: 'green', - borderColor: 'blue', - fontColor: 'yellow' - } as FreeTextSettings); -}); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/highlight-annotation.md index 36faee3655..29fb96fd69 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/highlight-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/highlight-annotation.md @@ -63,8 +63,6 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `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/text-markup-annotation/highlight-mode-cs1/index.html" %} #### Exit Highlight mode @@ -101,9 +99,6 @@ document.getElementById('setNone').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the below `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/text-markup-annotation/highlight-normal-mode-cs1/index.html" %} ### Add highlight annotation programmatically @@ -125,23 +120,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('highlight')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Highlight', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as HighlightSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, HighlightSettings} 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.appendTo('#PdfViewer'); - document.getElementById('highlight')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Highlight', { bounds: [{ x: 97, y: 110, width: 350, height: 14 }], @@ -194,28 +172,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editHighlight')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - const annot = pdfviewer.annotationCollection[i]; - if (annot.textMarkupAnnotationType === 'Highlight') { - annot.color = '#000fff'; - annot.opacity = 0.8; - pdfviewer.annotation.editAnnotation(annot); - break; - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editHighlight')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { const annot = pdfviewer.annotationCollection[i]; @@ -253,21 +209,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.highlightSettings= {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9}; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - }); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.highlightSettings= {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -293,35 +234,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.p pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -//Apply Highlight Settings while adding individual Annotation -document.getElementById('highlight')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Highlight', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 1', - color: '#ffff00', - opacity: 0.9 - } as HighlightSettings); - - pdfviewer.annotation.addAnnotation('Highlight', { - bounds: [{ x: 107, y: 220, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 2', - color: '#ff1010ff', - opacity: 0.9 - } as HighlightSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, HighlightSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //Apply Highlight Settings while adding individual Annotation document.getElementById('highlight')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Highlight', { @@ -360,20 +272,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion. pdfviewer.enableTextMarkupAnnotation= false; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.enableTextMarkupAnnotation= false; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/ink-annotation.md index 0ee653f70e..e635ef9750 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/ink-annotation.md @@ -86,27 +86,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addInkAnnotationProgram')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Ink', { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width: 200, - height: 60, - path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33}]' - } as InkAnnotationSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, InkAnnotationSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addInkAnnotationProgram')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Ink', { offset: { x: 150, y: 100 }, @@ -171,31 +150,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editInkAnnotation')?.addEventListener('click', function () { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'Ink') { - const width = pdfviewer.annotationCollection[i].bounds.width; - const height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width, height }; - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editInkAnnotation')?.addEventListener('click', function () { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'Ink') { @@ -230,20 +184,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ inkAnnotationSettings: { author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 } }); -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({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - inkAnnotationSettings: { author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 } -}); - -pdfviewer.appendTo('#PdfViewer'); pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} @@ -281,27 +221,6 @@ document.getElementById('Ink')?.addEventListener('click', function () { } as InkAnnotationSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InkAnnotationSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl= 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', -pdfviewer.appendTo('#PdfViewer'); -//Apply Ink Settings while adding individual Annotation -document.getElementById('Ink')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Ink', { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width: 200, - height: 60, - path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33}]', - author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 - } as InkAnnotationSettings); -}); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/line-annotation.md index cc6858c3c3..93e0bdbee3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/line-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/line-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('lineMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Line'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('lineMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Line'); }); @@ -99,24 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addLineAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Line', { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as LineSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, LineSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addLineAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Line', { offset: { x: 200, y: 230 }, @@ -197,27 +165,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editLineAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Line') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editLineAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Line') { @@ -247,17 +194,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.lineSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' }; 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.lineSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} N> In both [Arrow](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#arrowsettings) and [Line](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#linesettings) annotation settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to None, lines do not support fill rendering and the Fill Color option remains disabled. @@ -286,30 +222,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.p pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); pdfviewer.lineSettings={opacity:0.5}; -//Apply line Settings while adding individual Annotation -document.getElementById('line')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Line', { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }], - fillColor:'#ff1010ff', - strokeColor:'#fff000', - opacity:0.9, - author: 'User 1', - thickness: 1 - } as LineSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, LineSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //Apply line Settings while adding individual Annotation document.getElementById('line')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Line', { diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/perimeter-annotation.md index f9d643970a..0d46a9e010 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/perimeter-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/perimeter-annotation.md @@ -45,20 +45,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('perimeterMode')?.addEventListener('click', function () { - pdfviewer.annotationModule.setAnnotationMode('Perimeter'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('perimeterMode')?.addEventListener('click', function () { pdfviewer.annotationModule.setAnnotationMode('Perimeter'); }); @@ -84,25 +70,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addPerimeterAnnotation')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Perimeter', { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - } as PerimeterSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, PerimeterSettings } 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - document.getElementById('addPerimeterAnnotation')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Perimeter', { offset: { x: 200, y: 350 }, @@ -190,35 +157,6 @@ if (editPerimeterAnnotation) { }); } -{% 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.appendTo('#PdfViewer'); - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - {% endhighlight %} {% endtabs %} @@ -236,18 +174,6 @@ 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.perimeterSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' }; -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.perimeterSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' }; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} @@ -284,25 +210,6 @@ document.getElementById('Perimeter')?.addEventListener('click', function () { } as PerimeterSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PerimeterSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Perimeter Settings while adding individual Annotation -document.getElementById('Perimeter')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Perimeter', { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }], - fillColor: 'green', opacity: 0.6, strokeColor: 'blue' - } as PerimeterSettings); -}); -{% endhighlight %} {% endtabs %} ## Editing scale ratio and unit of the perimeter measurement annotation @@ -339,19 +246,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; 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.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/polygon-annotation.md index 189b8088a3..7b68738e36 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/polygon-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/polygon-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('polygonMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Polygon'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('polygonMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Polygon'); }); @@ -99,26 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addPolygonAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Polygon', { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [ - { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } - ] - } as PolygonSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, PolygonSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addPolygonAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Polygon', { offset: { x: 200, y: 800 }, @@ -193,28 +159,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editPolygonAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Polygon') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = '#FFFF00'; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editPolygonAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Polygon') { @@ -245,17 +189,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.polygonSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' }; 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.polygonSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -293,29 +226,6 @@ document.getElementById('Polygon')?.addEventListener('click', function () { } as PolygonSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PolygonSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Polygon Settings while adding individual Annotation -document.getElementById('Polygon')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Polygon', { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [ - { x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 } - ], - fillColor:'#ff000', - opacity: 0.9, - strokeColor:'##ff000' - } as PolygonSettings); -}); -{% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/radius-annotation.md index c56638396a..950cb539c7 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/radius-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/radius-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('radiusMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Radius'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('radiusMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Radius'); }); @@ -99,25 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addRadiusAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Radius', { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - } as RadiusSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, RadiusSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addRadiusAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Radius', { offset: { x: 200, y: 630 }, @@ -186,27 +153,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editRadiusAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Radius calculation') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].opacity = 0.8; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editRadiusAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Radius calculation') { @@ -236,17 +182,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.radiusSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' }; 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.radiusSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -281,26 +216,6 @@ document.getElementById('Radius')?.addEventListener('click', function () { } as RadiusSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadiusSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Radius Settings while adding individual Annotation -document.getElementById('Radius')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Radius', { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90, - fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' - } as RadiusSettings); -}); -{% endhighlight %} {% endtabs %} ## Scale ratio and units @@ -328,17 +243,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; 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.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/rectangle-annotation.md index c3475ed15a..dbfc359b95 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/rectangle-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/rectangle-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('rectangleMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Rectangle'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('rectangleMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Rectangle'); }); @@ -99,25 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addRectangleAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Rectangle', { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - } as RectangleSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, RectangleSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addRectangleAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Rectangle', { offset: { x: 200, y: 480 }, @@ -189,28 +156,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editRectangleAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Rectangle') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = '#FFFF00'; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = 'Circle'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editRectangleAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Rectangle') { @@ -241,17 +186,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.rectangleSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' }; 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.rectangleSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -289,29 +223,6 @@ document.getElementById('Rectangle')?.addEventListener('click', function () { } as RectangleSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RectangleSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Rectangle Settings while adding individual Annotation -document.getElementById('Rectangle')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Rectangle', { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75, - opacity: 0.5, - strokeColor: '#FF0000', - fillColor: '#000fff#', - author: 'User1' - } as RectangleSettings); -}); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/stamp-annotation.md index eae8151b13..ba3c607a2b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/stamp-annotation.md @@ -79,28 +79,6 @@ document.getElementById('customStamp')?.addEventListener('click', () => { } as unknown as StampSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem, StampSettings } 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.appendTo('#PdfViewer'); - -document.getElementById('dynamicStamp')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Stamp', DynamicStampItem.NotApproved); -}); - -document.getElementById('signStamp')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, SignStampItem.Witness); -}); - -document.getElementById('standardBusinessStamp')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Approved); -}); -{% endhighlight %} {% endtabs %} ### Add Stamp annotations programmatically @@ -151,42 +129,6 @@ document.getElementById('addCustom')?.addEventListener('click', () => { } as unknown as StampSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StampSettings, DynamicStampItem, SignStampItem, StandardBusinessStampItem } 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.appendTo('#PdfViewer'); - -document.getElementById('addDynamic')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Stamp', { - offset: { x: 200, y: 140 }, pageNumber: 1 - } as StampSettings, DynamicStampItem.Approved); -}); - -document.getElementById('addSign')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Stamp', { - offset: { x: 200, y: 240 }, pageNumber: 1 - } as StampSettings, undefined, SignStampItem.Witness); -}); - -document.getElementById('addStandard')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Stamp', { - offset: { x: 200, y: 340 }, pageNumber: 1 - } as StampSettings, undefined, undefined, StandardBusinessStampItem.Approved); -}); - -document.getElementById('addCustom')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Stamp', { - offset: { x: 100, y: 440 }, width: 46, height: 100, pageNumber: 1, isLock: true, - author: 'Guest', - customStamps: [{ customStampName: 'Image', customStampImageSource: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...' }] - } as StampSettings); -}); -{% endhighlight %} {% endtabs %} ## Edit Stamp Annotation @@ -223,29 +165,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editStamp')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'stamp') { - const width = pdfviewer.annotationCollection[i].bounds.width; - const height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width, height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editStamp')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'stamp') { @@ -276,17 +195,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.stampSettings = { opacity: 0.3, author: 'Guest User' }; 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.stampSettings = { opacity: 0.3, author: 'Guest User' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -318,23 +226,6 @@ document.getElementById('Stamp')?.addEventListener('click', function () { } as StampSettings, DynamicStampItem.Approved); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DynamicStampItem, StampSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Stamp Settings while adding individual Annotation -document.getElementById('Stamp')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Stamp', { - offset: { x: 200, y: 140 }, pageNumber: 1, - opacity: 0.3, author: 'Guest User' - } as StampSettings, DynamicStampItem.Approved); -}); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/sticky-notes-annotation.md index 34e200b728..34f186944c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/sticky-notes-annotation.md @@ -50,24 +50,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('stickyNote')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('StickyNotes', { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - } as StickyNotesSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StickyNotesSettings } 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.appendTo('#PdfViewer'); - document.getElementById('stickyNote')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('StickyNotes', { offset: { x: 100, y: 200 }, @@ -127,27 +109,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editSticky')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'sticky') { - const width = pdfviewer.annotationCollection[i].bounds.width; - const height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width, height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editSticky')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].shapeAnnotationType === 'sticky') { @@ -177,17 +138,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.stickyNotesSettings = { author: 'Syncfusion' }; 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.stickyNotesSettings = { author: 'Syncfusion' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -258,17 +208,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enableStickyNotesAnnotation = 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'; -pdfviewer.enableStickyNotesAnnotation = false; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/strikethrough-annotation.md index 99845fd4f9..29013c1f7c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/strikethrough-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/strikethrough-annotation.md @@ -86,10 +86,6 @@ document.getElementById('set')?.addEventListener('click', () => { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/strikethrough-mode-cs1/index.html" %} #### Exit strikethrough mode @@ -147,10 +143,6 @@ document.getElementById('setNone')?.addEventListener('click', () => { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/strikethrough-normal-mode-cs1/index.html" %} ### Add strikethrough annotations programmatically @@ -187,30 +179,6 @@ if (strikethrough) { }); } -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StrikethroughSettings } 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.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Strikethrough', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as StrikethroughSettings); - } - }); -} - {% endhighlight %} {% endtabs %} @@ -274,34 +242,6 @@ if (editStrikethroughAnnotation) { }); } -{% 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.appendTo('#PdfViewer'); - -let editStrikethroughAnnotation = document.getElementById('editStrikethroughAnnotation'); -if (editStrikethroughAnnotation) { - editStrikethroughAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].textMarkupAnnotationType === 'Strikethrough') { - pdfviewer.annotationCollection[i].color = '#ff0000'; - pdfviewer.annotationCollection[i].opacity = 0.8; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - break; - } - } - } - }); -} - {% endhighlight %} {% endtabs %} @@ -326,20 +266,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - strikethroughSettings: { author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9} -}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -365,35 +291,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.p pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -//Apply Strikethrough Settings while adding individual Annotation -document.getElementById('Strikethrough')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Strikethrough', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 1', - color: '#ffff00', - opacity: 0.9 - } as StrikethroughSettings); - - pdfviewer.annotation.addAnnotation('Strikethrough', { - bounds: [{ x: 107, y: 220, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 2', - color: '#ff1010ff', - opacity: 0.9 - } as StrikethroughSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, StrikethroughSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //Apply Strikethrough Settings while adding individual Annotation document.getElementById('Strikethrough')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Strikethrough', { @@ -432,19 +329,6 @@ pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enableTextMarkupAnnotation= false; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.enableTextMarkupAnnotation= false; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/underline-annotation.md index b5709c13a0..ddd9b5c12c 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/underline-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/underline-annotation.md @@ -86,10 +86,6 @@ document.getElementById('set')?.addEventListener('click', () => { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/underline-mode-cs1/index.html" %} #### Exit underline mode @@ -147,10 +143,6 @@ document.getElementById('setNone')?.addEventListener('click', () => { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/underline-normal-mode-cs1/index.html" %} ### Add underline annotations programmatically @@ -187,30 +179,6 @@ if (underline) { }); } -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, UnderlineSettings } 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.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Underline', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as UnderlineSettings); - } - }); -} - {% endhighlight %} {% endtabs %} @@ -274,34 +242,6 @@ if (editUnderlineAnnotation) { }); } -{% 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.appendTo('#PdfViewer'); - -let editUnderlineAnnotation = document.getElementById('editUnderlineAnnotation'); -if (editUnderlineAnnotation) { - editUnderlineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].textMarkupAnnotationType === 'Underline') { - pdfviewer.annotationCollection[i].color = '#00aa00'; - pdfviewer.annotationCollection[i].opacity = 0.8; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - break; - } - } - } - }); -} - {% endhighlight %} {% endtabs %} @@ -326,19 +266,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.underlineSettings= { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9}; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.underlineSettings= { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -364,35 +291,6 @@ pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.p pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; pdfviewer.appendTo('#PdfViewer'); -//Apply Underline Settings while adding individual Annotation -document.getElementById('underline')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Underline', { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 1', - color: '#ffff00', - opacity: 0.9 - } as UnderlineSettings); - - pdfviewer.annotation.addAnnotation('Underline', { - bounds: [{ x: 107, y: 220, width: 350, height: 14 }], - pageNumber: 1, - author: 'User 2', - color: '#ff1010ff', - opacity: 0.9 - } as UnderlineSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, UnderlineSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //Apply Underline Settings while adding individual Annotation document.getElementById('underline')?.addEventListener('click', function () { pdfviewer.annotation.addAnnotation('Underline', { @@ -431,19 +329,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enableTextMarkupAnnotation: false; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.enableTextMarkupAnnotation: false; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/volume-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/volume-annotation.md index 42fcd06c1a..f30d59b59f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/volume-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/volume-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('volumeMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Volume'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('volumeMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Volume'); }); @@ -99,26 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addVolumeAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Volume', { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [ - { x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 } - ] - } as VolumeSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, VolumeSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addVolumeAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Volume', { offset: { x: 200, y: 810 }, @@ -188,27 +154,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editVolumeAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Volume calculation') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].opacity = 0.8; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editVolumeAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Volume calculation') { @@ -238,17 +183,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.volumeSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' }; 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.volumeSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -284,27 +218,6 @@ document.getElementById('Volume')?.addEventListener('click', function () { } as VolumeSettings); }); {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, VolumeSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Volume Settings while adding individual Annotation -document.getElementById('Volume')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Volume', { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [ - { x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 } - ], - fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' - } as VolumeSettings); -}); -{% endhighlight %} {% endtabs %} ## Scale ratio and units @@ -332,17 +245,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; 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.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-undo-redo.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-undo-redo.md index c9fd92aae6..1da1348f3e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-undo-redo.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotations-undo-redo.md @@ -53,10 +53,6 @@ document.getElementById('redo').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/undo-redo-cs1" %} ## See also 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 d0caec09e0..ae455d3afa 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/comments.md @@ -138,43 +138,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -//for adding Comments programmatically -document.getElementById("addComment")?.addEventListener("click", function() { - let annot = pdfviewer.annotationCollection[0]; - if (annot) { - annot.commentType = "add"; - annot.note = "New Comment"; - pdfviewer.annotation.editAnnotation(annot); - console.log(pdfviewer.annotationCollection[0]); - } - }); -//for adding reply programmatically -document.getElementById("addReply")?.addEventListener("click", function() { - let annot = pdfviewer.annotationCollection[0]; - if (annot) { - annot.commentType = "add"; - annot.replyComment = ["Reply Comment"]; - pdfviewer.annotation.editAnnotation(annot); - console.log(pdfviewer.annotationCollection[0]); - } - }); -{% endhighlight %} -{% highlight html 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 -); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //for adding Comments programmatically document.getElementById("addComment")?.addEventListener("click", function() { let annot = pdfviewer.annotationCollection[0]; @@ -226,45 +189,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -//for Editing Comments programmatically -document.getElementById("editComment")?.addEventListener("click", function() { - let annot = pdfviewer.annotationCollection[0]; - if (annot) { - annot.commentType = "edit"; - annot.note = "Edited Comment"; - pdfviewer.annotation.editAnnotation(annot); - console.log(pdfviewer.annotationCollection[0]); - } - }); - -//for Editing reply programmatically -document.getElementById("editReply")?.addEventListener("click", function() { - let annot = pdfviewer.annotationCollection[0]; - if (annot) { - annot.commentType = "edit"; - annot.replyComment = ["Edited Reply Comment"]; - pdfviewer.annotation.editAnnotation(annot); - console.log(pdfviewer.annotationCollection[0]); - } - }); - -{% endhighlight %} -{% highlight html 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 -); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - //for Editing Comments programmatically document.getElementById("editComment")?.addEventListener("click", function() { let annot = pdfviewer.annotationCollection[0]; @@ -290,8 +214,6 @@ document.getElementById("editReply")?.addEventListener("click", function() { {% endhighlight %} {% endtabs %} - - ### How to check the comments added by the user Comments added to the PDF document can be read using the annotation's `comments` property. @@ -314,19 +236,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight html 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.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/customize-annotation.md index c61fefc8ab..5b47c24d9d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/customize-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/customize-annotation.md @@ -99,40 +99,6 @@ const pdfviewer: PdfViewer = new PdfViewer({ stickyNotesSettings: { author: 'QA', subject: 'Review', color: '#ffcc00', opacity: 1 } }); -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation); - -const pdfviewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - - highlightSettings: { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 }, - strikethroughSettings: { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 }, - underlineSettings: { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 }, - squigglySettings: { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 }, - - lineSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 }, - arrowSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 }, - rectangleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 }, - circleSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 }, - polygonSettings: { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 }, - - distanceSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 }, - perimeterSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 }, - areaSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' }, - radiusSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' }, - volumeSettings: { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' }, - - freeTextSettings: { borderColor: '#222222', thickness: 1, opacity: 1 }, - inkAnnotationSettings: { color: '#0000ff', thickness: 3, opacity: 0.8 }, - stampSettings: { opacity: 0.9 }, - stickyNotesSettings: { author: 'QA', subject: 'Review', color: '#ffcc00', opacity: 1 } -}); - -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} 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 deleted file mode 100644 index 600e6fdac7..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/free-text-annotation.md +++ /dev/null @@ -1,311 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Free text annotation in TypeScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete free text annotations. - -## Add a free text annotation to the PDF document - -Free text annotations can be added to the PDF document using the annotation toolbar. - -* 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. - -When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode. - -![Free text tool in the annotation toolbar](../images/freetext_tool.png) - -The following example switches to free text annotation mode using a button click. - - -```html - -``` -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotationButton) { - addFreeTextAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("FreeText"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a free text annotation programmatically to the PDF document - -The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example of adding a free text annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, FreeTextSettings} 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } as FreeTextSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, FreeTextSettings} 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.appendTo('#PdfViewer'); - -let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation'); -if (addFreeTextAnnotation) { - addFreeTextAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("FreeText", { - offset: { x: 120, y: 80 }, - fontSize: 16, - fontFamily: "Helvetica", - pageNumber: 1, - width: 200, - height: 40, - isLock: false, - defaultText: "Syncfusion" - } as FreeTextSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Change the content of an existing free text annotation programmatically - -To change the content of an existing free text annotation programmatically, use the editAnnotation() method. - -Here is an example of changing the content of a free text annotation using editAnnotation(): - -```html - -``` -{% 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% 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.appendTo('#PdfViewer'); -let changeContent = document.getElementById('changeContent'); -if (changeContent) { - changeContent.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Text Box') { - pdfviewer.annotationCollection[i].dynamicText = 'syncfusion'; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document. - -## Edit the properties of free text annotations - -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. - -### Edit font family - -Edit the font family by selecting a font in the Font Family tool. - -![Change font family](../images/fontfamily.png) - -### Edit font size - -Edit the font size by selecting a size in the Font Size tool. - -![Change font size](../images/fontsize.png) - -### Edit font color - -Edit the font color using the color palette in the Font Color tool. - -![Change font color](../images/fontcolor.png) - -### Edit text alignment - -Align text by selecting an option from the Text Align tool. - -![Set text alignment](../images/textalign.png) - -### Edit text styles - -Edit text styles by selecting options in the Font Style tool. - -![Change text styles](../images/fontstyle.png) - -### Edit fill color - -Edit the fill color using the color palette in the Edit Color tool. - -![Change fill color](../images/fillcolor.png) - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change stroke color](../images/fontstroke.png) - -### Edit thickness - -Edit border thickness using the range slider in the Edit Thickness tool. - -![Change border thickness](../images/fontthickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change opacity](../images/fontopacity.png) - -## Set default properties during control initialization - -Default properties for free text annotations can be set before creating the control using FreeTextSettings. - -After changing default values, the selected values are applied. The following example sets default free text annotation settings. - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }; -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.freeTextSettings = { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} 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 deleted file mode 100644 index b1305a3b4d..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/ink-annotation.md +++ /dev/null @@ -1,272 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Ink annotation in TypeScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete ink annotations. - -![Ink annotations overview](../images/ink_annotation.png) - -## Add an ink annotation to the PDF document - -Ink annotations can be added to the PDF document using the annotation toolbar. - -* 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. - -![Ink tool in the annotation toolbar](../images/ink_tool.png) - -The following example switches to ink annotation mode. - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Ink"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add an ink annotation programmatically to the PDF document - -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 adding an ink annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, InkAnnotationSettings} 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width: 200, - height: 60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - } as InkAnnotationSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, InkAnnotationSettings} 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.appendTo('#PdfViewer'); - -let addInkAnnotation = document.getElementById('addInkAnnotation'); -if (addInkAnnotation) { - addInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - offset: { x: 150, y: 100 }, - pageNumber: 1, - width: 200, - height: 60, - path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]' - } as InkAnnotationSettings); - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Edit an existing ink annotation programmatically - -To modify an existing ink annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let editInkAnnotation = document.getElementById('editInkAnnotation'); -if (editInkAnnotation) { - editInkAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -}z - -{% endhighlight %} -{% endtabs %} - - -## Edit the properties of ink annotations - -Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit stroke color - -Edit the stroke color using the color palette in the Edit Stroke Color tool. - -![Change ink stroke color](../images/ink_strokecolor.png) - -### Edit thickness - -Edit thickness using the range slider in the Edit Thickness tool. - -![Change ink thickness](../images/ink_thickness.png) - -### Edit opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![Change ink opacity](../images/ink_opacity.png) - -## Set default properties during control initialization - -Default properties for ink annotations can be set before creating the control using InkAnnotationSettings. - -After changing default values, the selected values are applied. -Refer to the following code sample to set the default ink annotation settings. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - resourceUrl : "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib", - inkAnnotationSettings : {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -var pdfviewer = new ej.pdfviewer.PdfViewer({ - documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf", - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - inkAnnotationSettings : {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6} - }); -ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, - ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ 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 deleted file mode 100644 index fc1f8cc3ab..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/measurement-annotation.md +++ /dev/null @@ -1,631 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Measurement annotation in TypeScript PDF Viewer control - -The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are: - -* Distance -* Perimeter -* Area -* Radius -* Volume - -![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** drop-down button. The pop-up lists available measurement annotation types. -* Select a measurement type to enable its annotation mode. -* Measure and add annotations on the pages of the PDF document. - -When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode. - - ![CalibrateTool](../images/calibrate_tool.png) - -The following example switches to distance annotation mode. - -```html - -``` -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let distanceMode = document.getElementById('distanceMode'); -if (distanceMode) { - distanceMode.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Distance"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a measurement annotation to the PDF document programmatically - -The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add measurement annotations programmatically using addAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import {PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, DistanceSettings, PerimeterSettings, - AreaSettings, RadiusSettings, VolumeSettings -} 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as DistanceSettings); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - } as PerimeterSettings); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - } as AreaSettings); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - } as RadiusSettings); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - } as VolumeSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { - PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, DistanceSettings, PerimeterSettings, - AreaSettings, RadiusSettings, VolumeSettings -} 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - -let addDistanceAnnotation = document.getElementById('addDistanceAnnotation'); -if (addDistanceAnnotation) { - addDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Distance", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as DistanceSettings); - } - }); -} - -let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation'); -if (addPerimeterAnnotation) { - addPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Perimeter", { - offset: { x: 200, y: 350 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }] - } as PerimeterSettings); - } - }); -} - -let addAreaAnnotation = document.getElementById('addAreaAnnotation'); -if (addAreaAnnotation) { - addAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Area", { - offset: { x: 200, y: 500 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }] - } as AreaSettings); - } - }); -} - -let addRadiusAnnotation = document.getElementById('addRadiusAnnotation'); -if (addRadiusAnnotation) { - addRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Radius", { - offset: { x: 200, y: 630 }, - pageNumber: 1, - width: 90, - height: 90 - } as RadiusSettings); - } - }); -} - -let addVolumeAnnotation = document.getElementById('addVolumeAnnotation'); -if (addVolumeAnnotation) { - addVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Volume", { - offset: { x: 200, y: 810 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }] - } as VolumeSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing measurement annotation programmatically - -To modify an existing measurement annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let editDistanceAnnotation = document.getElementById('editDistanceAnnotation'); -if (editDistanceAnnotation) { - editDistanceAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Distance calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation'); -if (editPerimeterAnnotation) { - editPerimeterAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editAreaAnnotation = document.getElementById('editAreaAnnotation'); -if (editAreaAnnotation) { - editAreaAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Area calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRadiusAnnotation = document.getElementById('editRadiusAnnotation'); -if (editRadiusAnnotation) { - editRadiusAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Radius calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editVolumeAnnotation = document.getElementById('editVolumeAnnotation'); -if (editVolumeAnnotation) { - editVolumeAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Volume calculation") { - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of measurement annotations - -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. - -### 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) - -### Edit stroke color - -The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool. - -![CalibrateStrokeColor](../images/calibrate_stroke.png) - -### Edit thickness - -Edit border thickness using the range slider provided in the Edit Thickness tool. - -![CalibrateThickness](../images/calibrate_thickness.png) - -### Edit opacity - -The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool. - -![CalibrateOpacity](../images/calibrate_opacity.png) - -### Edit the line properties - -Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu. - -![CalibrateProperty](../images/calibrate_lineprop.png) - -## Set default properties during control initialization - -Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings. - -Refer to the following code snippet to set the default annotation settings. - -{% 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.23/dist/ej2-pdfviewer-lib"; - -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.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.distanceSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}; -pdfviewer.perimeterSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}; -pdfviewer.areaSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}; -pdfviewer.radiusSettings = {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}; -pdfviewer.volumeSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}; -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.distanceSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}; -pdfviewer.perimeterSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}; -pdfviewer.areaSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}; -pdfviewer.radiusSettings = {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}; -pdfviewer.volumeSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Editing scale ratio and unit of the measurement annotation - -The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control. - - ![CalibrateScaleRatio](../images/calibrate_scaleratio.png) - -The Units of measurements support for the measurement annotations in the PDF Viewer are - -* Inch -* Millimeter -* Centimeter -* Point -* Pica -* Feet - -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) - -## Setting default scale ratio settings during control initialization - -The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet, - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; -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.measurementSettings={scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} 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 deleted file mode 100644 index 2074d24892..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/shape-annotation.md +++ /dev/null @@ -1,554 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Shape annotation in TypeScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are: - -* Line -* Arrow -* Rectangle -* Circle -* Polygon - -![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. 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> 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. - -![Shape annotation toolbar](../images/shape_toolbar.png) - -Refer to the following code sample to switch to the circle annotation mode. - -```html - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let circleAnnotationButton = document.getElementById('circleAnnotationButton'); -if (circleAnnotationButton) { - circleAnnotationButton.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode("Circle"); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add a shape annotation to the PDF document programmatically - -The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add shape annotations programmatically using addAnnotation(): - -```html - - - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { - PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, LineSettings, ArrowSettings, - RectangleSettings, CircleSettings, PolygonSettings -} 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as LineSettings); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - } as ArrowSettings); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - } as RectangleSettings); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - } as CircleSettings); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - } as PolygonSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { - PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, LineSettings, ArrowSettings, - RectangleSettings, CircleSettings, PolygonSettings -} 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - -let addLineAnnotation = document.getElementById('addLineAnnotation'); -if (addLineAnnotation) { - addLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Line", { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as LineSettings); - } - }); -} - -let addArrowAnnotation = document.getElementById('addArrowAnnotation'); -if (addArrowAnnotation) { - addArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Arrow", { - offset: { x: 200, y: 370 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }] - } as ArrowSettings); - } - }); -} - -let addRectangleAnnotation = document.getElementById('addRectangleAnnotation'); -if (addRectangleAnnotation) { - addRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Rectangle", { - offset: { x: 200, y: 480 }, - pageNumber: 1, - width: 150, - height: 75 - } as RectangleSettings); - } - }); -} - -let addCircleAnnotation = document.getElementById('addCircleAnnotation'); -if (addCircleAnnotation) { - addCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Circle", { - offset: { x: 200, y: 620 }, - pageNumber: 1, - width: 90, - height: 90 - } as CircleSettings); - } - }); -} - -let addPolygonAnnotation = document.getElementById('addPolygonAnnotation'); -if (addPolygonAnnotation) { - addPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Polygon", { - offset: { x: 200, y: 800 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }] - } as PolygonSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing shape annotation programmatically - -To modify an existing shape annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - - - - - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% 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.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); -let editLineAnnotation = document.getElementById('editLineAnnotation'); -if (editLineAnnotation) { - editLineAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Line") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editArrowAnnotation = document.getElementById('editArrowAnnotation'); -if (editArrowAnnotation) { - editArrowAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Arrow") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editRectangleAnnotation = document.getElementById('editRectangleAnnotation'); -if (editRectangleAnnotation) { - editRectangleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Rectangle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editCircleAnnotation = document.getElementById('editCircleAnnotation'); -if (editCircleAnnotation) { - editCircleAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Circle") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -let editPolygonAnnotation = document.getElementById('editPolygonAnnotation'); -if (editPolygonAnnotation) { - editPolygonAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === "Polygon") { - pdfviewer.annotationCollection[i].strokeColor = "#0000FF"; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].fillColor = "#FFFF00"; - pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle" - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Editing the properties of the shape annotation - -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. - -![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. - -![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. - -![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. - -![Edit opacity for shapes](../images/shape_opacity.png) - -### Editing the line properties - -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. - -![Line properties dialog](../images/shape_lineprty.png) - -## Set default properties during control initialization - -Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings. - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.lineSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}; -pdfviewer.arrowSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}; -pdfviewer.rectangleSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}; -pdfviewer.circleSettings = {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}; -pdfviewer.polygonSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} -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.lineSettings = {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'}; -pdfviewer.arrowSettings = {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'}; -pdfviewer.rectangleSettings = {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'}; -pdfviewer.circleSettings = {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'}; -pdfviewer.polygonSettings = {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'} -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ 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 afa7203abd..9b9d10ca34 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 @@ -56,27 +56,6 @@ if (handWrittenSignature) { } }); } -{% 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.appendTo('#PdfViewer'); - -let handWrittenSignature= document.getElementById('handWrittenSignature'); -if (handWrittenSignature) { - handWrittenSignature.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.setAnnotationMode('HandWrittenSignature'); - } - }); -} - {% endhighlight %} {% endtabs %} @@ -342,20 +321,6 @@ pdfviewer.enableHandwrittenSignature = 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"; -pdfviewer.enableHandwrittenSignature = false - -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} 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 deleted file mode 100644 index 352a3e1756..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/stamp-annotation.md +++ /dev/null @@ -1,420 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Stamp annotation in TypeScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents: - -* Dynamic -* Sign Here -* Standard Business -* Custom Stamp - -![StampAnnotation](../images/stamp_annot.png) - -## 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. The pop-up lists available stamp annotation types. - -![StampTool](../images/stamp_tool.png) - -* Select a stamp type to enable its annotation mode. - -![StampPopup](../images/selectstamp_annot.png) - -* Place the stamp on the pages of the PDF document. - -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. - -The following examples switch to stamp annotation modes. - -```html - - - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', DynamicStampItem.NotApproved); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, SignStampItem.Witness); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Approved); - } - }); -} -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - } as CustomStampSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} 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.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', DynamicStampItem.NotApproved); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, SignStampItem.Witness); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Approved); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## 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. The pop-up lists available stamp annotation types. -* Click the Custom Stamp button. - -![CustomStamp](../images/customStamp.png) - -* In the file explorer dialog, choose an image and add it to the PDF page. - ->Only JPG and JPEG image formats are supported for custom stamp annotations. - -## Add a stamp annotation to the PDF document programmatically - -The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here are examples showing how to add stamp annotations programmatically using addAnnotation(): - -```html - - - - -``` -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StampSettings, DynamicStampItem} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - } as StampSettings, DynamicStampItem.Approved); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - } as StampSettings, undefined, SignStampItem.Witness); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - } as StampSettings, undefined, undefined, StandardBusinessStampItem.Approved); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - } as CustomStampSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StampSettings, DynamicStampItem} 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.appendTo('#PdfViewer'); - -let dynamicStamp = document.getElementById('dynamicStamp'); -if (dynamicStamp) { - dynamicStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 140 }, - pageNumber: 1 - } as StampSettings, DynamicStampItem.Approved); - } - }); -} -let signStamp = document.getElementById('signStamp'); -if (signStamp) { - signStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 240 }, - pageNumber: 1 - } as StampSettings, undefined, SignStampItem.Witness); - } - }); -} -let standardBusinessStamp = document.getElementById('standardBusinessStamp'); -if (standardBusinessStamp) { - standardBusinessStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Stamp", { - offset: { x: 200, y: 340 }, - pageNumber: 1 - } as StampSettings, undefined, undefined, StandardBusinessStampItem.Approved); - } - }); -} - -let customStamp = document.getElementById('customStamp'); -if (customStamp) { - customStamp.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation('Stamp', - { - offset: { x: 100, y: 440 }, - width: 46, - author: 'Guest', - height: 100, - isLock: true, - pageNumber: 1, - customStamps: [ - { - customStampName: "Image", - customStampImageSource: - "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z" - } - ] - } as CustomStampSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing stamp annotation programmatically - -To modify an existing stamp annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); -let editAnnotation = document.getElementById('editAnnotation'); -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% 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.appendTo('#PdfViewer'); - -let editAnnotation = document.getElementById('editAnnotation'); -if (editAnnotation) { - editAnnotation.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotationCollection[i].annotationSettings.isLock = true; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Set default properties during control initialization - -Default properties for stamp annotations can be set before creating the control using StampSettings. - -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" %} - -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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.stampSettings = {opacity: 0.3, author: 'Guest User'} - -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.stampSettings = {opacity: 0.3, author: 'Guest User'} - -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ No newline at end of file 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 deleted file mode 100644 index a9e05dda52..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/sticky-notes-annotation.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -layout: post -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 -documentation: ug -domainurl: ##DomainURL## ---- - -# Sticky notes in TypeScript PDF Viewer control - -The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document. - -![StickyNotesAnnotation](../images/stickynotes_annotation.png) - -## Add a sticky note annotation to the PDF document - -Sticky note annotations can be added to the PDF document using the annotation toolbar. - -* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it. -* Click the 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 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) - -## Add a sticky note annotation to the PDF document programmatically - -The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method. - -Here is an example showing how to add a sticky note annotation programmatically using addAnnotation(): - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StickyNotesSettings} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - } as StickyNotesSettings ); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StickyNotesSettings} 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.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("StickyNotes", { - offset: { x: 100, y: 200 }, - pageNumber: 1, - isLock: false - } as StickyNotesSettings ); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Edit an existing sticky note annotation programmatically - -To modify an existing sticky note annotation programmatically, use the editAnnotation() method. - -Here is an example of using editAnnotation(): - -```html - -``` - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} - -{% 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.appendTo('#PdfViewer'); - -let stickyNote = document.getElementById('stickyNote'); -if (stickyNote) { - stickyNote.addEventListener('click', function () { - if (pdfviewer) { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") { - var width = pdfviewer.annotationCollection[i].bounds.width; - var height = pdfviewer.annotationCollection[i].bounds.height; - pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height }; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } - } - }); -} -{% endhighlight %} -{% endtabs %} - -## Edit the properties of sticky note annotations - -### Editing opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![StickyNotesOpacity](../images/sticky_opacity.png) - -### Editing comments - -Comment text, replies, and status can be edited using the comment panel. - -* Open the comment panel using the Comment Panel button in the annotation toolbar. - - ![StickyNotesComment](../images/commentPanel.png) - -Modify or delete comments or replies, and change status using the menu options in the comment panel. - - ![StickyNotesEdit](../images/sticky_editbtn.png) - -## Set default properties during control initialization - -Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings. - -After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings. - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.stickyNotesSettings = {author: 'Syncfusion'}; -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.stickyNotesSettings = {author: 'Syncfusion'}; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Disable sticky note annotations - -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. - -{% 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.enableStickyNotesAnnotation = 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"; -pdfviewer.enableStickyNotesAnnotation = false; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} \ 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 deleted file mode 100644 index 3d352e368f..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/text-markup-annotation.md +++ /dev/null @@ -1,1009 +0,0 @@ ---- -layout: post -title: Text markup annotation in TypeScript PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion TypeScript PDF Viewer. -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Text markup annotation in TypeScript PDF Viewer - -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 text - -There are two ways to highlight text: - -1. Using the context menu -* 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 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) - -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. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Highlight'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - - - -
Loading....
- - -
-
-
- - - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/highlight-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from highlight mode. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Highlight'); -}); - -document.getElementById('setNone').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('None'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
Loading....
- - - - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/highlight-normal-mode-cs1" %} - - -## Highlight text programmatically - -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, HighlightSettings} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as HighlightSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, HighlightSettings} 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.appendTo('#PdfViewer'); - -let highlight = document.getElementById('highlight'); -if (highlight) { - highlight.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Highlight", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as HighlightSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Underline text - -There are two ways to underline text: - -1. Using the context menu -* 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 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) - -In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text. - -Refer to the following code snippet to switch to underline mode. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Underline'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - - -
Loading....
- - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/underline-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from underline mode. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Underline'); -}); - -document.getElementById('setNone').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('None'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
Loading....
- - - - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/underline-normal-mode-cs1" %} - -## Underline text programmatically - -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, UnderlineSettings} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as UnderlineSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, UnderlineSettings} 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.appendTo('#PdfViewer'); - -let underline = document.getElementById('underline'); -if (underline) { - underline.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Underline", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as UnderlineSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text - -There are two ways to strikethrough text: - -1. Using the context menu -* 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 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) - -In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text. - -Refer to the following code snippet to switch to strikethrough mode. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Strikethrough'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
Loading....
- - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/strikethrough-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from strikethrough mode. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); - -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Strikethrough'); -}); - -document.getElementById('setNone').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('None'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - - -
Loading....
- - - - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/strikethrough-normal-mode-cs1" %} - -## Strikethrough text programmatically - -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StrikethroughSettings} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as StrikethroughSettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, StrikethroughSettings} 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.appendTo('#PdfViewer'); - -let strikethrough = document.getElementById('strikethrough'); -if (strikethrough) { - strikethrough.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Strikethrough", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as StrikethroughSettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text - -There are two ways to add squiggly to text: - -1. Using the context menu -* 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 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) - -In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text. - -Refer to the following code snippet to switch to squiggly mode. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Squiggly'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
Loading....
- - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/squiggly-mode-cs1" %} - -Refer to the following code snippet to switch back to normal mode from squiggly mode. - -{% tabs %} -{% highlight ts tabtitle="index.ts" %} -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); - -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('set').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('Squiggly'); -}); - -document.getElementById('setNone').addEventListener('click', ()=> { - pdfviewer.annotation.setAnnotationMode('None'); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - - -
Loading....
- - - - -
-
-
- - - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/squiggly-normal-mode-cs1" %} - -## Add squiggly to text programmatically - -Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotation#addannotation) method. - -Example: - -```html - -``` - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SquigglySettings} 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.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as SquigglySettings); - } - }); -} - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SquigglySettings} 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.appendTo('#PdfViewer'); - -let squiggly = document.getElementById('squiggly'); -if (squiggly) { - squiggly.addEventListener('click', function () { - if (pdfviewer) { - pdfviewer.annotation.addAnnotation("Squiggly", { - bounds: [{ x: 97, y: 110, width: 350, height: 14 }], - pageNumber: 1 - } as SquigglySettings); - } - }); -} - -{% endhighlight %} -{% endtabs %} - -## Deleting a text markup annotation - -The selected annotation can be deleted in the following ways: - -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. - * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. - -![Alt text](../images/delete_button.png) - -## 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. - -### Edit color - -Use the color palette in the Edit Color tool to change the annotation color. - -![Alt text](../images/edit_color.png) - -### Edit opacity - -Use the range slider in the Edit Opacity tool to change annotation opacity. - -![Alt text](../images/edit_opacity.png) - -## Set default properties during control initialization - -Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. - -> 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. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', -highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, -underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, -strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, -squigglySettings: {author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9, modifiedDate: ''} }); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', -highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''}, -underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''}, -strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''}, -squigglySettings: {author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9, modifiedDate: ''} }); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## Perform undo and redo - -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 performed in the following ways: - -1. Using keyboard shortcuts: - 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 to call undo and redo actions from the client side. - -{% tabs %} -{% highlight ts tabtitle="index.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/pdf-succinctly.pdf', - resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" -}); -pdfviewer.appendTo('#PdfViewer'); - -document.getElementById('undo').addEventListener('click', ()=> { - pdfviewer.undo(); -}); - -document.getElementById('redo').addEventListener('click', ()=> { - pdfviewer.redo(); -}); -{% endhighlight %} -{% highlight html tabtitle="index.html" %} - - - - - EJ2 PDF Viewer - - - - - - - - - - - -
Loading....
- - - - -
-
-
- - -{% endhighlight %} -{% endtabs %} - -N> To set up the **server-backed PDF Viewer**, -Add the below `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/text-markup-annotation/undo-redo-cs1" %} - -## Save text markup annotations - -Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. - -## Print text markup annotations - -Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. - -## Disable text markup annotation - -Disable text markup annotations using the `enableTextMarkupAnnotation` property. - -{% tabs %} -{% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', enableTextMarkupAnnotation: false }); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, Annotation); - -let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', enableTextMarkupAnnotation: false }); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](../toolbar) -* [Feature modules](../feature-module) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md index ef14478233..a9353bc1dd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/download.md @@ -53,25 +53,9 @@ let pdfviewer: PdfViewer = new PdfViewer({enableDownload: true}); pdfviewer.appendTo('#PdfViewer'); pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, TextSearch, Print} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, -TextSelection, TextSearch, Print); - -let pdfviewer: PdfViewer = new PdfViewer({enableDownload: true}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); - {% endhighlight %} {% endtabs %} -> Note: When loading documents from other origins, ensure that CORS is correctly configured on the server. In server-backed mode, the document is streamed through the serviceUrl endpoint, which must allow download requests. - ![PDF Viewer toolbar showing the download button](./images/download.png) Invoke the download action programmatically with a simple button example: @@ -89,19 +73,6 @@ pdfviewer.appendTo('#PdfViewer'); pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); pdfviewer.download(); -{% 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(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); -pdfviewer.download(); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md index ff2fb347b8..50d68d4284 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md @@ -18,8 +18,6 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu ## API to use - [`importFormFields(sourceOrObject, format)`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) — Imports form data into the currently loaded PDF. The `sourceOrObject` parameter accepts a file path or URL, a file stream, or a JavaScript object; the `format` parameter accepts `FDF`, `XFDF`, or `JSON`. -N> For server-backed viewers, set `serviceUrl` before importing. The method triggers import events (`importStart`, `importSuccess`, `importFailed`); see the import/export events page for recommended handling. - ### Import FDF ```html diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md index 80a309189e..e2ae01e240 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/globalization.md @@ -308,18 +308,6 @@ let pdfviewer: PdfViewer = new PdfViewer({locale: 'ar-AE'}); pdfviewer.appendTo('#PdfViewer'); pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); -{% 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({locale: 'ar-AE'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-save-button-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-save-button-ts.md index a40f663d60..12530efa78 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-save-button-ts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/add-save-button-ts.md @@ -46,32 +46,6 @@ function OnCreateSearch(this: any): any { this.addIcon('prepend', 'e-icons e-search'); } -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print); -let toolItem1: CustomToolbarItemModel = { - prefixIcon: 'e-icons e-save', - id: 'download', - text: 'Save', - tooltipText: 'Save Button', - align: 'Left' -}; -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.toolbarSettings = { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']} -pdfviewer.appendTo('#PdfViewer'); -// To handle custom toolbar click event. -pdfviewer.toolbarClick = function (args) { - if (args.item && args.item.id === 'download') { - pdfviewer.download(); - } -}; -function OnCreateSearch(this: any): any { - this.addIcon('prepend', 'e-icons e-search'); -} {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/change-author-name-using-annotation-settings.md index 1509c2a834..da4e20b9ef 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/change-author-name-using-annotation-settings.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/change-author-name-using-annotation-settings.md @@ -43,17 +43,4 @@ viewer.freeTextSettings = { allowTextOnly : true }; viewer.appendTo("#pdfViewer"); ``` {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index"; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields); -let viewer: PdfViewer = new PdfViewer(); -viewer.serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"; -viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); -viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true }; -viewer.freeTextSettings = { allowTextOnly : true }; -viewer.appendTo("#pdfViewer"); -``` -{% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md index 2da9466f35..b8402abda5 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md @@ -26,7 +26,7 @@ PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnific const 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/' + resourceUrl: "https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib" }); // Append the PdfViewer to the DOM diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-context-menu.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-context-menu.md index 176ba4dba8..6e9fd899a3 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-context-menu.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-context-menu.md @@ -289,6 +289,4 @@ The following is the output of the custom context menu with customization. {% endhighlight %} {% endtabs %} -N> To set up the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: - {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/custom-context-menu" %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/min-max-zoom-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/min-max-zoom-ts.md index ea9cc13d7d..a5505f9cd4 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/min-max-zoom-ts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/min-max-zoom-ts.md @@ -33,20 +33,6 @@ pdfviewer.maxZoom = 100; pdfviewer.minZoom = 10; 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.maxZoom = 100; -pdfviewer.minZoom = 10; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -79,31 +65,6 @@ pdfviewer.documentLoad = (): void => { } }; -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, - LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, - TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; -import {Browser} from '@syncfusion/ej2-base'; -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.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = (): void => { - if (Browser.isDevice && !pdfviewer.enableDesktopMode) { - pdfviewer.maxZoom = 200; - pdfviewer.minZoom = 10; - } - else{ - pdfviewer.zoomMode = 'Default'; - } -}; - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/restricting-zoom-in-mobile-mode-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/restricting-zoom-in-mobile-mode-ts.md index 682601deb6..0302e24fb2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/restricting-zoom-in-mobile-mode-ts.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/restricting-zoom-in-mobile-mode-ts.md @@ -36,31 +36,6 @@ pdfviewer.documentLoad = (): void => { } }; -{% 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.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = (): void => { - if (Browser.isDevice && !viewer.enableDesktopMode) { - pdfviewer.maxZoom = 200; - pdfviewer.minZoom = 10; - } - else{ - pdfviewer.zoomMode = 'Default'; - } -}; - {% endhighlight %} {% endtabs %} 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 90aa149def..5ec04ea147 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interaction-mode.md @@ -55,17 +55,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableTextSelection: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enableTextSelection: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -89,17 +78,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', interactionMode: InteractionMode.Pan}); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Annotation, Navigation, 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', interactionMode: InteractionMode.Pan}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark.md index b82d9a257f..1fba94de32 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/bookmark.md @@ -23,17 +23,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/hyperlink.md index 96e3539a5c..d96e423457 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/hyperlink.md @@ -54,18 +54,6 @@ const viewer: PdfViewer = new PdfViewer({ }); viewer.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); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - enableHyperlink: false // Disables all hyperlinks -}); -viewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} N> Disabling hyperlinks affects only the viewer's behavior and does not modify the original PDF document. @@ -94,18 +82,6 @@ const viewer: PdfViewer = new PdfViewer({ }); viewer.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); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - hyperlinkOpenState: 'NewTab' // Opens links in a new browser tab -}); -viewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ### Handle hyperlink events @@ -153,35 +129,6 @@ const viewer: PdfViewer = new PdfViewer({ } }); -// Append the PDF Viewer to the HTML element -viewer.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); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - // Set the service URL for server-backed PDF processing - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/', - - // Event handler for hyperlink click - hyperlinkClick: (args) => { - // Log the URL of the clicked hyperlink - console.log('Hyperlink Clicked:', args.hyperlink); - - // To prevent the default navigation behavior, set args.cancel to true - // args.cancel = true; - }, - - // Event handler for mouse hover over a hyperlink - hyperlinkMouseOver: (args) => { - // Log the href of the hyperlink element when the mouse hovers over it - console.log('Mouse is over hyperlink:', args.hyperlinkElement.href); - } -}); - // Append the PDF Viewer to the HTML element viewer.appendTo('#PdfViewer'); {% endhighlight %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail.md index 52acbc5ccf..60f308c912 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page-thumbnail.md @@ -23,18 +23,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page.md index b76c5fd2b7..f3ec272105 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/interactive-pdf-navigation/page.md @@ -56,24 +56,11 @@ Use the following code snippet to enable or disable page navigation. {% tabs %} {% highlight ts tabtitle="Standalone" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.appendTo('#PdfViewer'); - -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - - import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} @@ -149,40 +136,6 @@ document.getElementById('goToPreviousPage').addEventListener('click', () => { viewer.navigation.goToPreviousPage(); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); - -let viewer: PdfViewer = new PdfViewer(); -viewer.serviceUrl = - 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -viewer.appendTo('#pdfViewer'); -viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); - -// Go To First Page -document.getElementById('goToFirstPage').addEventListener('click', () => { - viewer.navigation.goToFirstPage(); -}); -// Go To Last Page -document.getElementById('goToLastPage').addEventListener('click', () => { - viewer.navigation.goToLastPage(); -}); -// Go To Next Page -document.getElementById('goToNextPage').addEventListener('click', () => { - viewer.navigation.goToNextPage(); -}); -// Go To Page -document.getElementById('goToPage').addEventListener('click', () => { - viewer.navigation.goToPage(4); -}); -// Go To Previous Page -document.getElementById('goToPreviousPage').addEventListener('click', () => { - viewer.navigation.goToPreviousPage(); -}); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md index 7f736f18b9..0bfdaf3a83 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/magnification.md @@ -53,18 +53,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableMagnification: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enableMagnification: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md index 5f3551d1b4..64654e7701 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/navigation.md @@ -64,18 +64,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer({enableNavigation: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -149,40 +137,6 @@ document.getElementById('goToPreviousPage').addEventListener('click', () => { viewer.navigation.goToPreviousPage(); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print TextSelection, TextSearch, Annotation, FormFields } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch, Annotation, FormFields ); - -let viewer: PdfViewer = new PdfViewer(); -viewer.serviceUrl = - 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -viewer.appendTo('#pdfViewer'); -viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); - -// Go To First Page -document.getElementById('goToFirstPage').addEventListener('click', () => { - viewer.navigation.goToFirstPage(); -}); -// Go To Last Page -document.getElementById('goToLastPage').addEventListener('click', () => { - viewer.navigation.goToLastPage(); -}); -// Go To Next Page -document.getElementById('goToNextPage').addEventListener('click', () => { - viewer.navigation.goToNextPage(); -}); -// Go To Page -document.getElementById('goToPage').addEventListener('click', () => { - viewer.navigation.goToPage(4); -}); -// Go To Previous Page -document.getElementById('goToPreviousPage').addEventListener('click', () => { - viewer.navigation.goToPreviousPage(); -}); - {% endhighlight %} {% endtabs %} @@ -195,7 +149,6 @@ Bookmarks saved in PDF files provide quick navigation. Enable or disable bookmar {% tabs %} {% highlight ts tabtitle="Standalone" %} - import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); @@ -203,17 +156,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer({enableBookmark: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -266,18 +208,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enableThumbnail: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -305,18 +235,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -332,19 +250,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', hyperlinkOpenState:'NewTab'}); 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({enableHyperlink: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', hyperlinkOpenState:'NewTab'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - - {% endhighlight %} {% endtabs %} 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 9fe67cadde..0cd2690d13 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 @@ -71,131 +71,4 @@ pdfviewer.created = function () { N> The **npm install aws-sdk** package must be installed in your 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%20Standalone). - -## Using the server-backed PDF Viewer - -Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. - -**Step 1:** Create a PDF Viewer sample in TypeScript - -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 - -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. - -2. Open the `PdfViewerController.cs` file in your web service project. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Amazon; -using Amazon.S3; -using Amazon.S3.Model; -``` - -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp -private IConfiguration _configuration; -public readonly string _accessKey; -public readonly string _secretKey; -public readonly string _bucketName; - -public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessKey = _configuration.GetValue("AccessKey"); - _secretKey = _configuration.GetValue("SecretKey"); - _bucketName = _configuration.GetValue("BucketName"); -} -``` - -5. Modify the [Load()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from AWS S3. - -```csharp - -public async Task Load([FromBody] Dictionary jsonObject) -{ - // Initialize the PDF Viewer object with memory cache object - PdfRenderer pdfviewer = new PdfRenderer(_cache); - MemoryStream stream = new MemoryStream(); - object jsonResult = new object(); - - if (jsonObject != null && jsonObject.ContainsKey("document")) - { - if (bool.Parse(jsonObject["isFileName"])) - { - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; - - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion); - - string document = jsonObject["document"]; - - // Specify the document name or retrieve it from a different source - var response = await s3Client.GetObjectAsync(_bucketName, document); - - Stream responseStream = response.ResponseStream; - responseStream.CopyTo(stream); - stream.Seek(0, SeekOrigin.Begin); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonObject["document"]); - stream = new MemoryStream(bytes); - } - } - - jsonResult = pdfviewer.Load(stream, jsonObject); - - return Content(JsonConvert.SerializeObject(jsonResult)); -} -``` - -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessKey": "Your Access Key from AWS S3", - "SecretKey": "Your Secret Key from AWS S3", - "BucketName": "Your Bucket name from AWS S3" -} -``` - -N> Replace the placeholders with your actual AWS credentials and bucket name: Access Key, Secret Key, and Bucket Name. - -**Step 3:** Configure the PDF Viewer component - -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 - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -N> The **AWSSDK.S3** NuGet package must be installed in your 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 +[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). \ No newline at end of file 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 7460d13272..0e8ef088b7 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 @@ -88,119 +88,4 @@ 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 the server-backed PDF Viewer - -Follow these steps to load a PDF from Azure Blob Storage using the server-backed PDF Viewer. - -**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 `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. - -2. Open the `PdfViewerController.cs` file in your web service project. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Azure.Storage.Blobs; -using Azure.Storage.Blobs.Specialized; -``` - -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp -private readonly string _storageConnectionString; -private readonly string _storageContainerName; -private readonly ILogger _logger; - -public PdfViewerController(IConfiguration configuration, ILogger logger) -{ - _storageConnectionString = configuration.GetValue("connectionString"); - _storageContainerName = configuration.GetValue("containerName"); - _logger = logger; -} -``` - -5. Modify the [Load()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load PDF files from Azure Blob Storage. - -```csharp - -[HttpPost("Load")] -[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] -[Route("[controller]/Load")] -//Post action for Loading the PDF documents  -  -public IActionResult Load([FromBody] Dictionary jsonObject) -{ - PdfRenderer pdfviewer = new PdfRenderer(_cache); - MemoryStream stream = new MemoryStream(); - object jsonResult = new object(); - - if (jsonObject != null && jsonObject.ContainsKey("document")) - { - if (bool.TryParse(jsonObject["isFileName"], out bool isFileName) && isFileName) - { - BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); - string fileName = jsonObject["document"]; - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); - BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); - blockBlobClient.DownloadTo(stream); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonObject["document"]); - stream = new MemoryStream(bytes); - } - } - jsonResult = pdfviewer.Load(stream, jsonObject); - return Content(JsonConvert.SerializeObject(jsonResult)); -} -``` - -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "connectionString": "*Your Connection string from Azure*", - "containerName": "*Your container name in Azure*" -} -``` - -N> Replace the placeholders with your actual values: Azure storage connection string and container name. - -**Step 3:** Configure the PDF Viewer component - -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 - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -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. - -[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 +[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). \ No newline at end of file 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 9599c3d1c0..4d6a29f399 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 @@ -60,132 +60,4 @@ function blobToBase64(blob: Blob): Promise { N> Install the Dropbox SDK for the client sample with `npm install dropbox`. Verify the SDK version compatibility with your project. -[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 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 app - -Follow the official Dropbox documentation [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial) to create a Dropbox API app using the App Console. Configure redirect URIs and required scopes for file access, and select an OAuth flow appropriate for the application (server-side OAuth is recommended for production). - -**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 - -1. Create a web service project in .NET Core 3.0 or above (NET 6 LTS or later recommended). 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 creating a web service project. - -2. Open the `PdfViewerController.cs` file in your web service project. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -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 - -```csharp -private IConfiguration _configuration; -public readonly string _accessToken; -public readonly string _folderName; - -public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessToken = _configuration.GetValue("AccessToken"); - _folderName = _configuration.GetValue("FolderName"); -} -``` - -5. Modify the [Load()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from Dropbox cloud file storage. - -```csharp - [HttpPost("Load")] -[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] -[Route("[controller]/Load")] -//Post action for Loading the PDF documents  - -public async Task Load([FromBody] Dictionary jsonObject) -{ - //Initialize the PDF Viewer object with memory cache object - PdfRenderer pdfviewer = new PdfRenderer(_cache); - MemoryStream stream = new MemoryStream(); - object jsonResult = new object(); - if (jsonObject != null && jsonObject.ContainsKey("document")) - { - if (bool.Parse(jsonObject["isFileName"])) - { - // Get the file name from the jsonObject, which should contain the Dropbox file name - string fileName = jsonObject["document"]; - - using (var dropBox = new DropboxClient(_accessToken)) - { - using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName)) - { - var byteArray = await response.GetContentAsByteArrayAsync(); - - // Load the PDF file into the PDF Viewer - stream = new MemoryStream(byteArray); - } - } - } - else - { - byte[] bytes = Convert.FromBase64String(jsonObject["document"]); - stream = new MemoryStream(bytes); - } - } - jsonResult = pdfviewer.Load(stream, jsonObject); - return Content(JsonConvert.SerializeObject(jsonResult)); -} -``` - -6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessToken": "Your_Dropbox_Access_Token", - "FolderName": "Your_Folder_Name" -} -``` - -N> Replace the placeholders with your actual Dropbox values: access token and folder name. Store server-side credentials securely (for example, using environment variables or a secrets store) and restrict token permissions to the minimum required scopes. - -**Step 4:** Configure the PDF Viewer component - -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 - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -N> Install the `Dropbox.Api` NuGet package in the server project to use the Dropbox client APIs shown above. - -[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) +[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) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/programmatic-support.md index 33bb40fb22..e2dc0af276 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/programmatic-support.md @@ -29,19 +29,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enablePageOrganizer = 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.enablePageOrganizer = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -62,19 +49,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.isPageOrganizerOpen = 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.isPageOrganizerOpen = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -95,19 +69,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5} 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.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/toolbar.md index 4813cf5452..8bc09ee42d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pages/toolbar.md @@ -29,19 +29,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.pageOrganizerSettings = {canInsert: 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"; -pdfviewer.pageOrganizerSettings = {canInsert: false}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -62,19 +49,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.pageOrganizerSettings = {canDelete: 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"; -pdfviewer.pageOrganizerSettings = {canDelete: false}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -95,19 +69,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.pageOrganizerSettings = {canRotate: 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"; -pdfviewer.pageOrganizerSettings = {canRotate: false}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md index 0ab0aa1995..cbdb8feb9e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/organize-pdf.md @@ -89,19 +89,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfview pdfviewer.enablePageOrganizer = 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.enablePageOrganizer = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -120,19 +107,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfview pdfviewer.isPageOrganizerOpen = 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.isPageOrganizerOpen = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -151,19 +125,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfview pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5} 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.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md index 2ebff7bed4..a6862ae90f 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print.md @@ -52,17 +52,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); 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({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -85,19 +74,6 @@ pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null pdfviewer.print.print(); -{% 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(); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); -pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); -pdfviewer.print.print(); - {% endhighlight %} {% endtabs %} @@ -123,19 +99,6 @@ let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https pdfviewer.printScaleFactor = 0.5; 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({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -//pdf with low quality. By changing values you can change the quality of the pdf. -pdfviewer.printScaleFactor = 0.5; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -156,20 +119,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); 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/', - enablePrintRotation: true -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -197,20 +146,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, PrintMode} 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/', - printMode: PrintMode.NewWindow -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -250,24 +185,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, PrintStartEventArgs, 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/', - printStart: (args: PrintStartEventArgs) => { - console.log('Print action has started for file: ' + args.fileName); - // To cancel the print action - // args.cancel = true; - } -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -294,22 +211,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, PrintEndEventArgs, 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/', - printEnd: (args: PrintEndEventArgs) => { - console.log('Printed File Name: ' + args.fileName); - } -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md index 0e86c36133..8be2b8a081 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/enable-print-rotation.md @@ -29,21 +29,6 @@ const pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); - -const 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/', - enablePrintRotation: true, -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md index bd3cfe1927..0bab1aad27 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/events.md @@ -50,24 +50,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, PrintStartEventArgs, 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/', - printStart: (args: PrintStartEventArgs) => { - console.log('Print action has started for file: ' + args.fileName); - // To cancel the print action - // args.cancel = true; - } -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -99,22 +81,6 @@ let pdfviewer: PdfViewer = new PdfViewer({ }); pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, PrintEndEventArgs, 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/', - printEnd: (args: PrintEndEventArgs) => { - console.log('Printed File Name: ' + args.fileName); - } -}); -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md index 3eaba410d1..2091415238 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/overview.md @@ -32,24 +32,6 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th let pdfviewer: PdfViewer = new PdfViewer({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"}); 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({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'}); -pdfviewer.appendTo('#PdfViewer'); - -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({enablePrint: true, documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'}); - -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -82,27 +64,6 @@ if (printButton) { } } -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const 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.appendTo('#PdfViewer'); -//print on button click -const printButton = document.getElementById('print'); -if (printButton) { - printButton.onclick = function () { - pdfviewer.print.print(); - } -} - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md index 37c9e3f0fa..1b4c5a9753 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-modes.md @@ -36,21 +36,6 @@ const pdfviewer: PdfViewer = new PdfViewer({ pdfviewer.printMode ="NewWindow"; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer, PrintMode } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageOrganizer); - -const 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.printMode ="NewWindow"; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md index 4e2c79adda..3101a47c6b 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/print/print-quality.md @@ -32,21 +32,6 @@ const pdfviewer: PdfViewer = new PdfViewer({ pdfviewer.printScaleFactor = 0.5; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const 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.printScaleFactor = 0.5; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} 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 59975cd0ac..388ff62714 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 @@ -76,118 +76,4 @@ function saveDocument() { N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`. For server-side operations use `dotnet add package Azure.Storage.Blobs`. -[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 - -To save a PDF file to Azure Blob 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 sets up the basic structure of the PDF Viewer application. - -**Step 2:** Modify the `PdfViewerController.cs` file in the 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. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Azure.Storage.Blobs; -using Azure.Storage.Blobs.Specialized; -``` - -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp -private readonly string _storageConnectionString; -private readonly string _storageContainerName; -private readonly ILogger _logger; - -public PdfViewerController(IConfiguration configuration, ILogger logger) -{ - _storageConnectionString = configuration.GetValue("connectionString"); - _storageContainerName = configuration.GetValue("containerName"); - _logger = logger; -} -``` - -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF file to the Azure Blob Storage container. - -```csharp - -[HttpPost("Download")] -[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] -[Route("[controller]/Download")] -//Post action for downloading the PDF documents - -public IActionResult Download([FromBody] Dictionary jsonObject) -{ - // Initialize the PDF Viewer object with memory cache object - PdfRenderer pdfviewer = new PdfRenderer(_cache); - - string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); - string document = jsonObject["documentId"]; - - BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); - - string result = Path.GetFileNameWithoutExtension(document); - // Get a reference to the blob - BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.pdf"); - - // Convert the document base64 string to bytes - byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]); - - // Upload the document to Azure Blob Storage - using (MemoryStream stream = new MemoryStream(bytes)) - { - blobClient.Upload(stream, true); - } - return Content(documentBase); -} -``` - -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "connectionString": "*Your Connection string from Azure*", - "containerName": "*Your container name in Azure*" -} -``` - -N> Replace the placeholders with the actual Azure Storage connection string and container name. For enhanced security, avoid storing connection strings in source-controlled files; use environment variables, managed identities, or a secret store such as Azure Key Vault. - -**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 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, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -N> Install the `Azure.Storage.Blobs` NuGet package in the web service project to use the server example. For security, avoid committing connection strings to source control and prefer environment variables, managed identities, or Azure Key Vault for secret management. - -[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 +[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). \ 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 8fc03f0612..f68c4f3a1b 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 @@ -80,126 +80,4 @@ function saveDocument() { N> Install the `dropbox` package in the JavaScript project before running the sample: `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 - -To save a PDF file to Dropbox cloud file storage, you can follow the steps below: - -**Step 1:** Create a Dropbox API app - -To create a Dropbox API app, follow the Dropbox .NET tutorial: [Dropbox .NET tutorial](https://www.dropbox.com/developers/documentation/dotnet#tutorial). Use the Dropbox App Console to register an app and obtain the necessary access token and permissions. - -**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 sets up the basic structure of the PDF Viewer application. - -**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. Refer to the Syncfusion knowledge base article on creating a PDF Viewer web service: [Create a PDF Viewer web service in .NET Core 3.0 and above](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. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Dropbox.Api; -using Dropbox.Api.Files; -``` - -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; -public readonly string _accessToken; -public readonly string _folderName; - -public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessToken = _configuration.GetValue("AccessToken"); - _folderName = _configuration.GetValue("FolderName"); -} -``` - -5. Modify the [Download()](https://ej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to the Dropbox storage. - -```csharp - -[HttpPost("Download")] -[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] -[Route("[controller]/Download")] -//Post action for downloading the PDF documents - -public async Task Download([FromBody] Dictionary jsonObject) -{ - //Initialize the PDF Viewer object with memory cache object - PdfRenderer pdfviewer = new PdfRenderer(_cache); - - string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); - byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]); - - string documentId = jsonObject["documentId"]; - string result = Path.GetFileNameWithoutExtension(documentId); - string fileName = result + "_downloaded.pdf"; - - using (var dropBox = new DropboxClient(_accessToken)) - { - using (var stream = new MemoryStream(documentBytes)) - { - // Upload the document to Dropbox - var uploadedFile = await dropBox.Files.UploadAsync( - _folderName + "/" + fileName, - WriteMode.Overwrite.Instance, - body: stream - ); - } - } - return Content(documentBase); -} -``` - -6. Open the `appsettings.json` file in the web service project and add the following entries below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessToken": "Your_Dropbox_Access_Token", - "FolderName": "Your_Folder_Name" -} -``` - -N> Replace the placeholders with the actual Dropbox access token and folder name. - -**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 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 - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -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) +[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) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md index da7a9ac2ce..ca759008a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md @@ -39,23 +39,6 @@ document.getElementById('textbounds')?.addEventListener('click', function() { console.log(viewer.textSearch.findText('pdf', false)); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", -}); -viewer.appendTo("#pdfViewer"); -document.getElementById('textbounds')?.addEventListener('click', function() { - console.log(viewer.textSearch.findText('pdf', false)); -}); - {% endhighlight %} {% endtabs %} @@ -84,23 +67,6 @@ document.getElementById('textbounds')?.addEventListener('click', function() { console.log(viewer.textSearch.findText('pdf', false, 7)); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", -}); -viewer.appendTo("#pdfViewer"); -document.getElementById('textbounds')?.addEventListener('click', function() { - console.log(viewer.textSearch.findText('pdf', false, 7)); -}); - {% endhighlight %} {% endtabs %} @@ -129,23 +95,6 @@ document.getElementById('textbounds')?.addEventListener('click', function() { console.log(viewer.textSearch.findText(['adobe', 'pdf'], false)); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", -}); -viewer.appendTo("#pdfViewer"); -document.getElementById('textbounds')?.addEventListener('click', function() { - console.log(viewer.textSearch.findText(['adobe', 'pdf'], false)); -}); - {% endhighlight %} {% endtabs %} @@ -174,23 +123,6 @@ document.getElementById('textbounds')?.addEventListener('click', function() { console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7)); }); -{% endhighlight %} -{% highlight ts tabtitle="Server-backed" %} - -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer'; - -// Inject required modules -PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields); - -const viewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer", -}); -viewer.appendTo("#pdfViewer"); -document.getElementById('textbounds')?.addEventListener('click', function() { - console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7)); - }); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md index 4441cd3f8f..f693f8fc7d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-features.md @@ -97,20 +97,6 @@ pdfviewer.resourceUrl= 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewe pdfviewer.enableTextSearch = true; pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -// Enable text search -pdfviewer.enableTextSearch = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -230,53 +216,6 @@ function searchPrevious(): void { } -//Cancels the current search and clears all highlights. -function cancelTextSearch(): void { - viewer.textSearch.cancelTextSearch(); -} - -// Example: wire up to buttons/inputs -const input = document.getElementById('searchBox') as HTMLInputElement | null; -document.getElementById('btnSearch')?.addEventListener('click', () => { - searchText(input?.value ?? '', false); -}); -document.getElementById('btnNext')?.addEventListener('click', () => searchNext()); -document.getElementById('btnPrev')?.addEventListener('click', () => searchPrevious()); -document.getElementById('btnCancel')?.addEventListener('click', () => cancelTextSearch()); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection, TextSearch); - - -let viewer: PdfViewer = new PdfViewer({ - documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' -}); - -viewer.appendTo('#pdfViewer'); // Ensure your HTML has
- -// --- Programmatic Text Search API --- - -// Searches the target text in the PDF and highlights all matches. -function searchText(query: string, matchCase = false): void { - if (!query || !query.trim()) return; - viewer.textSearch.searchText(query, matchCase); -} - -// Navigates to the next occurrence relative to the current active match. -function searchNext(): void { - viewer.textSearch.searchNext(); -} - -// Navigates to the previous occurrence relative to the current active match. - -function searchPrevious(): void { - viewer.textSearch.searchPrevious(); -} - - //Cancels the current search and clears all highlights. function cancelTextSearch(): void { viewer.textSearch.cancelTextSearch(); diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/textselection.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/textselection.md index 671eb39fd6..9283d24dfd 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/textselection.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/textselection.md @@ -60,23 +60,6 @@ pdfviewer.appendTo('#PdfViewer'); // Disable text selection later if required pdfviewer.enableTextSelection = false; -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection); - -let pdfviewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', - enableTextSelection: true -}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.appendTo('#PdfViewer'); - -// Toggle on demand -pdfviewer.enableTextSelection = false; - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md index 5ac8c7eeb8..3f99b07fc0 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/custom-toolbar.md @@ -98,20 +98,6 @@ Hide the default toolbar using `enableToolbar` and `enableThumbnail` properties: }); viewer.appendTo('#pdfViewer'); -``` -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -```ts - - let viewer: PdfViewer = new PdfViewer({ - enableToolbar: false, - enableThumbnail: false, - documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' - }); - viewer.appendTo('#pdfViewer'); - ``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md index 0ba7b3a343..bf8edf4be1 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar-customization/mobile-toolbar.md @@ -69,19 +69,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.enableDesktopMode = 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.enableDesktopMode = true; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} @@ -103,20 +90,6 @@ pdfviewer.enableDesktopMode = true; pdfviewer.enableTextSelection = 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"; -pdfviewer.enableDesktopMode = true; -pdfviewer.enableTextSelection = false; -pdfviewer.appendTo('#PdfViewer'); - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md index b3643e4d7a..cce0b39930 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/toolbar.md @@ -114,9 +114,6 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, add the following `serviceUrl` in the `index.html` file: -`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` - {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/toolbar/toolbar-hide-cs1" %} * **Show/Hide toolbar using showToolbar as in the following code snippet** @@ -175,10 +172,6 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer#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/toolbar/toolbar-method-cs1" %} ## Show/Hide the default toolbaritem @@ -238,10 +231,6 @@ pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/toolbar/toolbar-items-cs1" %} * **Show/Hide toolbaritem using showToolbaritem as in the following code snippet** @@ -300,10 +289,6 @@ document.getElementById('set').addEventListener('click', ()=> { {% endhighlight %} {% endtabs %} -N> To set up the **server-backed PDF Viewer**, -Add the below `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/toolbar/toolbar-items-method-cs1" %} ## Customize Built-In Toolbar @@ -369,58 +354,6 @@ function OnCreateSearch(this: any): any { this.addIcon('prepend', 'e-icons e-search'); } -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer'; -import { ComboBox } from "@syncfusion/ej2-dropdowns"; -import { TextBox } from "@syncfusion/ej2-inputs"; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print); -let toolItem1: CustomToolbarItemModel = { - prefixIcon: 'e-icons e-paste', - id: 'print', - tooltipText: 'Custom toolbar item', -}; -let toolItem2: CustomToolbarItemModel = { - id: 'download', - text: 'Save', - tooltipText: 'Custom toolbar item', - align: 'right' -}; -let LanguageList: string[] = ['Typescript', 'Javascript', 'Angular', 'C#', 'C', 'Python']; -let toolItem3: CustomToolbarItemModel = { - type: 'Input', - tooltipText: 'Language List', - cssClass: 'percentage', - align: 'Left', - id: 'dropdown', - template: new ComboBox({ width: 100, value: 'TypeScript', dataSource: LanguageList, popupWidth: 85, showClearButton: false, readonly: false }) -}; -let toolItem4: CustomToolbarItemModel = { - type: 'Input', - tooltipText: 'Text', - align: 'Right', - cssClass: 'find', - id: 'textbox', - template: new TextBox({ width: 125, placeholder: 'Type Here', created: OnCreateSearch }) -} -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"; -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; -pdfviewer.toolbarSettings = { toolbarItems: [toolItem1, toolItem2, 'OpenOption', 'PageNavigationTool', 'MagnificationTool', toolItem3, 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', toolItem4, 'CommentTool', 'SubmitForm']} -pdfviewer.appendTo('#PdfViewer'); -//To handle custom toolbar click event. -pdfviewer.toolbarClick = function (args) { - if (args.item && args.item.id === 'print') { - pdfviewer.print.print(); - } - else if (args.item && args.item.id === 'download') { - pdfviewer.download(); - } -}; -function OnCreateSearch(this: any): any { - this.addIcon('prepend', 'e-icons e-search'); -} {% endhighlight %} {% endtabs %} @@ -537,20 +470,6 @@ PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkVie }); viewer.appendTo('#pdfViewer'); -``` -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - -```ts - - PdfViewer viewer = new PdfViewer({ - enableToolbar: false, - enableThumbnail: false, - documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' - }); - viewer.appendTo('#pdfViewer'); - ``` {% endhighlight %} {% endtabs %} @@ -1140,383 +1059,6 @@ function updateSearchInputIcon(isEnable: boolean): void { enableNextButton(false); enablePrevButton(false); -``` -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -```ts - -import { - PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, - IPageChangeEventArgs, ILoadEventArgs, TextSearch, TextSelection -} from '@syncfusion/ej2-pdfviewer'; -import { Toolbar as Tool, TreeView, NodeSelectEventArgs } from '@syncfusion/ej2-navigations'; -import { ClickEventArgs, Button, CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons'; -import { Dialog } from '@syncfusion/ej2-popups'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSearch, TextSelection); - -/** - * Default PdfViewer sample - */ - -let inputTemplate: string = '
'; -let ele: string = '
of 0
'; -let isBookmarkOpen: boolean = false; -let isBookmarkClick: boolean = false; -let isTextSearchBoxOpen: boolean = false; -let bookmarkPopup: Dialog; -let textSearchPopup: Dialog; -let toolbarObj: Tool; -let viewer: PdfViewer; -let currentPageBox: HTMLElement; -let searchInput: HTMLElement; -let searchButton: HTMLElement; -let matchCase: boolean = false; - -function previousClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.navigation.goToPreviousPage(); -} - -function hidePopups(): void { - isBookmarkOpen = false; - isTextSearchBoxOpen = false; - bookmarkPopup.hide(); - textSearchPopup.hide(); -} - -function bookmarkClicked(): void { - textSearchPopup.hide(); - if (!isBookmarkOpen) { - let bookmarkDetails: any = viewer.bookmark.getBookmarks(); - if (bookmarkDetails.bookmarks) { - let bookmarks: any = bookmarkDetails.bookmarks.bookMark; - let treeObj: TreeView = new TreeView({ - fields: - { - dataSource: bookmarks, - id: 'Id', - parentID: 'Pid', - text: 'Title', - hasChildren: 'HasChild', - }, nodeSelected: nodeClick - }); - treeObj.appendTo('#bookmarkview'); - bookmarkPopup.show(); - isBookmarkOpen = true; - isBookmarkClick = true; - } else { - toolbarObj.enableItems(document.getElementById('bookmarkButton'), false); - isBookmarkOpen = false; - } - } else { - if (!isBookmarkClick) { - bookmarkPopup.show(); - isBookmarkClick = true; - } else { - bookmarkPopup.hide(); - isBookmarkClick = false; - } - } -} - -function nextClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.navigation.goToNextPage(); -} - -function searchClicked(args: ClickEventArgs): void { - bookmarkPopup.hide(); - if (!isTextSearchBoxOpen) { - textSearchPopup.show(); - } else { - viewer.textSearch.cancelTextSearch(); - textSearchPopup.hide(); - } - isTextSearchBoxOpen = !isTextSearchBoxOpen; -} - -function printClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.print.print(); -} - -function downloadClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.download(); -} - -function pageFitClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.magnification.fitToPage(); - updateZoomButtons(); - toolbarObj.enableItems(document.getElementById('fitPage'), false); -} - -function zoomInClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.magnification.zoomIn(); - updateZoomButtons(); -} - -function zoomOutClicked(args: ClickEventArgs): void { - hidePopups(); - viewer.magnification.zoomOut(); - updateZoomButtons(); -} - -function onCurrentPageBoxKeypress(event: KeyboardEvent): boolean { - if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) { - event.preventDefault(); - return false; - } else { - // tslint:disable-next-line:radix - let currentPageNumber: number = parseInt((currentPageBox as HTMLInputElement).value); - if (event.which === 13) { - if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { - viewer.navigation.goToPage(currentPageNumber); - } else { - (currentPageBox as HTMLInputElement).value = viewer.currentPageNumber.toString(); - } - } - return true; - } -} - -function onCurrentPageBoxClicked(): void { - (currentPageBox as HTMLInputElement).select(); - (currentPageBox).focus(); -} - -function readFile(args: any): void { - // tslint:disable-next-line - let upoadedFiles: any = args.target.files; - if (args.target.files[0] !== null) { - let uploadedFile: File = upoadedFiles[0]; - if (uploadedFile) { - let reader: FileReader = new FileReader(); - let filename: string = upoadedFiles[0].name; - reader.readAsDataURL(uploadedFile); - // tslint:disable-next-line - reader.onload = (e: any): void => { - let uploadedFileUrl: string = e.currentTarget.result; - viewer.load(uploadedFileUrl, null); - viewer.fileName = filename; - (currentPageBox as HTMLInputElement).value = '1'; - document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - document.getElementById('bookmarkview').innerHTML = ''; - isBookmarkOpen = false; - }; - } - } -} - -function openDocument(e: ClickEventArgs): void { - document.getElementById('fileUpload').click(); -} - -function updatePageNavigation(): void { - if (viewer.currentPageNumber === 1) { - toolbarObj.enableItems(document.getElementById('previousPage'), false); - toolbarObj.enableItems(document.getElementById('nextPage'), true); - } else if (viewer.currentPageNumber === viewer.pageCount) { - toolbarObj.enableItems(document.getElementById('previousPage'), true); - toolbarObj.enableItems(document.getElementById('nextPage'), false); - } else { - toolbarObj.enableItems(document.getElementById('previousPage'), true); - toolbarObj.enableItems(document.getElementById('nextPage'), true); - } -} - -function updateZoomButtons(): void { - if (viewer.zoomPercentage <= 50) { - toolbarObj.enableItems(document.getElementById('zoomIn'), true); - toolbarObj.enableItems(document.getElementById('zoomOut'), false); - toolbarObj.enableItems(document.getElementById('fitPage'), true); - } else if (viewer.zoomPercentage >= 400) { - toolbarObj.enableItems(document.getElementById('zoomIn'), false); - toolbarObj.enableItems(document.getElementById('zoomOut'), true); - toolbarObj.enableItems(document.getElementById('fitPage'), true); - } else { - toolbarObj.enableItems(document.getElementById('zoomIn'), true); - toolbarObj.enableItems(document.getElementById('zoomOut'), true); - toolbarObj.enableItems(document.getElementById('fitPage'), true); - } -} - -function nodeClick(args: NodeSelectEventArgs): boolean { - let bookmarksDetails: any = viewer.bookmark.getBookmarks(); - let bookmarksDestination: any = bookmarksDetails.bookmarksDestination; - let bookid: number = Number(args.nodeData.id); - let pageIndex: number = bookmarksDestination.bookMarkDestination[bookid].PageIndex; - let Y: number = bookmarksDestination.bookMarkDestination[bookid].Y; - viewer.bookmark.goToBookmark(pageIndex, Y); - return false; -} - -function searchInputKeypressed(event: KeyboardEvent): void { - enablePrevButton(true); - enableNextButton(true); - if (event.which === 13) { - initiateTextSearch(); - updateSearchInputIcon(false); - } -} - -function searchClickHandler(): void { - if (searchButton.classList.contains('e-pv-search-icon')) { - viewer.textSearch.cancelTextSearch(); - initiateTextSearch(); - } else if (searchButton.classList.contains('e-pv-search-close')) { - (searchInput as HTMLInputElement).value = ''; - searchInput.focus(); - viewer.textSearch.cancelTextSearch(); - } -} - -function initiateTextSearch(): void { - let searchString: string = (searchInput as HTMLInputElement).value; - viewer.textSearch.searchText(searchString, matchCase); -} - -function previousSearchClicked(): void { - let searchString: string = (searchInput as HTMLInputElement).value; - if (searchString) { - viewer.textSearch.searchPrevious(); - } -} - -function nextSearchClicked(): void { - let searchString: string = (searchInput as HTMLInputElement).value; - if (searchString) { - viewer.textSearch.searchNext(); - } -} - -function checkBoxChanged(args: ChangeEventArgs): void { - if (args.checked) { - matchCase = true; - } else { - matchCase = false; - } - initiateTextSearch(); -} - -function enablePrevButton(isEnable: boolean): void { - let previousSearchButton: HTMLElement = document.getElementById('previousSearch'); - if (isEnable) { - previousSearchButton.removeAttribute('disabled'); - } else { - (previousSearchButton as HTMLButtonElement).disabled = true; - } -} - -function enableNextButton(isEnable: boolean): void { - let nextSearchButton: HTMLElement = document.getElementById('nextSearch'); - if (isEnable) { - nextSearchButton.removeAttribute('disabled'); - } else { - (nextSearchButton as HTMLButtonElement).disabled = true; - } -} - -function updateSearchInputIcon(isEnable: boolean): void { - if (isEnable) { - searchButton.classList.remove('e-pv-search-close'); - searchButton.classList.add('e-pv-search-icon'); - } else { - searchButton.classList.remove('e-pv-search-icon'); - searchButton.classList.add('e-pv-search-close'); - } -} - - - toolbarObj = new Tool({ - items: [ - { prefixIcon: 'e-pv-open-document', tooltipText: 'Open', id: 'openButton', click: openDocument.bind(this) }, - { prefixIcon: 'e-pv-bookmark-icon', tooltipText: 'Bookmark', id: 'bookmarkButton', click: bookmarkClicked }, - // tslint:disable-next-line:max-line-length - { prefixIcon: 'e-pv-previous-page-navigation-icon', id: 'previousPage', tooltipText: 'Previous Page', align: 'Center', click: previousClicked.bind(this) }, - // tslint:disable-next-line:max-line-length - { prefixIcon: 'e-pv-next-page-navigation-icon', id: 'nextPage', tooltipText: 'Next Page', align: 'Center', click: nextClicked.bind(this) }, - { template: inputTemplate, tooltipText: 'Page Number', align: 'Center' }, - { template: ele, tooltipText: 'Page Number', align: 'Center' }, - { prefixIcon: 'e-pv-search-icon', tooltipText: 'Text Search', align: 'Right', click: searchClicked.bind(this) }, - { prefixIcon: 'e-pv-print-document-icon', tooltipText: 'Print', align: 'Right', click: printClicked.bind(this) }, - { prefixIcon: 'e-pv-download-document-icon', tooltipText: 'Download', align: 'Right', click: downloadClicked.bind(this) } - ] - }); - toolbarObj.appendTo('#topToolbar'); - let magnificationToolbar: Tool = new Tool({ - items: [ - { prefixIcon: 'e-pv-fit-page-icon', id: 'fitPage', tooltipText: 'Fit to page', click: pageFitClicked.bind(this) }, - { prefixIcon: 'e-pv-zoom-in-icon', id: 'zoomIn', tooltipText: 'Zoom in', click: zoomInClicked.bind(this) }, - { prefixIcon: 'e-pv-zoom-out-icon', id: 'zoomOut', tooltipText: 'Zoom out', click: zoomOutClicked.bind(this) }, - ] - }); - magnificationToolbar.appendTo('#magnificationToolbar'); - viewer = new PdfViewer({ - enableToolbar: false, - enableThumbnail: false, - documentPath: 'https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf', - serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' - }); - viewer.appendTo('#pdfViewer'); - document.getElementById('fileUpload').addEventListener('change', readFile, false); - currentPageBox = document.getElementById('currentPage'); - (currentPageBox as HTMLInputElement).value = '1'; - searchInput = document.getElementById('searchInput'); - bookmarkPopup = new Dialog({ - showCloseIcon: true, header: 'Bookmarks', closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - content: '
', - buttons: [{ - buttonModel: {}, - }], position: { X: 'left', Y: 'top' }, cssClass: 'e-bookmark-popup', beforeClose: (): void => { - isBookmarkOpen = false; - } - }); - bookmarkPopup.appendTo('#popup'); - - textSearchPopup = new Dialog({ - showCloseIcon: false, closeOnEscape: false, isModal: false, target: document.getElementById('pdfViewer'), - buttons: [{ - buttonModel: {}, - }], position: { X: 'right', Y: 'top' }, cssClass: 'e-text-search-popup', - }); - textSearchPopup.appendTo('#textSearchBox'); - - let previousSearch: Button = new Button({ iconCss: 'e-pv-previous-search' }); - previousSearch.appendTo('#previousSearch'); - - let nextSearch: Button = new Button({ iconCss: 'e-pv-next-search-btn' }); - nextSearch.appendTo('#nextSearch'); - - let matchCaseCheck: CheckBox = new CheckBox({ label: 'Match case', change: checkBoxChanged }); - matchCaseCheck.appendTo('#matchCase'); - - viewer.pageChange = (args: IPageChangeEventArgs): void => { - (currentPageBox as HTMLInputElement).value = viewer.currentPageNumber.toString(); - updatePageNavigation(); - }; - - viewer.documentLoad = (args: ILoadEventArgs): void => { - document.getElementById('totalPage').textContent = 'of ' + viewer.pageCount; - updatePageNavigation(); - }; - searchButton = document.getElementById('searchBtn'); - searchInput.addEventListener('focus', () => { searchInput.parentElement.classList.add('e-input-focus'); }); - searchInput.addEventListener('blur', () => { searchInput.parentElement.classList.remove('e-input-focus'); }); - searchInput.addEventListener('keypress', searchInputKeypressed); - document.getElementById('previousSearch').addEventListener('click', previousSearchClicked); - document.getElementById('nextSearch').addEventListener('click', nextSearchClicked); - currentPageBox.addEventListener('keypress', onCurrentPageBoxKeypress); - currentPageBox.addEventListener('click', onCurrentPageBoxClicked); - searchButton.addEventListener('click', searchClickHandler); - bookmarkPopup.hide(); - textSearchPopup.hide(); - enableNextButton(false); - enablePrevButton(false); - ``` {% endhighlight %} {% endtabs %} @@ -1563,39 +1105,6 @@ The following code illustrates how to render the default toolbar with specific t ``` {% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -```ts - -
- - -``` -{% endhighlight %} {% endtabs %} [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Toolbar/Toolbar%20customization). 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 7afb43e0eb..9a7d3f0965 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 @@ -21,7 +21,7 @@ PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,Th TextSelection, TextSearch, Print); let pdfviewer: PdfViewer = new PdfViewer({enableDownload: true}); -pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; +pdfviewer.resoureUrl = "https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); pdfviewer.dataBind(); pdfviewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null); From 2a32ed2ff513093c5c5854daa8150cd44f5b6373 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Mon, 22 Jun 2026 11:15:03 +0530 Subject: [PATCH 2/7] 1033233: TypeScript pending service URL changes --- .../annotation-types/distance-annotation.md | 94 ------------- .../save-pdf-file/to-amazon-s3.md | 124 +----------------- 2 files changed, 1 insertion(+), 217 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/distance-annotation.md index 9bb048e4f6..c232f25987 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/distance-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-types/distance-annotation.md @@ -46,20 +46,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('distanceMode')?.addEventListener('click', () => { - pdfviewer.annotationModule.setAnnotationMode('Distance'); -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('distanceMode')?.addEventListener('click', () => { pdfviewer.annotationModule.setAnnotationMode('Distance'); }); @@ -99,24 +85,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('addDistanceAnnotation')?.addEventListener('click', () => { - pdfviewer.annotation.addAnnotation('Distance', { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }] - } as DistanceSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, DistanceSettings } 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.appendTo('#PdfViewer'); - document.getElementById('addDistanceAnnotation')?.addEventListener('click', () => { pdfviewer.annotation.addAnnotation('Distance', { offset: { x: 200, y: 230 }, @@ -184,27 +152,6 @@ pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly. pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; pdfviewer.appendTo('#PdfViewer'); -document.getElementById('editDistanceAnnotation')?.addEventListener('click', () => { - for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { - if (pdfviewer.annotationCollection[i].subject === 'Distance calculation') { - pdfviewer.annotationCollection[i].strokeColor = '#0000FF'; - pdfviewer.annotationCollection[i].thickness = 2; - pdfviewer.annotationCollection[i].opacity = 0.8; - pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]); - } - } -}); -{% 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.appendTo('#PdfViewer'); - document.getElementById('editDistanceAnnotation')?.addEventListener('click', () => { for (let i = 0; i < pdfviewer.annotationCollection.length; i++) { if (pdfviewer.annotationCollection[i].subject === 'Distance calculation') { @@ -234,17 +181,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.distanceSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' }; 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.distanceSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} ## Set properties while adding Individual Annotation @@ -264,25 +200,6 @@ import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotati PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); -//Apply Distance Settings while adding individual Annotation -document.getElementById('Ink')?.addEventListener('click', function () { - pdfviewer.annotation.addAnnotation('Distance', { - offset: { x: 200, y: 230 }, - pageNumber: 1, - vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }], - fillColor: 'blue', opacity: 0.6, strokeColor: 'green' - } as DistanceSettings); -}); -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DistanceSettings} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - const pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; @@ -324,17 +241,6 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview pdfviewer.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; 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.measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' }; -pdfviewer.appendTo('#PdfViewer'); -{% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master) 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 282327b3dc..3b2aad7d95 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 @@ -91,126 +91,4 @@ function saveDocument() { N> Install the AWS SDK package to use the browser example. Run `npm install aws-sdk` for the v2 bundle, or prefer the AWS SDK v3 modular packages for smaller client bundles and better tree-shaking. -[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 - -To save a PDF file to AWS S3, 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. - -**Step 2:** Modify the `PdfViewerController.cs` file in the 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. - -3. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Amazon; -using Amazon.S3; -using Amazon.S3.Model; -``` - -4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp -private IConfiguration _configuration; -public readonly string _accessKey; -public readonly string _secretKey; -public readonly string _bucketName; - -public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessKey = _configuration.GetValue("AccessKey"); - _secretKey = _configuration.GetValue("SecretKey"); - _bucketName = _configuration.GetValue("BucketName"); -} -``` - -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 - -[HttpPost("Download")] -[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")] -[Route("[controller]/Download")] -//Post action for downloading the PDF documents - -public IActionResult Download([FromBody] Dictionary jsonObject) -{ - // Initialize the PDF Viewer object with memory cache object - PdfRenderer pdfviewer = new PdfRenderer(_cache); - string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; - - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion); - string bucketName = _bucketName; - string documentName = jsonObject["documentId"]; - string result = Path.GetFileNameWithoutExtension(documentName); - byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]); - using (MemoryStream stream = new MemoryStream(bytes)) - { - var request = new PutObjectRequest - { - BucketName = bucketName, - Key = result + "_downloaded.pdf", - InputStream = stream, - }; - // Upload the PDF document to AWS S3 - var response = s3Client.PutObjectAsync(request).Result; - } - return Content(documentBase); -} -``` - -6. Open the `appsettings.json` file in the web service project and add the following lines below the existing `"AllowedHosts"` configuration. - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessKey": "Your Access Key from AWS S3", - "SecretKey": "Your Secret Key from AWS S3", - "BucketName": "Your Bucket name from AWS S3" -} -``` - -N> Replace the placeholders with the appropriate AWS credentials and bucket name. For enhanced security, avoid storing long-lived credentials in configuration files; use environment variables or a secrets manager instead. - -**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 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 - -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView, - BookmarkView, TextSelection, Annotation, FormFields, FormDesigner); - -let viewer: PdfViewer = new PdfViewer(); -// Replace the "localhost:44396" with the actual URL of your server -viewer.serviceUrl = 'https://localhost:44396/pdfviewer'; -viewer.appendTo('#pdfViewer'); -viewer.load('PDF_Succinctly.pdf', null); - -``` - -N> The `AWSSDK.S3` NuGet package must be installed in the web service project to use the server example. Use secure secret management for credentials rather than storing them in source-controlled configuration files. - -[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 +[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). \ No newline at end of file From 9e4d05348e5c9d157ea468a6f3905390c54be9e5 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Mon, 22 Jun 2026 15:08:45 +0530 Subject: [PATCH 3/7] 1033233: Updated Service URL changes to Core PDF Viewer --- .../PDF-Viewer/asp-net-core/accessibility.md | 45 - .../asp-net-core/annotation/comments.md | 75 -- .../annotation/free-text-annotation.md | 336 ------- .../asp-net-core/annotation/ink-annotation.md | 250 ----- .../annotation/measurement-annotation.md | 488 ---------- .../annotation/shape-annotation.md | 452 --------- .../annotation/signature-annotation.md | 159 ---- .../annotation/stamp-annotation.md | 424 --------- .../annotation/sticky-notes-annotation.md | 197 ---- .../annotation/text-markup-annotation.md | 770 --------------- .../PDF/PDF-Viewer/asp-net-core/download.md | 29 - .../PDF/PDF-Viewer/asp-net-core/event.md | 885 ------------------ .../import-form-fields.md | 2 - .../PDF-Viewer/asp-net-core/globalization.md | 13 - .../asp-net-core/how-to/add-save-button.md | 42 - .../how-to/capture-page-number.md | 21 - .../how-to/customize-text-search-color.md | 38 - .../how-to/delete-a-specific-annotation.md | 20 - .../how-to/disable-context-menu.md | 12 - .../how-to/disable-tile-rendering.md | 13 - .../display-document-without-downloading.md | 30 - .../how-to/download-start-event.md | 19 - .../asp-net-core/how-to/enable-resize.md | 12 - .../how-to/identify-added-annotation-mode.md | 18 - .../how-to/import-export-annotation.md | 48 - .../asp-net-core/how-to/load-documents.md | 46 - .../asp-net-core/how-to/load-n-number-page.md | 17 - .../asp-net-core/how-to/min-max-zoom.md | 24 - .../asp-net-core/how-to/open-bookmark.md | 40 - .../asp-net-core/how-to/open-thumbnail.md | 21 - .../how-to/overlapped-annotation.md | 16 - .../pagerenderstarted-pagerendercompleted.md | 29 - .../asp-net-core/how-to/print-document.md | 20 - .../how-to/restricting-zoom-in-mobile-mode.md | 24 - .../how-to/select-multi-page-annotations.md | 11 - .../asp-net-core/how-to/show-bookmark.md | 11 - .../how-to/show-hide-annotation.md | 1 - .../signatureselect-signatureunselect.md | 26 - .../asp-net-core/how-to/unload-document.md | 21 - .../asp-net-core/interaction-mode.md | 24 - .../interactive-pdf-navigation/bookmark.md | 52 - .../interactive-pdf-navigation/hyperlink.md | 50 - .../page-thumbnail.md | 11 - .../interactive-pdf-navigation/page.md | 51 - .../PDF-Viewer/asp-net-core/magnification.md | 12 - .../PDF-Viewer/asp-net-core/mobile-toolbar.md | 21 - .../PDF/PDF-Viewer/asp-net-core/navigation.md | 60 -- .../open-pdf-file/from-amazon-s3.md | 128 +-- .../open-pdf-file/from-azure-blob-storage.md | 115 +-- .../asp-net-core/organize-pages/events.md | 39 - .../organize-pages/programmatic-support.md | 70 -- .../asp-net-core/organize-pages/toolbar.md | 33 - .../PDF-Viewer/asp-net-core/organize-pdf.md | 90 -- .../PDF/PDF-Viewer/asp-net-core/print.md | 108 --- .../save-pdf-file/to-amazon-s3.md | 120 +-- .../PDF-Viewer/asp-net-core/text-search.md | 193 ---- .../PDF-Viewer/asp-net-core/textselection.md | 44 - .../annotation-toolbar.md | 30 - .../toolbar-customization/custom-toolbar.md | 133 --- .../form-designer-toolbar.md | 22 - .../toolbar-customization/mobile-toolbar.md | 22 - .../toolbar-customization/primary-toolbar.md | 106 --- .../PDF/PDF-Viewer/asp-net-core/toolbar.md | 240 ----- .../document-loading-issues.md | 2 +- 64 files changed, 4 insertions(+), 6477 deletions(-) delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/free-text-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/ink-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/measurement-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/shape-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/stamp-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/sticky-notes-annotation.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/text-markup-annotation.md diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md index fa971e56cb..7d1a7fa124 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md @@ -167,51 +167,6 @@ Multiple modifiers can be combined using the bitwise OR operator (`|`). } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/comments.md index e24fc8f3b2..8897f88209 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/comments.md @@ -118,44 +118,6 @@ window.onload = function() { {% endraw %} {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -{% raw %} -
-
- - -
- - - -
- -{% endraw %} -{% endhighlight %} {% endtabs %} ### Edit comments and replies programmatically @@ -201,43 +163,6 @@ window.onload = function() { {% endraw %} {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -{% raw %} -
-
- - -
- - -
- -{% endraw %} -{% endhighlight %} {% endtabs %} ### Read comments added by users diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/free-text-annotation.md deleted file mode 100644 index 30fb2ada5f..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/free-text-annotation.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -layout: post -title: "Free text annotation in ASP.NET Core PDF Viewer control" -description: "Learn about free text annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2): add, edit, delete, and default settings." -platform: document-processing -control: PDF Viewer -documentation: ug -domainurl: ##DomainURL## ---- - -# Free text annotation in ASP.NET Core PDF Viewer component - -The PDF Viewer provides tools to add, edit, and remove free-text annotations. - -## Add a free-text annotation - -To add a free-text annotation: - -* Click the **Edit Annotation** button in the PDF Viewer toolbar to reveal the annotation toolbar. -* Select the **Free Text Annotation** button to enter free*text annotation mode. -* Tap or click anywhere on the page to add text. - -When the viewer is in pan mode, selecting the Free Text annotation switches the viewer to text-selection mode. - -![Free Text tool in the annotation toolbar](../images/freetext_tool.png) - -The example below shows switching to free-text annotation mode via a button click. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- -{% endhighlight %} -{% endtabs %} - -## Add a free-text annotation programmatically - -You can add a free-text annotation programmatically using the `addAnnotation()` method. - -Example: add a free-text annotation using `addAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- -{% endhighlight %} -{% endtabs %} - -## Change the content of an existing free-text annotation programmatically - -To update the content of an existing free-text annotation, use the `editAnnotation()` method. Example below demonstrates editing an annotation's bounds and text. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- -{% endhighlight %} -{% endtabs %} - -N> The PDF Viewer does not edit original document text. You can add and modify free-text annotations only. - -## Edit free-text annotation properties - -Use the annotation toolbar to configure font family, size, style, font color, text alignment, fill color, stroke color, border thickness, and opacity. - -### Font family - -Choose a font from the Font Family tool. - -![Font family selection](../images/fontfamily.png) - -### Font size - -Select a size in the Font Size tool. - -![Font size selection](../images/fontsize.png) - -### Font color - -Pick a color from the Font Color palette. - -![Font color picker](../images/fontcolor.png) - -### Text alignment - -Set alignment using the Text Align tool. - -![Text alignment options](../images/textalign.png) - -### Text styles - -Toggle styles in the Font Style tool. - -![Text style options](../images/fontstyle.png) - -### Fill color - -Set the annotation's fill color with the Edit Color tool. - -![Fill color picker](../images/fillcolor.png) - -### Stroke color - -Set the stroke color with the Edit Stroke Color tool. - -![Stroke color picker](../images/fontstroke.png) - -### Thickness - -Adjust border thickness with the Edit Thickness slider. - -![Border thickness slider](../images/fontthickness.png) - -### Opacity - -Adjust opacity with the Edit Opacity slider. - -![Opacity slider](../images/fontopacity.png) - -## Set default properties during control initialization - -Set default properties for free-text annotations using `freeTextSettings` when initializing the control. The selected defaults are applied when annotations are created. The example below sets default values. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
- -{% endhighlight %} -{% endtabs %} - -You can also enable the autofit support for free text annotation by using the enableAutoFit boolean property in freeTextSettings as below. The width of the free text rectangle box will be increased based on the text added to it. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
- -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/ink-annotation.md deleted file mode 100644 index 674ca0f57b..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/ink-annotation.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -layout: post -title: Ink annotation in ASP.NET Core PDF Viewer control | Syncfusion -description: Learn about ink annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2): add, edit, delete, and default settings. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Ink annotation in ASP.NET Core PDF Viewer - -The PDF Viewer control provides options to add, edit, and delete ink annotations. - -![Ink annotations overview](../images/ink_annotation.png) - -## Add an ink annotation to the PDF document - -Ink annotations can be added to the PDF document using the annotation toolbar. - -* Use 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 to create an ink annotation. - - ![Ink tool in the annotation toolbar](../images/ink_tool.png) - -The following example switches the viewer to ink annotation mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Add an ink annotation programmatically to the PDF document - -The PDF Viewer library allows adding an ink annotation programmatically using the `addAnnotation()` method. - -The following examples demonstrate how to add an ink annotation programmatically using `addAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - -## Edit an existing ink annotation programmatically - -Use the `editAnnotation()` method to modify an existing ink annotation programmatically. - -The following example demonstrates `editAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Edit the properties of ink annotations - -Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit stroke color - -Change the stroke color using the color palette in the Edit Stroke Color tool. - -![Change ink stroke color](../images/ink_strokecolor.png) - -### Edit thickness - -Change the stroke thickness using the range slider in the Edit Thickness tool. - -![Change ink thickness](../images/ink_thickness.png) - -### Edit opacity - -Change the opacity using the range slider in the Edit Opacity tool. - -![Change ink opacity](../images/ink_opacity.png) - -## Set default properties during the control initialization - -Default properties for ink annotations can be set before creating the control by using the `inkAnnotationSettings` property. - -Supported settings include `author`, `strokeColor`, `thickness`, and `opacity`. Set these values on initialization so the viewer uses them when creating new ink annotations. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/measurement-annotation.md deleted file mode 100644 index 66f1d8a2fa..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/measurement-annotation.md +++ /dev/null @@ -1,488 +0,0 @@ ---- -layout: post -title: "Measurement annotation in ASP.NET Core PDF Viewer control" -description: "Learn about measurement annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume." -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Measurement annotation in ASP.NET Core PDF Viewer - -The PDF Viewer supports measurement annotations for capturing distances, perimeters, areas, radius, and volumes. - -Supported measurement annotations: - -* Distance -* Perimeter -* Area -* Radius -* Volume - -![Measurement annotations overview](../images/calibrate_annotation.png) - -## Add measurement annotations - -Measurement annotations are available from the annotation toolbar. - -* Open the annotation toolbar using the **Edit Annotation** button in the PDF Viewer toolbar. -* Use the **Measurement Annotation** drop-down to choose a measurement type. -* Select a measurement type to enable its annotation mode, then place the measurement on the page. - -If the viewer is in pan mode, selecting a measurement annotation activates text selection mode where applicable. - -![CalibrateTool](../images/calibrate_tool.png) - -The following example switches the viewer to distance annotation mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- -
- -{% endhighlight %} -{% endtabs %} - -## Add a measurement annotation to the PDF document programmatically - -The PDF Viewer library allows adding an ink annotation programmatically using the `addAnnotation()` method. - -The following examples demonstrate how to add measurement annotations programmatically using `addAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% endtabs %} - -## Edit an existing measurement annotation programmatically - -Use the `editAnnotation()` method to modify existing measurement annotations programmatically. - -The following example demonstrates `editAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% endtabs %} - -## Edit properties of measurement annotations - -Change fill color, stroke color, thickness, and opacity using the annotation toolbar tools: Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity. - -### Edit fill color - -Change the fill color with the color palette in the Edit Color tool. - -![CalibrateFillColor](../images/calibrate_fillcolor.png) - -### Edit stroke color - -Change the stroke color with the Edit Stroke Color tool. - -![CalibrateStrokeColor](../images/calibrate_stroke.png) - -### Edit thickness - -Adjust border thickness with the range slider in the Edit Thickness tool. - -![CalibrateThickness](../images/calibrate_thickness.png) - -### Edit opacity - -Adjust annotation opacity with the range slider in the Edit Opacity tool. - -![CalibrateOpacity](../images/calibrate_opacity.png) - -### Edit line properties - -Line-based measurement annotations (distance and perimeter) include additional options in the Line Properties window. Open it by right-clicking the annotation and choosing Properties. - -![CalibrateProperty](../images/calibrate_lineprop.png) - -## Set default properties during initialization - -Default properties for measurement annotations can be configured on the viewer before creation using the `distanceSettings`, `perimeterSettings`, `areaSettings`, `radiusSettings`, and `volumeSettings` properties. - -The following code snippet shows how to set default measurement annotation settings on initialization. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- -{% endhighlight %} -{% endtabs %} - -## Scale ratio and measurement units - -Modify the scale ratio and measurement unit via the Scale Ratio option in the viewer's context menu. - -![CalibrateScaleRatio](../images/calibrate_scaleratio.png) - -Supported units for measurement annotations: - -* Inch -* Millimeter -* Centimeter -* Point -* Pica -* Feet - -![CalibrateScaleDialog](../images/calibrate_scaledialog.png) - -## Set default scale ratio during initialization - -Configure scale ratio defaults using `measurementSettings` (for example, `scaleRatio`, `conversionUnit`, and `displayUnit`) before creating the viewer. The following snippet demonstrates these settings. -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/shape-annotation.md deleted file mode 100644 index e15f191041..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/shape-annotation.md +++ /dev/null @@ -1,452 +0,0 @@ ---- -layout: post -title: Shape annotation in ASP.NET Core PDF Viewer control | Syncfusion -description: Learn about shape annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2), including add, edit, delete, and default settings. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Shape annotation in ASP.NET Core PDF Viewer - -The PDF Viewer provides tools to add, edit, and delete shape annotations. Supported shape types: - -* Line -* Arrow -* Rectangle -* Circle -* Polygon - -![Shape annotations overview](../images/shape_annot.png) - -## Add a shape annotation - -Shape annotations are available from the annotation toolbar. - -- Open the annotation toolbar with the **Edit Annotation** button in the PDF Viewer toolbar. -- Use the **Shape Annotation** drop-down to choose the desired shape type. -- Select a shape type to enable its annotation mode, then draw the shape on the page. - -N> When the viewer is in pan mode and a shape tool is selected, the viewer switches to text selection mode where applicable to ensure a smooth interaction. - -![Shape annotation toolbar](../images/shape_toolbar.png) - -The following sample shows how to switch the viewer to circle annotation mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- -
- -{% endhighlight %} -{% endtabs %} - -## Add a shape annotation to the PDF document programmatically - -The PDF Viewer library allows adding an ink annotation programmatically using the `addAnnotation()` method. - -The following examples show how to add shape annotations programmatically using `addAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% endtabs %} - -## Edit an existing shape annotation programmatically - -Use the `editAnnotation()` method to modify existing shape annotations programmatically. - -The following example demonstrates `editAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- - - - - -
- -{% endhighlight %} -{% endtabs %} - -## Editing the properties of the shape annotation - -## Edit properties of shape annotations - -Change fill color, stroke color, thickness, and opacity using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar. - -### Edit fill color - -Change the fill color using the color palette in the Edit Color tool. - -![Edit fill color for shapes](../images/shape_fillColor.png) - -### Edit stroke color - -Change the stroke color using the Edit Stroke Color tool. - -![Edit stroke color for shapes](../images/shape_strokecolor.png) - -### Edit thickness - -Adjust border thickness using the Edit Thickness range slider. - -![Edit thickness for shapes](../images/shape_thickness.png) - -### Edit opacity - -Adjust opacity using the Edit Opacity range slider. - -![Edit opacity for shapes](../images/shape_opacity.png) - -### Line properties - -Line and arrow annotations include additional options in the Line Properties dialog. Open it by right-clicking a line or arrow annotation and choosing Properties. - -![Line properties dialog](../images/shape_lineproperty.png) - -### Edit annotation programmatically - -Modify annotations programmatically using the `editAnnotation()` method. The example below demonstrates selecting and editing an annotation. -``` - - - -``` -### Delete annotation programmatically - -Delete a specific annotation with `deleteAnnotationById()` by providing the annotation's id. The example below demonstrates usage. - -``` - - - -``` - -## Set default properties during initialization - -Default properties for shape annotations can be configured before creating the viewer using `lineSettings`, `arrowSettings`, `rectangleSettings`, `circleSettings`, and `polygonSettings`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
- -{% endhighlight %} -{% endtabs %} - -N> In both the Arrow and Line settings, the Fill Color option is available only when an arrowhead style is applied at the Start or End. If both Start and End arrowhead styles are set to `None`, lines do not support fill rendering and the Fill Color option is disabled. See Arrow settings and Line settings for API details. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/signature-annotation.md index 2e31476bb5..9941cd7177 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/signature-annotation.md @@ -57,27 +57,6 @@ function handWrittenSignature() { } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- -
- - -
-
- - - {% endhighlight %} {% endtabs %} @@ -155,73 +134,6 @@ function addAnnotation() { {% endhighlight %} {% endtabs %} -{% tabs %} -{% highlight js tabtitle="Server-Backed" %} -
- - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - ## Edit signature annotation ### Edit signature annotation in UI @@ -308,62 +220,6 @@ function editSignature() { } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
-
- - -
- -
- - -
-
- - - {% endhighlight %} {% endtabs %} @@ -386,21 +242,6 @@ The following example enables or disables the handwritten signature in the PDF V -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
-
- @* Render the PDF Viewer *@ - - -
-
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/stamp-annotation.md deleted file mode 100644 index 63c22e1d6f..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/stamp-annotation.md +++ /dev/null @@ -1,424 +0,0 @@ ---- -layout: post -title: "Sticky notes annotation in ASP.NET Core PDF Viewer control" -description: "Learn about sticky note annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2): add, edit, delete, and default settings." -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Stamp annotation in ASP.NET Core PDF Viewer component - -The PDF Viewer provides options to add, edit, delete, and rotate the following stamp annotations: - -* Dynamic -* Sign Here -* Standard Business -* Custom Stamp - -![StampAnnotation](../images/stamp_annot.png) - -## Add stamp annotations to the PDF document - -Stamp annotations are added using the annotation toolbar in the ASP.NET Core PDF Viewer. - -* Use the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar. -* Use the **Stamp Annotation** drop-down to view available stamp annotation types. - - ![StampTool](../images/stamp_tool.png) - -* Selecting a stamp type enables its annotation mode. - - ![StampPopup](../images/selectstamp_annot.png) - -* Place the stamp on a page in the PDF document. - -N> When the viewer is in pan mode and a stamp annotation tool is selected, the PDF Viewer automatically switches to text select mode to provide a smoother interaction. - -The following examples show how to switch to stamp annotation modes in ASP.NET Core. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - - - -
- - -
-
- - - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - - - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - -## Add a custom stamp - -Use the **Edit Annotation** button and the **Stamp Annotation** drop-down to access the Custom Stamp option. - -![CustomStamp](../images/customStamp.png) - -Select the Custom Stamp option, then choose an image file to add as a custom stamp on the PDF page. - -Only JPG and JPEG image formats are supported for custom stamp annotations. - -## Add a stamp annotation programmatically - -Use the `addAnnotation()` method to add stamp annotations programmatically. - -The examples below demonstrate using `addAnnotation()` to create stamp annotations. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - - - - -
- - -
-
- - - -{% endhighlight %} - -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - - - - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - -## Edit an existing stamp annotation programmatically - -Use the `editAnnotation()` method to modify existing stamp annotations programmatically in ASP.NET Core. - -The following example demonstrates `editAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- - -
-
- - - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - -
-
- - - -{% endhighlight %} -{% endtabs %} - -## Set default properties during control initialization - -Set default properties for stamp annotations before creating the control by specifying `stampSettings`. - -After changing the default opacity using the Edit Opacity tool, the selected value is applied. The example below shows how to set default stamp annotation settings. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- - - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - -{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/sticky-notes-annotation.md deleted file mode 100644 index c8071c600d..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/sticky-notes-annotation.md +++ /dev/null @@ -1,197 +0,0 @@ ---- -layout: post -title: "Stamp annotation in ASP.NET Core PDF Viewer control" -description: "Learn about stamp annotations in the Syncfusion ASP.NET Core PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps." -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Sticky notes annotation in ASP.NET Core PDF Viewer - -The PDF Viewer provides options to add, edit, and delete sticky note annotations. - -![StickyNotesAnnotation](../images/stickynotes_annotation.png) - -## Add a sticky note annotation - -Annotation comments are added using the comment panel. - -* Right-click a sticky note annotation and choose **Comment** from the context menu. -* Use the comment panel to add comments, reply, and change status. - -![StickyNotesTool](../images/stickynotes_tool.png) - -![StickyNotesComment](../images/stickynotes_comment.png) - -## Add a sticky note annotation to the PDF document programmatically - -Use the `addAnnotation()` method to add a sticky note annotation programmatically. - -The following example demonstrates using `addAnnotation()` to create a sticky note annotation. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- -
- -{% endhighlight %} - -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- -
- -{% endhighlight %} -{% endtabs %} - -## Edit an existing sticky note annotation programmatically - -Use the `editAnnotation()` method to modify existing sticky note annotations programmatically. - -The following example demonstrates `editAnnotation()`. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-
- -
- -{% endhighlight %} - -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-
- -
- -{% endhighlight %} -{% endtabs %} - -## Edit the properties of sticky note annotations - -### Editing opacity - -Edit opacity using the range slider in the Edit Opacity tool. - -![StickyNotesOpacity](../images/sticky_opacity.png) - -### Editing comments - -Comment text, replies, and status can be edited using the comment panel. - -* Open the comment panel using the Comment Panel button in the annotation toolbar. - - ![StickyNotesComment](../images/commentPanel.png) - -Modify or delete comments or replies, and change status using the menu options in the comment panel. - - ![StickyNotesEdit](../images/sticky_editbtn.png) - -## Set default properties during control initialization - -Set default properties for sticky note annotations before creating the control by specifying `stickyNotesSettings`. - -After changing the default opacity using the Edit Opacity tool, the selected value is applied. The example below shows how to set default sticky note annotation settings. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
- -{% endhighlight %} - -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
- -{% endhighlight %} -{% endtabs %} - -## Disable sticky note annotations - -The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
- -
-{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- -
-{% endhighlight %} -{% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/text-markup-annotation.md deleted file mode 100644 index 4740d8ba21..0000000000 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/annotation/text-markup-annotation.md +++ /dev/null @@ -1,770 +0,0 @@ ---- -layout: post -title: Text markup annotation in ASP.NET Core PDF Viewer | Syncfusion -description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion ASP.NET Core PDF Viewer. -control: PDF Viewer -platform: document-processing -documentation: ug -domainurl: ##DomainURL## ---- - -# Text markup annotation in ASP.NET Core PDF Viewer - -The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly. - -![Text markup annotation toolbar and examples](../images/text_markup_annotation.png) - -## Highlight text - -Two ways to add highlights: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Highlight** in the context menu. - - ![Highlight using context menu](../images/highlight_context.png) - -2. Using the annotation toolbar -* 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**. - - ![Highlight button in annotation toolbar](../images/highlight_button.png) - -When pan mode is active, entering any text markup mode switches the PDF Viewer to text selection mode. - -Refer to the following code snippet to switch to highlight mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -Refer to the following code snippet to switch back to normal mode from highlight mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Highlight text programmatically - -Programmatically add highlights using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#addannotation) method. - -Example: - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Underline text - -Two ways to add underlines: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Underline** in the context menu. - - ![Underline using context menu](../images/underline_context.png) - -2. Using the annotation toolbar -* 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**. - - ![Underline button in annotation toolbar](../images/underline_button.png) - -When pan mode is active, entering underline mode switches the PDF Viewer to text selection mode to enable text selection for underlining. - -Refer to the following code snippet to switch to underline mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -Refer to the following code snippet to switch back to normal mode from underline mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Underline text programmatically - -Programmatically add underlines using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#addannotation) method. - -Example: - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text - -Two ways to add strikethroughs: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Strikethrough** in the context menu. - - ![Strikethrough using context menu](../images/strikethrough_context.png) - -2. Using the annotation toolbar -* 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**. - - ![Strikethrough button in annotation toolbar](../images/strikethrough_button.png) - -When pan mode is active, entering strikethrough mode switches the PDF Viewer to text selection mode to enable text selection for striking through. - -Refer to the following code snippet to switch to strikethrough mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -Refer to the following code snippet to switch back to normal mode from strikethrough mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Strikethrough text programmatically - -Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#addannotation) method. - -Example: - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text - -Two ways to add squiggly annotations: - -1. Using the context menu -* Select text in the PDF document and right-click it. -* Select **Squiggly** in the context menu. - - ![Squiggly using context menu](../images/squiggly_context.png) - -2. Using the annotation toolbar -* 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**. - - ![Squiggly button in annotation toolbar](../images/squiggly_button.png) - -When pan mode is active, entering squiggly mode switches the PDF Viewer to text selection mode to enable text selection for adding squiggly annotations. - -Refer to the following code snippet to switch to squiggly mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -Refer to the following code snippet to switch back to normal mode from squiggly mode. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Add squiggly to text programmatically - -Programmatically add squiggly using the [addAnnotation](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#addannotation) method. - -Example: - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Deleting a text markup annotation - -The selected annotation can be deleted in the following ways: - -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. - * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed. - - ![Delete annotation button in toolbar](../images/delete_button.png) - -## 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. - -### Edit color - -Use the color palette in the Edit Color tool to change the annotation color. - -![Edit color palette for annotations](../images/edit_color.png) - -### Edit opacity - -Use the range slider in the Edit Opacity tool to change annotation opacity. - -![Edit opacity slider for annotations](../images/edit_opacity.png) - -## Set default properties during control initialization - -Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`. - -> 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. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Perform undo and redo - -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 performed in the following ways: - -1.Using keyboard shortcuts: - 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 to call undo and redo actions from the client side. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
- - -
- - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - -{% endhighlight %} -{% endtabs %} - -## Save text markup annotations - -Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified. - -## Print text markup annotations - -Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified. - -## Disable text markup annotation - -Disable text markup annotations using the `enableTextMarkupAnnotation` property. - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- -{% endhighlight %} -{% endtabs %} - -## See also - -* [Toolbar items](../../pdfviewer/toolbar) -* [Feature modules](../../pdfviewer/feature-module) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/download.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/download.md index d11d214732..874cc5b73f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/download.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/download.md @@ -23,16 +23,6 @@ By default, the download button appears in the PDF Viewer toolbar. Set the `enab {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ![Download toolbar button in PDF Viewer](./images/download.png) @@ -55,25 +45,6 @@ In addition to the toolbar button, the PDF Viewer provides the `download()` meth pdfViewer.download(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/event.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/event.md index 556a79f286..9b33106e06 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/event.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/event.md @@ -93,23 +93,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - {% endhighlight %} {% endtabs %} @@ -138,24 +121,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -196,28 +161,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -249,24 +192,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -295,24 +220,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -341,24 +248,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -387,24 +276,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -433,24 +304,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -479,24 +332,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -525,24 +360,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -571,24 +388,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -619,24 +418,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -668,24 +449,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -714,24 +477,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -760,24 +505,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -806,24 +533,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -852,24 +561,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -898,24 +589,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -944,24 +617,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -990,24 +645,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1036,24 +673,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1082,24 +701,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1128,24 +729,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1174,24 +757,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1220,24 +785,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1266,24 +813,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1312,24 +841,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1365,24 +876,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1411,24 +904,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1457,24 +932,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1503,24 +960,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1549,24 +988,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1595,24 +1016,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1641,24 +1044,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1687,24 +1072,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1733,24 +1100,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1779,24 +1128,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1825,24 +1156,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1871,24 +1184,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1917,24 +1212,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -1963,24 +1240,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2009,24 +1268,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2055,24 +1296,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2101,24 +1324,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2147,24 +1352,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2193,24 +1380,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2239,24 +1408,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2285,24 +1436,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -2331,24 +1464,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md index accab91343..a2d7aa5097 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md @@ -18,8 +18,6 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu ## API to use - [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) -N>If you’re using a **server-backed viewer**, set serviceUrl before importing. - ### Import FDF {% tabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/globalization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/globalization.md index a709685db8..8f99f1b885 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/globalization.md @@ -285,19 +285,6 @@ The `locale` property enables you to specify the language and culture for the PD -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md index 24533a4412..360c6904ce 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/add-save-button.md @@ -59,48 +59,6 @@ The PDF Viewer enables customization of toolbar items, including adding, showing -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/capture-page-number.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/capture-page-number.md index 10a8e7f9e1..0734daa21d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/capture-page-number.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/capture-page-number.md @@ -38,27 +38,6 @@ Follow these steps to capture the current page number on demand. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/customize-text-search-color.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/customize-text-search-color.md index 1c33d81710..0938455a6a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/customize-text-search-color.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/customize-text-search-color.md @@ -60,43 +60,5 @@ The following example demonstrates how to configure these colors in both Standal } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/delete-a-specific-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/delete-a-specific-annotation.md index ea0addc5fd..daf663e60c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/delete-a-specific-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/delete-a-specific-annotation.md @@ -30,26 +30,6 @@ Remove specific annotations programmatically using the `deleteAnnotationById()` - - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} -The client-side logic is identical in both **Standalone** and **Server-Backed** modes. In the server-backed scenario, configure the `serviceUrl` property so the viewer can delegate processing to your ASP.NET Core controller. - [View sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/Display%20document%20without%20downloading) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/download-start-event.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/download-start-event.md index 188f0ceca2..3bfd59f4b0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/download-start-event.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/download-start-event.md @@ -30,24 +30,5 @@ Use the [`downloadStart`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusi args.cancel = true; // Prevent download action } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/enable-resize.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/enable-resize.md index 4bf810b11d..272a1165cc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/enable-resize.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/enable-resize.md @@ -29,17 +29,5 @@ Set the **EnableTextMarkupResizer** property to `true` in the Razor view to disp -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/identify-added-annotation-mode.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/identify-added-annotation-mode.md index e13816ceb3..6fa7432c35 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/identify-added-annotation-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/identify-added-annotation-mode.md @@ -39,23 +39,5 @@ The following example demonstrates this implementation across standalone and ser } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/import-export-annotation.md index efd06c8dd1..77f0c452a5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/import-export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/import-export-annotation.md @@ -66,54 +66,6 @@ Follow these steps to implement annotation import and export functionality: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - - - - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-documents.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-documents.md index 2df3923830..6ecf0c14f9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-documents.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-documents.md @@ -38,30 +38,6 @@ Switch between PDF documents or replace the currently displayed document after t } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -88,28 +64,6 @@ Switch between PDF documents or replace the currently displayed document after t } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-n-number-page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-n-number-page.md index d74213e983..67c448f671 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-n-number-page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/load-n-number-page.md @@ -38,23 +38,6 @@ The following examples demonstrate how to set the `initialRenderPages` property -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -@{ - ViewData["Title"] = "Home page"; - double InitialRenderPages = 5; -} - -
- - -
{% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/min-max-zoom.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/min-max-zoom.md index d540eeb2d2..764e80ef53 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/min-max-zoom.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/min-max-zoom.md @@ -65,30 +65,6 @@ Optimize zoom settings for mobile devices by updating the `minZoom` and `maxZoom } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-bookmark.md index 8b61ec23b4..517d0d4463 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-bookmark.md @@ -37,26 +37,6 @@ Follow these steps to implement bookmark pane toggling: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -83,26 +63,6 @@ To hide the bookmark pane, call the `closeBookmarkPane()` method. Use the follow viewer.bookmarkViewModule.closeBookmarkPane(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-thumbnail.md index 3eb6ab8d42..5dacdd1f90 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/open-thumbnail.md @@ -36,27 +36,6 @@ Follow these steps to open the thumbnail pane: pdfViewer.thumbnailViewModule.openThumbnailPane(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/overlapped-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/overlapped-annotation.md index 753bb6e3e6..3f0054600d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/overlapped-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/overlapped-annotation.md @@ -33,21 +33,5 @@ The following example demonstrates how to capture and log the IDs of all overlap } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/pagerenderstarted-pagerendercompleted.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/pagerenderstarted-pagerendercompleted.md index fd9bdeaf3a..711eeb2222 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/pagerenderstarted-pagerendercompleted.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/pagerenderstarted-pagerendercompleted.md @@ -51,35 +51,6 @@ The following example demonstrates how to subscribe to these events in both stan -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -@{ - ViewData["Title"] = "Home page"; -} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/print-document.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/print-document.md index 5cbbcc038a..0b62b538dc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/print-document.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/print-document.md @@ -36,25 +36,5 @@ Follow these steps to add print functionality to your PDF Viewer instance. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/restricting-zoom-in-mobile-mode.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/restricting-zoom-in-mobile-mode.md index 78bff87ba5..2be00d3fdc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/restricting-zoom-in-mobile-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/restricting-zoom-in-mobile-mode.md @@ -36,30 +36,6 @@ The following example demonstrates how to check for mobile devices and apply zoo } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/select-multi-page-annotations.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/select-multi-page-annotations.md index dc0af79e5c..4c6cc14086 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/select-multi-page-annotations.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/select-multi-page-annotations.md @@ -27,16 +27,5 @@ The following example demonstrates how to configure the `enableMultiPageAnnotati -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-bookmark.md index d50705b202..aae0b9da21 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-bookmark.md @@ -29,17 +29,6 @@ Follow these steps to enable the bookmark pane: -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-hide-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-hide-annotation.md index d4086138c9..eefbead535 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-hide-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/show-hide-annotation.md @@ -57,6 +57,5 @@ ViewData["Title"] = "Home page"; - The `exportAnnotationsAsObject()` method returns a promise containing serialized annotation data. Store this securely if it contains sensitive information. - The `resourceUrl` must match the application's PDF Viewer library version. -- In server-backed scenarios, replace `resourceUrl` with `serviceUrl` pointing to the ASP.NET Core controller. [View sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to/ShowHideAnnotations) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/signatureselect-signatureunselect.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/signatureselect-signatureunselect.md index 8e214dbf8d..5910d8a854 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/signatureselect-signatureunselect.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/signatureselect-signatureunselect.md @@ -53,32 +53,6 @@ The following example demonstrates how to subscribe to these events in both stan -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -@{ - ViewData["Title"] = "Home page"; -} - -
- - -
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/unload-document.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/unload-document.md index 64d5a7e079..4cfee89218 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/unload-document.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/how-to/unload-document.md @@ -37,27 +37,6 @@ Follow these steps to unload a PDF document programmatically: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interaction-mode.md index cc15e71f1d..0335465a62 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interaction-mode.md @@ -27,18 +27,6 @@ In selection mode, text can be selected and copied from the loaded PDF document. -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -63,18 +51,6 @@ The interaction mode can be switched using the following example: -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/bookmark.md index bff1451a8d..64fe52ebcc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/bookmark.md @@ -27,17 +27,6 @@ Enable or disable bookmark navigation using the `enableBookmark` property on the -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -68,26 +57,6 @@ Here is an example of how to use the `goToBookmark` method: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -121,27 +90,6 @@ You can use the `getBookmarks` method to retrieve the document's bookmark struct } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/hyperlink.md index 5ba10cb387..a4405a989b 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/hyperlink.md @@ -55,17 +55,6 @@ When `enableHyperlink` is set to `false`, all hyperlinks in the document become -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -93,17 +82,6 @@ By default, links open in the same browser tab (`CurrentTab`). To open links in -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -155,34 +133,6 @@ The event arguments include: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page-thumbnail.md index 5fc71ae79a..8b3d529731 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page-thumbnail.md @@ -27,17 +27,6 @@ You can enable or disable thumbnail navigation using the `enableThumbnail` prope -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page.md index 3224c1dd56..8b1c87720e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/interactive-pdf-navigation/page.md @@ -35,17 +35,6 @@ Page navigation can be enabled or disabled in PDF Viewer using the following cod -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -96,46 +85,6 @@ The following examples show how to navigate pages programmatically using the PDF } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/magnification.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/magnification.md index 2b91892890..1761fe4c19 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/magnification.md @@ -26,18 +26,6 @@ The following example shows how to enable magnification: -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/mobile-toolbar.md index 8f601760d2..f1685ef98e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/mobile-toolbar.md @@ -66,16 +66,6 @@ The desktop toolbar can be enabled on mobile devices using the `enableDesktopMod {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ## Enable Scrolling in Desktop Mode with Touch Gestures @@ -93,17 +83,6 @@ Smooth scrolling of PDF documents on mobile devices in desktop mode can be enabl {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ## Print Option Availability diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/navigation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/navigation.md index 8e8161fda5..88f6e62475 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/navigation.md @@ -40,18 +40,6 @@ Page navigation can be controlled using the `enableNavigation` property. Set it -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -78,18 +66,6 @@ Bookmark navigation is controlled using the `enableBookmark` property. Set it to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -116,18 +92,6 @@ Thumbnail navigation is controlled using the `enableThumbnail` property. Set it -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -156,18 +120,6 @@ Hyperlink navigation is controlled using the `enableHyperlink` property. Set it -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -188,18 +140,6 @@ Use the `hyperlinkOpenState` property to control whether hyperlinks open in the -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-amazon-s3.md index 03b7bd488c..72aac647e8 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-amazon-s3.md @@ -85,130 +85,4 @@ loadDocument() { N> The **AWSSDK.S3** NuGet package must be installed in your 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%20Standalone). - -## Using the server-backed PDF Viewer - -Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. - -**Step 1:** Create AWS S3 account - - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. - -**Step 2:** Create PDF Viewer Sample in ASP.NET Core - -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started) to create a simple PDF Viewer sample in ASP.NET Core. - -**Step 3:** Modify the `Index.cshtml.cs` File in the Project - -1. Import the required namespaces at the top of the file. - -```csharp -using System.IO; -using Amazon; -using Amazon.S3; -using Amazon.S3.Model; -``` - -2. Add the following private fields and constructor parameters to the `Index.cshtml.cs` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp - -private IConfiguration _configuration; -public readonly string _accessKey; -public readonly string _secretKey; -public readonly string _bucketName; - -public IndexModel(Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessKey = _configuration.GetValue("AccessKey"); - _secretKey = _configuration.GetValue("SecretKey"); - _bucketName = _configuration.GetValue("BucketName"); -} -``` - -3. Modify the `OnPostLoad()` method to load the PDF files from AWS S3 - -```csharp - -public async Task OnPostLoadAsync([FromBody] jsonObjects responseData) -{ - PdfRenderer pdfviewer = new PdfRenderer(_cache); - MemoryStream stream = new MemoryStream(); - var jsonObject = JsonConverterstring(responseData); - object jsonResult = new object(); - if (jsonObject != null && jsonObject.ContainsKey("document")) - { - if (bool.Parse(jsonObject["isFileName"])) - { - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; - - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion); - - string document = jsonObject["document"]; - - // Specify the document name or retrieve it from a different source - var response = await s3Client.GetObjectAsync(_bucketName, document); - - Stream responseStream = response.ResponseStream; - responseStream.CopyTo(stream); - stream.Seek(0, SeekOrigin.Begin); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonObject["document"]); - stream = new MemoryStream(bytes); - } - } - jsonResult = pdfviewer.Load(stream, jsonObject); - return Content(JsonConvert.SerializeObject(jsonResult)); -} - - -``` - -4. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessKey": "Your Access Key from AWS S3", - "SecretKey": "Your Secret Key from AWS S3", - "BucketName": "Your Bucket name from AWS S3" -} -``` - -N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name - -**Step 4:** Configure the PDF Viewer component - -Set the `documentPath` property of the PDF Viewer to the PDF file name to load from AWS S3. Ensure the document name matches an object in your bucket. - -```csharp - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - -
- - -
- -``` - -N> The **AWSSDK.S3** NuGet package must be installed in your 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 +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-azure-blob-storage.md index 26c5a00bd0..651a1191bf 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/open-pdf-file/from-azure-blob-storage.md @@ -94,117 +94,4 @@ function blobToBase64(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 the server-backed PDF Viewer - -Follow these steps to load a PDF from Azure Blob Storage using the server-backed PDF Viewer. - -**Step 1:** Create the Azure Blob Storage account - -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). - -**Step 2:** Create PDF Viewer Sample in ASP.NET Core - -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET Core. - -**Step 3:** Modify the `Index.cshtml.cs` File in the Project - -1. Import the required namespaces at the top of the file. - -```csharp -using System.IO; -using Azure.Storage.Blobs; -using Azure.Storage.Blobs.Specialized; -``` - -2. Add the following private fields and constructor parameters to the `Index.cshtml.cs` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp - -private IConfiguration _configuration; -private readonly string _storageConnectionString; -private readonly string _storageContainerName; - -public IndexModel(Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _storageConnectionString = configuration.GetValue("connectionString"); - _storageContainerName = configuration.GetValue("containerName"); -} -``` - -3. Modify the `OnPostLoad()` method to load the PDF files from Azure Blob Storage - -```csharp - -public IActionResult OnPostLoad([FromBody] jsonObjects responseData) -{ - PdfRenderer pdfviewer = new PdfRenderer(_cache); - MemoryStream stream = new MemoryStream(); - var jsonObject = JsonConverterstring(responseData); - object jsonResult = new object(); - if (jsonObject != null && jsonObject.ContainsKey("document")) - { - if (bool.Parse(jsonObject["isFileName"])) - { - BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString); - string fileName = jsonObject["document"]; - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName); - BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); - blockBlobClient.DownloadTo(stream); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonObject["document"]); - stream = new MemoryStream(bytes); - } - } - jsonResult = pdfviewer.Load(stream, jsonObject); - return Content(JsonConvert.SerializeObject(jsonResult)); -} - -``` - -4. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "connectionString": "*Your Connection string from Azure*", - "containerName": "*Your container name in Azure*" -} -``` - -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 - -**Step 4:** Configure the PDF Viewer component - -Set the `documentPath` property of the PDF Viewer to the PDF file name to load from Azure Blob Storage. Ensure the document name exists in your Azure container. - -```csharp - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - -
- - -
- -``` - -N> The **Azure.Storage.Blobs** NuGet package must be installed in the 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 +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/events.md index 98e8041bf9..3286af64f5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/events.md @@ -42,25 +42,6 @@ Event arguments provide the save event information: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -95,26 +76,6 @@ Event arguments: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/programmatic-support.md index 0846bd3967..6d499f7155 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/programmatic-support.md @@ -26,17 +26,6 @@ The page organizer feature can be enabled or disabled using the `enablePageOrgan -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -54,17 +43,6 @@ You can control whether the page organizer dialog opens automatically when a doc -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -82,16 +60,6 @@ The `pageOrganizerSettings` API allows you to customize the page management func {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ## Open the page organizer dialog @@ -116,25 +84,6 @@ The `openPageOrganizer` method opens the page organizer dialog programmatically. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -160,24 +109,5 @@ The `closePageOrganizer` method programmatically closes the page organizer dialo } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/toolbar.md index eb3de0167d..4204955d6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/toolbar.md @@ -27,17 +27,6 @@ The `canInsert` property controls the visibility of the insert tool. When set to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -56,17 +45,6 @@ The `canDelete` property controls the visibility of the delete tool. When set to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -85,17 +63,6 @@ The `canRotate` property controls the visibility of the rotate tool. When set to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pdf.md index 71a92a34ca..1adda3081d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pdf.md @@ -153,16 +153,6 @@ Enables or disables the page organizer feature in the PDF Viewer. When disabled, {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ### isPageOrganizerOpen @@ -183,16 +173,6 @@ Determines whether the page organizer panel is displayed automatically when a do {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ### pageOrganizerSettings @@ -212,17 +192,6 @@ Provides granular control over page organizer features and thumbnail display. Th {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
-{% endhighlight %} {% endtabs %} ### openPageOrganizer @@ -251,27 +220,6 @@ Programmatically opens the page organizer panel. Use this API to provide users w pdfViewer.pageOrganizer.closePageOrganizer();); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -290,23 +238,6 @@ Programmatically opens the page organizer panel. Use this API to provide users w pdfViewer.pageOrganizer.openPageOrganizer(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -336,27 +267,6 @@ Programmatically closes the page organizer panel. Use this API to dismiss the or pdfViewer.pageOrganizer.closePageOrganizer();); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/print.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/print.md index 7df154f40d..f73da1dc86 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/print.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/print.md @@ -28,18 +28,6 @@ The print functionality can be controlled using the `enablePrint` property. Set -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -67,25 +55,6 @@ In addition to the toolbar print button, the PDF Viewer provides the `print()` m } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -117,19 +86,6 @@ The `printScaleFactor` property controls the quality of printed output. Higher s -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -158,19 +114,6 @@ The `enablePrintRotation` property controls whether landscape pages are automati -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -196,19 +139,6 @@ The `printMode` property controls how the print dialog is displayed when printin -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -253,26 +183,6 @@ See `PrintStartEventArgs` for details: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -309,24 +219,6 @@ The `printEnd` event fires when a print action completes or is cancelled. This e } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-amazon-s3.md index 272d1b42aa..0ee6f91f6e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/save-pdf-file/to-amazon-s3.md @@ -116,122 +116,4 @@ function saveDocument() { N> The **AWSSDK.S3** NuGet package must be installed in your 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%20Standalone). - -## Using the server-backed PDF Viewer - -To save a PDF file to AWS S3, follow these steps: - -**Step 1:** Create an AWS S3 account - - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. - -**Step 2:** Create a PDF Viewer sample in ASP.NET Core - -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET Core. - -**Step 3:** Modify the `Index.cshtml.cs` file in the project - -1. Import the required namespaces at the top of the file. - -```csharp -using System.IO; -using Amazon; -using Amazon.S3; -using Amazon.S3.Model; -``` - -2. Add the following private fields and constructor parameters to the `Index.cshtml.cs` class, In the constructor, assign the values from the configuration to the corresponding fields - -```csharp - -private IConfiguration _configuration; -public readonly string _accessKey; -public readonly string _secretKey; -public readonly string _bucketName; - -public IndexModel(Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration) -{ - _hostingEnvironment = hostingEnvironment; - _cache = cache; - _configuration = configuration; - _accessKey = _configuration.GetValue("AccessKey"); - _secretKey = _configuration.GetValue("SecretKey"); - _bucketName = _configuration.GetValue("BucketName"); -} -``` -3. Modify the `OnPostDownload()` method to save the downloaded PDF files to AWS S3 bucket - -```csharp - - public IActionResult OnPostDownload([FromBody] jsonObjects responseData) - { - PdfRenderer pdfviewer = new PdfRenderer(_cache); - var jsonObject = JsonConverterstring(responseData); - string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; - - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion); - string bucketName = _bucketName; - string documentName = jsonObject["documentId"]; - string result = Path.GetFileNameWithoutExtension(documentName); - byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]); - using (MemoryStream stream = new MemoryStream(bytes)) - { - var request = new PutObjectRequest - { - BucketName = bucketName, - Key = result + "_downloaded.pdf", - InputStream = stream, - }; - // Upload the PDF document to AWS S3 - var response = s3Client.PutObjectAsync(request).Result; - } - return Content(documentBase); - } - -``` - - -4. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration - -```json -{ - "Logging": { - "LogLevel": { - "Default": "Information", - "Microsoft.AspNetCore": "Warning" - } - }, - "AllowedHosts": "*", - "AccessKey": "Your Access Key from AWS S3", - "SecretKey": "Your Secret Key from AWS S3", - "BucketName": "Your Bucket name from AWS S3" -} -``` - -N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name - -**Step 4:** Configure the PDF Viewer component - -Set the [serviceUrl](https://ej2.syncfusion.com/documentation/api/pdfviewer#serviceurl) property of the PDF Viewer component 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. - -```csharp - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - -
- - -
- -``` - -N> The **AWSSDK.S3** NuGet package must be installed in your 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 +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/text-search.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/text-search.md index 30bcd949c0..f4892cc497 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/text-search.md @@ -26,18 +26,6 @@ Text search can be enabled or disabled using the `enableTextSearch` property. Th -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -115,26 +103,6 @@ To perform a case-sensitive search, set the `isMatchCase` parameter to `true`. T } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -161,26 +129,6 @@ You can search for complete words only by setting the `isMatchWholeWord` paramet } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -229,26 +177,6 @@ Searches for the specified text and returns bounding rectangles for all occurren } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -278,26 +206,6 @@ Searches for the specified text and returns bounding rectangles only for occurre } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -327,26 +235,6 @@ Searches for an array of text strings and returns bounding rectangles for all oc } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -376,26 +264,6 @@ Searches for an array of text strings and returns bounding rectangles only for o } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -437,27 +305,6 @@ The [`textSearchStart`]((https://help.syncfusion.com/cr/aspnetcore-js2/syncfusio } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -492,26 +339,6 @@ The [`textSearchHighlight`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfu } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -546,26 +373,6 @@ The [`textSearchComplete`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfus } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/textselection.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/textselection.md index 6f09a88f5d..43bfc9915c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/textselection.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/textselection.md @@ -24,16 +24,6 @@ The **enableTextSelection** property enables or disables selecting text in the P -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- {% endhighlight %} {% endtabs %} @@ -62,23 +52,6 @@ The **textSelectionStart** event triggers when selection is initiated. Typical u } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -103,23 +76,6 @@ The **textSelectionEnd** event triggers when selection is completed. It is usefu } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md index 524576d1d0..3e3a1258f0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/annotation-toolbar.md @@ -37,25 +37,6 @@ The following code snippet shows how to show or hide the annotation toolbar usin } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -79,16 +60,5 @@ The following example demonstrates how to customize the annotation toolbar by sp -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/custom-toolbar.md index 1e2240fd44..b1e3cdba32 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/custom-toolbar.md @@ -294,139 +294,6 @@ N> The icons are embedded in the font file used in the previous code snippet. } -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md index d40425d335..5e4a346ace 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/form-designer-toolbar.md @@ -29,17 +29,6 @@ The following code snippet shows how to enable the form designer toolbar using t -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -61,16 +50,5 @@ The following example demonstrates how to customize the form designer toolbar by -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md index 7b36db8b84..e5afc6cacb 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/mobile-toolbar.md @@ -65,17 +65,6 @@ Enable desktop mode on mobile devices by setting the `enableDesktopMode` API to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -93,17 +82,6 @@ To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md index af7d9f0bc3..d66f58f53a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar-customization/primary-toolbar.md @@ -27,17 +27,6 @@ Use the `enableToolbar` property to show or hide the toolbar: -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -61,25 +50,6 @@ The following code snippet shows how to show or hide the toolbar using the `show } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -101,19 +71,6 @@ The PDF Viewer provides options to show or hide grouped items in the built-in to -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -137,25 +94,6 @@ The PDF Viewer provides options to show or hide grouped items in the built-in to } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -241,50 +179,6 @@ The PDF Viewer supports customization of existing toolbar items (add, show, hide -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@page "{handler?}" -@model IndexModel -@using Syncfusion.EJ2.PdfViewer -@using Newtonsoft.Json -@{ - ViewData["Title"] = "Home page"; - CustomToolbarItems customToolbarItems = new CustomToolbarItems(); - var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; - customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; - PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() - { - ShowTooltip = true, - ToolbarItems = customToolbarItems.ToolbarItems - }; -} - -
- - -
- - - - - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md index 8b25e865ac..1c26cb917e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/toolbar.md @@ -49,18 +49,6 @@ Disable the entire toolbar by setting `enableToolbar="false"`: -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -88,25 +76,6 @@ Toggle the toolbar visibility programmatically using the `showToolbar` method af } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -132,19 +101,6 @@ Configure visible toolbar items using the `toolbarSettings` property at initiali -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- {% endhighlight %} {% endtabs %} @@ -172,25 +128,6 @@ Toggle individual toolbar items programmatically using the `showToolbarItem` met } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - -
- - - {% endhighlight %} {% endtabs %} @@ -281,50 +218,6 @@ The following customization operations are available: -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@page "{handler?}" -@model IndexModel -@using Syncfusion.EJ2.PdfViewer -@using Newtonsoft.Json -@{ - ViewData["Title"] = "Home page"; - CustomToolbarItems customToolbarItems = new CustomToolbarItems(); - var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; - customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; - PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() - { - ShowTooltip = true, - ToolbarItems = customToolbarItems.ToolbarItems - }; -} - -
- - -
- - - - - - {% endhighlight %} {% endtabs %} @@ -661,139 +554,6 @@ Add JavaScript functions to handle toolbar button clicks and coordinate with PDF } -{% endhighlight %} -{% highlight js tabtitle="Server-Backed" %} - - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md index f45ebcb0f6..f1e4c51c30 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/troubleshooting/document-loading-issues.md @@ -23,7 +23,7 @@ If a PDF does not render after upgrading to v23.1+, use the checklist below to r -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").CommandManager("commandManager").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/annotation-event.md index 37aa47d78a..799911ad3a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/annotation-event.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/annotation-event.md @@ -57,21 +57,6 @@ The following example illustrates how to handle the `annotationAdd` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationAdd("annotationAdd").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -99,19 +84,6 @@ The following example illustrates how to handle the `annotationDoubleClick` even } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationDoubleClick("annotationDoubleClicked").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -139,20 +111,6 @@ The following example illustrates how to handle the `annotationMouseLeave` event } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationMouseLeave("AnnotationMouseLeaved").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -180,20 +138,6 @@ The following example illustrates how to handle the `annotationMouseover` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationMouseover("AnnotationMouseovered").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -221,20 +165,6 @@ The following example illustrates how to handle the `annotationMove` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationMove("annotationMoved").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -262,20 +192,6 @@ The following example illustrates how to handle the `annotationMoving` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationMoving("annotationMoving").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -304,21 +220,6 @@ The following example illustrates how to handle the `annotationPropertiesChange` } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationPropertiesChange("annotationPropertiesChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -346,20 +247,6 @@ The following example illustrates how to handle the `annotationRemove` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationRemove("annotationRemoved").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -387,20 +274,6 @@ The following example illustrates how to handle the `annotationResize` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationResize("annotationResized").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -428,20 +301,6 @@ The following example illustrates how to handle the `annotationSelect` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationSelect("annotationSelected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -469,20 +328,6 @@ The following example illustrates how to handle the `annotationUnselect` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationUnSelect("annotationUnselected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -512,22 +357,6 @@ The following example illustrates how to handle the `beforeAddFreeText` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").BeforeAddFreeText("beforeAddedFreeText").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -557,20 +386,6 @@ The following example illustrates how to handle the `addSignature` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AddSignature("addSignature").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -598,20 +413,6 @@ The following example illustrates how to handle the `removeSignature` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").RemoveSignature("removeSignature").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -639,20 +440,6 @@ The following example illustrates how to handle the `resizeSignature` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResizeSignature("resizeSignature").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -680,20 +467,6 @@ The following example illustrates how to handle the `signaturePropertiesChange` } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignaturePropertiesChange("signaturePropertiesChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -721,20 +494,6 @@ The following example illustrates how to handle the `signatureSelect` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignatureSelect("signatureSelected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -762,19 +521,5 @@ The following example illustrates how to handle the `signatureUnselect` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignatureUnselect("signatureUnselected").Render() -
- - - {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/comments.md index f5bf848dee..7c6276b9d5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/comments.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/comments.md @@ -141,33 +141,5 @@ The following example logs comments in response to a button click. } -{% endhighlight %} - -{% highlight html tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/free-text-annotation.md index b9f907fd66..8715bd6fd0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/free-text-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/free-text-annotation.md @@ -41,22 +41,6 @@ The following example switches to free text annotation mode using a button click } -{% endhighlight %} - -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -97,37 +81,6 @@ Here is an example of adding a free text annotation programmatically using addAn } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -161,30 +114,6 @@ Here is an example of changing the content of a free text annotation using **edi } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -261,13 +190,6 @@ After changing default values, the selected values are applied. The following ex @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { FillColor = "green", BorderColor = "blue", FontColor = "yellow" }).Render() -
- {% endhighlight %} {% endtabs %} @@ -280,12 +202,5 @@ You can also enable the autofit support for free text annotation by using the En @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").FreeTextSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerFreeTextSettings { EnableAutoFit = true }).Render() -
- {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/ink-annotation.md index 7a9d4de046..9c6bd0c8d8 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/ink-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/ink-annotation.md @@ -40,21 +40,6 @@ The following example switches to ink annotation mode. } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -142,31 +127,6 @@ Here is an example of using **editAnnotation()**: } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -206,12 +166,5 @@ Refer to the following code sample to set the default ink annotation settings. @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").InkAnnotationSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerInkAnnotationSettings { Author = "Syncfusion", StrokeColor = "green", Thickness = 3, Opacity = 0.6 }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").InkAnnotationSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerInkAnnotationSettings { Author = "Syncfusion", StrokeColor = "green", Thickness = 3, Opacity = 0.6 }).Render() -
- {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/measurement-annotation.md index 1f82e97ecc..2d428c4ab9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/measurement-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/measurement-annotation.md @@ -49,21 +49,6 @@ The following example switches to distance annotation mode. } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -130,63 +115,6 @@ Here is an example showing how to add measurement annotations programmatically u } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -272,82 +200,6 @@ Here is an example of using **editAnnotation()**: } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -398,13 +250,6 @@ Refer to the following code sample to set the default annotation settings. @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DistanceSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerDistanceSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).PerimeterSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPerimeterSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).AreaSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerAreaSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).RadiusSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRadiusSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).VolumeSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerVolumeSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
- {% endhighlight %} {% endtabs %} @@ -436,12 +281,5 @@ The properties of scale ratio for measurement annotation can be set before creat @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MeasurementSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerMeasurementSettings { ScaleRatio = 2, ConversionUnit = Syncfusion.EJ2.PdfViewer.CalibrationUnit.Cm }).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/shape-annotation.md index 6d0d2ee067..f03bfd2e3a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/shape-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/shape-annotation.md @@ -49,21 +49,6 @@ Refer to the following code sample to switch to the circle annotation mode. } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -129,63 +114,6 @@ Here is an example showing how to add shape annotations programmatically using * } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -271,81 +199,6 @@ Here is an example of using **editAnnotation()**: -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -396,12 +249,5 @@ Default properties for shape annotations can be set before creating the control @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").LineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerLineSettings { FillColor = "blue", Opacity = 0.6, StrokeColor = "green" }).ArrowSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerArrowSettings { FillColor = "green", Opacity = 0.6, StrokeColor = "blue" }).RectangleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" }).CircleSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerCircleSettings { FillColor = "orange", Opacity = 0.6, StrokeColor = "pink" }).PolygonSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerPolygonSettings { FillColor = "pink", Opacity = 0.6, StrokeColor = "yellow" }).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/signature-annotation.md index a8dceed77f..18a80bbfcc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/signature-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/signature-annotation.md @@ -18,12 +18,6 @@ The following example shows how to enable handwritten signatures in the PDF View ```html @Html.EJS().PdfViewer("pdfviewer").EnableHandwrittenSignature(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableHandwrittenSignature(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() - ``` {% endhighlight %} {% endtabs %} @@ -167,14 +161,6 @@ Use the following example to set default handwritten signature settings. @Html.EJS().PdfViewer("pdfviewer").HandWrittenSignatureSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings { Opacity = 1, Thickness = 2 }).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).HandWrittenSignatureSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHandWrittenSignatureSettings { Opacity = 1, Thickness = 2 }).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/stamp-annotation.md index 90cfdd2dca..f26e6131f9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/stamp-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/stamp-annotation.md @@ -63,32 +63,6 @@ The following examples switch to stamp annotation modes. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -163,59 +137,6 @@ Here are examples showing how to add stamp annotations programmatically using ** } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -247,27 +168,6 @@ Here is an example of how you can use the **editAnnotation()** method: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} @@ -284,12 +184,5 @@ After changing default opacity using the Edit Opacity tool, the selected value i @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").StampSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings { Opacity = 0.3, Author = "Guest User" }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").StampSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStampSettings { Opacity = 0.3, Author = "Guest User" }).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/sticky-notes-annotation.md index d4ac3a067b..9414f3690d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/sticky-notes-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/sticky-notes-annotation.md @@ -55,24 +55,6 @@ Here is an example showing how to add a sticky note annotation programmatically } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -104,28 +86,6 @@ Here is an example of using **editAnnotation()**: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -163,13 +123,6 @@ After changing default opacity using the Edit Opacity tool, the selected value i ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").StickyNotesSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStickyNotesSettings { Author = "Syncfusion" }).Render() -
-``` -{% endhighlight %} {% endtabs %} ## Disable sticky note annotations @@ -184,11 +137,4 @@ The PDF Viewer control provides an option to disable sticky note annotations. Th ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableStickyNotesAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/text-markup-annotation.md index 6c7de899d8..a82dfdb0f7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/text-markup-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/annotation/text-markup-annotation.md @@ -51,21 +51,6 @@ Refer to the following code sample to switch to highlight mode. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -93,28 +78,6 @@ Refer to the following code sample to switch back to normal mode from highlight } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -141,23 +104,6 @@ Here is an example showing how to add highlights programmatically using addAnnot } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -199,21 +145,6 @@ Refer to the following code sample to switch to underline mode. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -241,28 +172,6 @@ Refer to the following code sample to switch back to normal mode from underline } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -289,23 +198,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -347,22 +239,6 @@ Refer to the following code sample to switch to strikethrough mode. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -390,28 +266,6 @@ Refer to the following code sample to switch back to normal mode from strikethro } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -438,23 +292,6 @@ Here is an example showing how to add strikethrough programmatically using addAn } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -497,22 +334,6 @@ Refer to the following code sample to switch to squiggly mode. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -540,28 +361,6 @@ Refer to the following code sample to switch back to normal mode from squiggly m } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -588,23 +387,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -653,13 +435,6 @@ Refer to the following code sample to set the default annotation settings. @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).SquigglySettings(new Syncfusion.EJ2.PdfViewer.PdfViewerSquigglySettings{ Author = "Guest User", Color = "#0000ff", Opacity = 0.9 }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HighlightSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerHighlightSettings{Author = "Guest User", Color = "#ffff00", Opacity = 0.9 }).UnderlineSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerUnderlineSettings{ Author = "Guest User", Color = "#00ffff", Opacity = 0.9 }).StrikethroughSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerStrikethroughSettings{ Author = "Guest User", Color = "#ff00ff", Opacity = 0.9, }).SquigglySettings(new Syncfusion.EJ2.PdfViewer.PdfViewerSquigglySettings{ Author = "Guest User", Color = "#0000ff", Opacity = 0.9 })Render() -
- {% endhighlight %} {% endtabs %} @@ -702,28 +477,6 @@ Refer to the following code sample to call undo and redo actions from the client } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} @@ -746,12 +499,5 @@ Disable text markup annotations using the enableTextMarkupAnnotation property. @Html.EJS().PdfViewer("pdfviewer").EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableTextMarkupAnnotation(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/download.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/download.md index 0bc0599c79..45ae2861c2 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/download.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/download.md @@ -18,13 +18,6 @@ The PDF Viewer supports downloading the loaded PDF file. You can enable or disab @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableDownload(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableDownload(true).Render() -
- {% endhighlight %} {% endtabs %} @@ -39,20 +32,6 @@ You can also programmatically invoke the download action using the `download()` @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("download").EnableDownload(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() - -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").DocumentLoad("download")..ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableDownload(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").BookmarkClick("bookmarkClicked").Render() -
- - {% endhighlight %} {% endtabs %} @@ -123,19 +111,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarClick("ToolbarClicked").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -171,22 +146,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).Render() -
- - - {% endhighlight %} {% endtabs %} @@ -214,19 +173,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ZoomChange("zoomChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -251,19 +197,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ButtonFieldClick("buttonFieldClicked").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -288,19 +221,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CommentAdd("commentAdded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -325,19 +245,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CommentDelete("commentDeleted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -362,19 +269,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CommentEdit("CommentEdited").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -399,19 +293,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CommentSelect("commentSelected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -436,19 +317,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CommentStatusChanged("commentStatusChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -473,19 +341,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Created("created").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -512,19 +367,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CustomContextMenuBeforeOpen("customContextMenuBeforeOpened").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -552,19 +394,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CustomContextMenuSelect("customContextMenuSelected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -589,19 +418,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentLoad("documentLoaded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -626,19 +442,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentLoadFailed("documentLoadFailed").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -663,19 +466,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentUnload("documentUnloaded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -700,19 +490,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DownloadEnd("downloadEnded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -737,19 +514,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DownloadStart("downloadStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -774,19 +538,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ExportFailed("exportFailed").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -811,19 +562,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ExportStart("exportStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -848,19 +586,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ExportSuccess("exportSuccess").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -885,19 +610,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ExtractTextCompleted("extractTextCompleted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -922,19 +634,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -960,20 +659,7 @@ Example: {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkMouseOver("hyperlinkMouseOvered").Render() -
- - - -{% endhighlight %} -{% endtabs %} +{% endtabs %} ## importFailed @@ -996,19 +682,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ImportFailed("importFailed").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1033,19 +706,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ImportStart("importStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1070,19 +730,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ImportSuccess("importSuccess").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1114,19 +761,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").KeyboardCustomCommands("keyboardCustomCommands").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1151,19 +785,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").MoveSignature("moveSignatured").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1188,19 +809,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageChange("pageChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1225,19 +833,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageClick("pageClicked").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1262,19 +857,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageMouseover("pageMouseover").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1299,19 +881,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSaveAs("pageOrganizerSaveAs").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1336,19 +905,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageRenderComplete("pageRenderCompleted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1373,19 +929,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageRenderInitiate("pageRenderInitiated").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1410,19 +953,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePrint(true).PrintEnd("printEnded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1449,21 +979,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePrint(true).PrintStart("printStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1488,19 +1003,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").RemoveSignature("removeSignatured").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1526,20 +1028,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResizeSignature("resizeSignature").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1564,19 +1052,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ResourcesLoaded("resourcesLoaded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1602,20 +1077,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignaturePropertiesChange("signaturePropertiesChanged").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1641,20 +1102,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignatureSelect("signatureSelected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1680,20 +1127,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").SignatureUnselect("signatureUnselected").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1719,20 +1152,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchComplete("textSearchCompleted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1758,20 +1177,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchHighlight("textSearchHighlighted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1798,21 +1203,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchStart("textSearchStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1838,20 +1228,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSelectionEnd("textSelectionEnded").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1877,20 +1253,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSelectionStart("textSelectionStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -1915,19 +1277,6 @@ Example: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ThumbnailClick("thumbnailClicked").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md index 90749ecbc8..e307618b29 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/forms/import-export-form-fields/import-form-fields.md @@ -18,14 +18,12 @@ The **PDF Viewer** lets you import values into interactive form fields in the cu ## API to use - [importFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) -Note: If you’re using a **server-backed viewer**, include `.ServiceUrl(...)` in the helper so the viewer can access server APIs during import/export. - ### Import FDF {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render() + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").Render()
@@ -47,7 +45,7 @@ Note: If you’re using a **server-backed viewer**, include `.ServiceUrl(...)` i {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render() + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").Render()
@@ -68,7 +66,7 @@ Note: If you’re using a **server-backed viewer**, include `.ServiceUrl(...)` i {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ServiceUrl("https://ej2services.syncfusion.com/production/web-services/api/pdfviewer").Render() + @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").Render()
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/globalization.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/globalization.md index ec6e843a14..a5c5830727 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/globalization.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/globalization.md @@ -277,14 +277,6 @@ You can set the desired culture using the `locale` property of the PDF Viewer. ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).Locale("ar-AE").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} Map the text content for the selected locale using the following script at the sample level: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/access-file-name.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/access-file-name.md index 356d1e0bbe..4b8ce384dc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/access-file-name.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/access-file-name.md @@ -35,22 +35,6 @@ In the `DocumentLoad` or `DownloadEnd` event handler, you can access the origina } -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentLoad("documentLoad").DownloadEnd("documentLoad").Render() - - ``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/add-save-button.md index 86fc02f233..1b9cb2995e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/add-save-button.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/add-save-button.md @@ -56,44 +56,6 @@ PDF Viewer supports customizing toolbar items, including adding, showing, hiding } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
-
-

- @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarClick("toolbarClick").Render() -
-
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/capture-page-number.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/capture-page-number.md index 85076f324c..6681c79e57 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/capture-page-number.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/capture-page-number.md @@ -35,23 +35,6 @@ The following steps outline how to capture the current page number. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md index 5cc1e3acd2..d526764e9c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md @@ -36,7 +36,7 @@ Fetch the blob data and convert it into a JSON object that can be processed for
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() + @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render()
diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md index 6965f8fcfd..f3c125554e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/custom-fonts.md @@ -51,16 +51,6 @@ Specify the required font names in the customFonts property. @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CustomFonts(["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"]).Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").CustomFonts(["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"]).Render() -
- ``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/customize-text-search-color.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/customize-text-search-color.md index 16fc6cf64c..93150a3c03 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/customize-text-search-color.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/customize-text-search-color.md @@ -66,36 +66,5 @@ Here is an example of how you can use the searchHighlightColor property and sear } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableTextSearch(true).TextSearchColorSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerTextSearchColorSettings { SearchColor = "#FF0000", SearchHighlightColor = "#0000FF" }).Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/default-width-height.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/default-width-height.md index af524b843b..2a186d2fed 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/default-width-height.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/default-width-height.md @@ -17,7 +17,7 @@ To change the width and height of the PDF Viewer, update the `Width` and `Height ```html
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Height("1000px").Width("80%").Render() + @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Height("1000px").Width("80%").Render()
``` diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/delete-a-specific-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/delete-a-specific-annotation.md index e7ea004969..7d51b5a791 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/delete-a-specific-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/delete-a-specific-annotation.md @@ -29,22 +29,6 @@ Use the `deleteAnnotationById()` method to remove a specific annotation from a P - - -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} - -Both **Standalone** and **Server-Backed** examples share the same client logic; configure the `serviceUrl` in the server-backed scenario so the viewer can delegate processing to the ASP.NET MVC controller. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/download-start-event.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/download-start-event.md index f0344ba648..aab2c6bddb 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/download-start-event.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/download-start-event.md @@ -36,23 +36,5 @@ function downloadStart(args) { }; -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@{ - ViewBag.Title = "Home Page"; -} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").DownloadStart("downloadStart").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/enable-resize.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/enable-resize.md index ada27e4f83..e939746b07 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/enable-resize.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/enable-resize.md @@ -21,12 +21,5 @@ Here is an example of how you can enable the resizer for the text markup annotat @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableTextMarkupResizer(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableTextMarkupResizer(true).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/import-export-annotation.md index 9160803036..fe49c2383d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/import-export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/import-export-annotation.md @@ -62,51 +62,6 @@ Use the following steps to import and export annotations as objects, JSON, or XF } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-n-number-page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-n-number-page.md index e491f7c1c8..c4e8678690 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-n-number-page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/load-n-number-page.md @@ -31,22 +31,6 @@ Using the `initialRenderPages` property prudently works well when a smaller rang ``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```cs -@{ - ViewBag.Title = "Home Page"; - double InitialRenderPages = 10; -} - -
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").InitialRenderPages(InitialRenderPages).Render() -
-
- -``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/min-max-zoom.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/min-max-zoom.md index 1db5ca141c..463169beb2 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/min-max-zoom.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/min-max-zoom.md @@ -30,7 +30,7 @@ Use the [`maxZoom`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("PDF_Succinctly.pdf").MaxZoom(maxZoom).MinZoom(minZoom).Render() + @Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").DocumentPath("PDF_Succinctly.pdf").MaxZoom(maxZoom).MinZoom(minZoom).Render()
``` @@ -60,25 +60,6 @@ You can restrict zoom percentages on mobile devices by updating the `minZoom` an } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-bookmark.md index 020e9cf150..8faf43ae50 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-bookmark.md @@ -32,22 +32,6 @@ Follow these steps to add the bookmark toggle buttons: pdfViewer.bookmarkViewModule.openBookmarkPane(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -68,23 +52,6 @@ To close the bookmark pane with a button click, reuse the same structure and cal pdfViewer.bookmarkViewModule.closeBookmarkPane(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-thumbnail.md index 184fcb2bb2..42f26fd612 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/open-thumbnail.md @@ -35,23 +35,6 @@ The following steps explain how to open the thumbnail pane. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/overlapped-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/overlapped-annotation.md index 79941b2de4..78d7fd3444 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/overlapped-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/overlapped-annotation.md @@ -27,18 +27,5 @@ Here is an example of how you can use the **annotationSelect** event to get the } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").AnnotationSelect("annotationSelected").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/pagerenderstarted-pagerendercompleted.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/pagerenderstarted-pagerendercompleted.md index d0c00e87c5..20ef1e00dd 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/pagerenderstarted-pagerendercompleted.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/pagerenderstarted-pagerendercompleted.md @@ -45,31 +45,6 @@ function pageRenderComplete(args) { }; -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@{ - ViewBag.Title = "Home Page"; -} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").PageRenderInitiate("pageRenderInitiate").PageRenderComplete("pageRenderComplete").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/print-document.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/print-document.md index c6a31cb681..1ad06c1e21 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/print-document.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/print-document.md @@ -34,21 +34,5 @@ The following steps are used to print the PDF document programmatically. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/restricting-zoom-in-mobile-mode.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/restricting-zoom-in-mobile-mode.md index 600e11d7cc..f47d524853 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/restricting-zoom-in-mobile-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/restricting-zoom-in-mobile-mode.md @@ -32,25 +32,6 @@ The Syncfusion® ASP.NET MVC PDF Viewer allo } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentLoad("documentLoad").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/select-multi-page-annotations.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/select-multi-page-annotations.md index 3897bed35d..a0c92def2e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/select-multi-page-annotations.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/select-multi-page-annotations.md @@ -21,12 +21,5 @@ Here is an example of how you can use the [**EnableMultiPageAnnotation**](https: @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableMultiPageAnnotation(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableMultiPageAnnotation(true).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-bookmark.md index a04536325d..4f6c20395c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-bookmark.md @@ -27,12 +27,5 @@ Follow these steps to show the bookmark pane: @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableBookmark(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableBookmark(true).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-hide-annotation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-hide-annotation.md index a854f450e9..7b06636db5 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-hide-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-hide-annotation.md @@ -63,6 +63,6 @@ Follow these steps to add annotation toggle controls: {% endhighlight %} {% endtabs %} -The `exportAnnotationsAsObject` method returns a promise whose resolved value stores the serialized annotations; persist this object securely if it contains sensitive content. The `resourceUrl` must reference a PDF Viewer build that matches your application version, and similar logic can be applied in server-backed samples by replacing the `resourceUrl` with `serviceUrl`. +The `exportAnnotationsAsObject` method returns a promise whose resolved value stores the serialized annotations; persist this object securely if it contains sensitive content. The `resourceUrl` must reference a PDF Viewer build that matches your application version. [View sample in GitHub](https://github.com/SyncfusionExamples/mvc-pdf-viewer-examples/tree/master/How%20to) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-notification-dialog.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-notification-dialog.md index 9e5209489b..56011ced28 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-notification-dialog.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/show-notification-dialog.md @@ -28,7 +28,7 @@ Follow these steps to show the notification dialog when form fields are empty. ```cs -@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).ShowNotificationDialog(false).Render() +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/33.2.13/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").ValidateFormFields("validateFormFields").EnableFormFieldsValidation(true).ShowNotificationDialog(false).Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
-
- - @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
-
- -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@{ - ViewBag.Title = "Home Page"; -} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").SignatureUnselect("signatureUnselect").SignatureSelect("signatureSelect").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/unload-document.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/unload-document.md index 0b82c5c4aa..bccb6d3c70 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/unload-document.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/how-to/unload-document.md @@ -35,23 +35,6 @@ Follow these steps to unload a PDF document programmatically: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interaction-mode.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interaction-mode.md index 160f205304..155e3a1eb8 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interaction-mode.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interaction-mode.md @@ -25,13 +25,6 @@ In this mode, users can select and copy text in the loaded PDF document. Panning ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSelection(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Alt text](./images/selection.png) @@ -53,14 +46,6 @@ Switch the interaction mode of the PDF Viewer using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).InteractionMode(Syncfusion.EJ2.PdfViewer.InteractionMode.Pan).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ## See also diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md index 446d95f999..4792e16968 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/bookmark.md @@ -20,13 +20,6 @@ You can enable/disable bookmark navigation by using the following code snippet., ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableBookmark(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Alt text](../images/bookmark.png) @@ -51,22 +44,6 @@ Here is an example of how to use the **goToBookmark** method: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md index 847f93bea0..0841e71b6b 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/hyperlink.md @@ -49,13 +49,6 @@ The following example demonstrates how to disable hyperlink navigation: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} > Note: Disabling hyperlinks only affects the viewer's behavior and does not alter the original PDF document. @@ -79,13 +72,6 @@ The following example configures hyperlinks to open in a new tab: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ### Handling Hyperlink Events @@ -131,28 +117,6 @@ The following example demonstrates how to use these events: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").HyperlinkClick("hyperlinkClicked").HyperlinkMouseOver("hyperlinkMouseOver").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md index d1f8492931..04d1db38a9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page-thumbnail.md @@ -20,13 +20,6 @@ You can enable/disable thumbnail navigation by using the following code snippet. ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableThumbnail(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Alt text](../images/thumbnail.png) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md index 9ecf61a8cd..34fbbb3cb9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/interactive-pdf-navigation/page.md @@ -31,13 +31,6 @@ You can enable/disable page navigation option in PDF Viewer using the following ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableNavigation(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Alt text](../images/navigation.png) @@ -80,42 +73,6 @@ Also, you can programmatically perform page navigation options as follows. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - - - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/magnification.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/magnification.md index aeac06b16e..f2d7a6da2f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/magnification.md @@ -23,13 +23,6 @@ The following example shows how to enable magnification in the PDF Viewer. ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableMagnification(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} The following magnification options are available in the default toolbar of the PDF Viewer: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/mobile-toolbar.md index 4de4038aa5..8585408b88 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/mobile-toolbar.md @@ -64,13 +64,6 @@ Enable the desktop toolbar on mobile devices using the `enableDesktopMode` API. @Html.EJS().PdfViewer("pdfviewer").EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} @@ -85,13 +78,6 @@ To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, @Html.EJS().PdfViewer("pdfviewer").EnableDesktopMode(true).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnableDesktopMode(true).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/navigation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/navigation.md index 23f6ccab2e..deaad9d950 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/navigation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/navigation.md @@ -32,13 +32,6 @@ Enable or disable page navigation using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableNavigation(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} @@ -57,13 +50,6 @@ Enable or disable bookmark navigation using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableBookmark(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Bookmark panel in the PDF Viewer](./images/bookmark.png) @@ -81,13 +67,6 @@ Enable or disable thumbnail navigation using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableThumbnail(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Thumbnail panel in the PDF Viewer](./images/thumbnail.png) @@ -112,13 +91,6 @@ Enable or disable hyperlink navigation using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableHyperlink(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} Change the hyperlink open state using the following example: @@ -131,13 +103,6 @@ Change the hyperlink open state using the following example: ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).HyperlinkOpenState(Syncfusion.EJ2.PdfViewer.LinkTarget.NewTab).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Table of contents panel in the PDF Viewer](./images/toc.png) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file.md index 91cf250087..b55624800e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file.md @@ -41,27 +41,6 @@ Follow these steps to load a PDF from Base64 data: } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html - -
-
- - @Html.EJS().PdfViewer("pdfViewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).Render() -
-
- - - -``` {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md index c1a4036095..9996947aa9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-amazon-s3.md @@ -86,96 +86,4 @@ loadDocument() { N> The **AWSSDK.S3** NuGet package must be installed in your 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%20Standalone). - -## Using the server-backed PDF Viewer - -Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer. - -**Step 1:** Create AWS S3 account - - Set up an AWS S3 account by following the instructions on the official AWS site: [AWS Management Console](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html). Create an S3 bucket and generate access keys while ensuring secure storage of credentials. - -**Step 2:** Create PDF Viewer Sample in ASP.NET MVC - -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started) to create a simple PDF Viewer sample in ASP.NET MVC. - -**Step 3:** Modify the `HomeController.cs` File in the Project - -1. Import the required namespaces at the top of the file. - -```csharp -using System.IO; -using Amazon; -using Amazon.S3; -using Amazon.S3.Model; -``` - -2. Modify the `Load()` method to load the PDF files from AWS S3. - -```csharp - private readonly string _accessKey = "Your Access Key from AWS S35"; - private readonly string _secretKey = "Your Secret Key from AWS S3"; - private readonly string _bucketName = "Your Bucket name from AWS S3"; - - [System.Web.Mvc.HttpPost] - public async Task Load(jsonObjects jsonObject) - { - PdfRenderer pdfviewer = new PdfRenderer(); - MemoryStream stream = new MemoryStream(); - var jsonData = JsonConverter(jsonObject); - object jsonResult = new object(); - if (jsonObject != null && jsonData.ContainsKey("document")) - { - if (bool.Parse(jsonData["isFileName"])) - { - RegionEndpoint bucketRegion = RegionEndpoint.USEast1; - - // Configure the AWS SDK with your access credentials and other settings - var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion); - - string document = jsonData["document"]; - - // Specify the document name or retrieve it from a different source - var response = await s3Client.GetObjectAsync(_bucketName, document); - - Stream responseStream = response.ResponseStream; - responseStream.CopyTo(stream); - stream.Seek(0, SeekOrigin.Begin); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonData["document"]); - stream = new MemoryStream(bytes); - - } - } - jsonResult = pdfviewer.Load(stream, jsonData); - return Content(JsonConvert.SerializeObject(jsonResult)); - } - -``` - -N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name - -**Step 4:** Configure the PDF Viewer component - -Set the `documentPath` property of the PDF Viewer to the PDF file name to load from AWS S3. Ensure the document name matches an object in your bucket. - -```csharp - -@{ - ViewBag.Title = "Home Page"; -} - -
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("PDF_Succinctly.pdf").Render() -
-
- -``` - -N> The **AWSSDK.S3** NuGet package must be installed in your 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 +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md index 9e060bcbb9..d6076ae858 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/open-pdf-file/from-azure-blob-storage.md @@ -95,93 +95,4 @@ function blobToBase64(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 the server-backed PDF Viewer - -Follow these steps to load a PDF from Azure Blob Storage using the server-backed PDF Viewer. - -**Step 1:** Create the Azure Blob Storage account - -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). - -**Step 2:** Create PDF Viewer Sample in ASP.NET MVC - -Follow instructions provided in the Syncfusion® PDF Viewer Getting Started [Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC. - -**Step 3:** Modify the `HomeController.cs` File in the Project - -1. Import the required namespaces at the top of the file. - -```csharp -using System.IO; -using Azure.Storage.Blobs; -using Azure.Storage.Blobs.Specialized; -``` - -2. Modify the `Load()` method to load the PDF files from Azure Blob Storage. - -```csharp - -private readonly string _connectionString = "Your Connection string from Azure"; -private readonly string _containerName = "Your container name in Azure"; - -public ActionResult Load(jsonObjects jsonObject) -{ - PdfRenderer pdfviewer = new PdfRenderer(); - MemoryStream stream = new MemoryStream(); - var jsonData = JsonConverter(jsonObject); - object jsonResult = new object(); - if (jsonObject != null && jsonData.ContainsKey("document")) - { - if (bool.Parse(jsonData["isFileName"])) - { - - // Create a BlobServiceClient object by passing the connection string. - BlobServiceClient blobServiceClient = new BlobServiceClient(_connectionString); - - // Get a reference to the container - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_containerName); - - string fileName = jsonData["document"]; - // Get a reference to the block blob - BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName); - - blockBlobClient.DownloadTo(stream); - } - else - { - byte[] bytes = Convert.FromBase64String(jsonData["document"]); - stream = new MemoryStream(bytes); - - } - } - jsonResult = pdfviewer.Load(stream, jsonData); - return Content(JsonConvert.SerializeObject(jsonResult)); -} - -``` - -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 - -**Step 4:** Configure the PDF Viewer component - -Set the `documentPath` property of the PDF Viewer to the PDF file name to load from Azure Blob Storage. Ensure the document name exists in your Azure container. - -```csharp - -@{ - ViewBag.Title = "Home Page"; -} - -
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("PDF_Succinctly.pdf").Render() -
-
- -``` - -N> The **Azure.Storage.Blobs** NuGet package must be installed in your 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 +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md index dd91c74ac3..1375c8051f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/events.md @@ -37,20 +37,6 @@ The event arguments provide the necessary information about the save event: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSaveAs("pageOrganizerSaveAs").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -80,20 +66,6 @@ Event arguments: } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).PageOrganizerZoomChanged("pageOrganizerZoomChanged").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md index a18f4b5463..5f197734e2 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/programmatic-support.md @@ -22,13 +22,6 @@ The page organizer feature can be enabled or disabled using the `enablePageOrgan @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePageOrganizer(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePageOrganizer(true).Render() -
- {% endhighlight %} {% endtabs %} @@ -43,13 +36,6 @@ You can control whether the page organizer dialog opens automatically when a doc @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").IsPageOrganizerOpen(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").IsPageOrganizerOpen(true).Render() -
- {% endhighlight %} {% endtabs %} @@ -64,13 +50,6 @@ The `pageOrganizerSettings` API allows you to customize the page management func @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false, CanInsert = false, CanRotate = false, canCopy = false, canRearrange = false, canImport = false, imageZoom = 1, showImageZoomingSlider = true, imageZoomMin = 1, imageZoomMax = 5 }).Render() -
- {% endhighlight %} {% endtabs %} @@ -93,21 +72,6 @@ The `openPageOrganizer` method programmatically opens the page organizer dialog, } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -130,20 +94,5 @@ The `closePageOrganizer` method programmatically closes the page organizer dialo } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md index 4aa0cf93ab..bd788e1cfa 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/toolbar.md @@ -23,13 +23,6 @@ The `canInsert` property controls the visibility of the insert tool. When set to @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanInsert = false }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanInsert = false }).Render() -
- {% endhighlight %} {% endtabs %} @@ -44,13 +37,6 @@ The `canDelete` property controls the visibility of the delete tool. When set to @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanDelete = false }).Render() -
- {% endhighlight %} {% endtabs %} @@ -65,13 +51,6 @@ The `canRotate` property controls the visibility of the rotate tool. When set to @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRotate = false }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new { CanRotate = false }).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pdf.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pdf.md index 18ac8b6317..87838498d7 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pdf.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pdf.md @@ -102,13 +102,6 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d @Html.EJS().PdfViewer("pdfviewer").EnablePageOrganizer(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).EnablePageOrganizer(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} @@ -121,13 +114,6 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d @Html.EJS().PdfViewer("pdfviewer").IsPageOrganizerOpen(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).IsPageOrganizerOpen(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} @@ -140,13 +126,6 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render() -
- {% endhighlight %} {% endtabs %} @@ -186,41 +165,6 @@ export class AppComponent implements OnInit { } } -{% endhighlight %} -{% highlight ts tabtitle="Server-Backed" %} - - import { Component, OnInit } from '@angular/core'; -import { LinkAnnotationService, BookmarkViewService, - MagnificationService, ThumbnailViewService, ToolbarService, - NavigationService, TextSearchService, TextSelectionService, - PrintService, FormDesignerService, FormFieldsService, - AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; - -@Component({ - selector: 'app-root', - // specifies the template string for the PDF Viewer component - template: `
- - - -
`, - providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService, - ThumbnailViewService, ToolbarService, NavigationService, - TextSearchService, TextSelectionService, PrintService, - AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService] -}) -export class AppComponent implements OnInit { - public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; - public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'; - public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }; - ngOnInit(): void { - } -} {% endhighlight %} {% endtabs %} @@ -241,23 +185,6 @@ export class AppComponent implements OnInit { pdfViewer.pageOrganizer.openPageOrganizer(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -278,23 +205,6 @@ export class AppComponent implements OnInit { pdfViewer.pageOrganizer.closePageOrganizer(); } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/print.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/print.md index b40a657186..ef2ea12a5a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/print.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/print.md @@ -20,13 +20,6 @@ The PDF Viewer supports printing the loaded PDF file. Enable or disable printing ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ![Print dialog in the PDF Viewer](./images/print.png) @@ -40,20 +33,6 @@ You can also invoke the print action programmatically using the following exampl @Html.EJS().PdfViewer("pdfviewer").EnablePrint(true).DocumentLoad("print").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() - -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrint(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render().PrintScaleFactor(0.5) -
- - - ``` {% endhighlight %} {% endtabs %} @@ -119,15 +82,6 @@ The `EnablePrintRotation` property controls whether landscape pages are auto-rot @Html.EJS().PdfViewer("pdfviewer").EnablePrintRotation(true).DocumentLoad("print").DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrintRotation(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- ``` {% endhighlight %} {% endtabs %} @@ -148,15 +102,6 @@ The supported values are: @Html.EJS().PdfViewer("pdfviewer").EnablePrintRotation(true).DocumentLoad("print").PrintMode(Syncfusion.EJ2.PdfViewer.PrintMode.Default).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnablePrintRotation(true).PrintMode(Syncfusion.EJ2.PdfViewer.PrintMode.Default).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- ``` {% endhighlight %} {% endtabs %} @@ -193,21 +138,6 @@ The following example illustrates how to handle the `printStart` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePrint(true).PrintStart("printStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -232,19 +162,6 @@ The following example illustrates how to handle the `printEnd` event. } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnablePrint(true).PrintEnd("printEnded").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-azure-blob-storage.md index db1f9344c6..399721e53c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-azure-blob-storage.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/save-pdf-file/to-azure-blob-storage.md @@ -163,91 +163,4 @@ function arrayBufferToBase64(buffer) { N> Install the **Azure.Storage.Blobs** NuGet package in the 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%20Standalone). - -## Using server-backed PDF Viewer - -To save a PDF file to Azure Blob Storage, follow these steps: - -**Step 1:** Create the Azure Blob Storage account - -Log in to the Azure Portal. Create a new Storage Account with preferred settings. Note access keys during the setup. Within the Storage Account, create a Blob Container following the steps in this [link](https://learn.microsoft.com/en-us/azure/storage/common/storage-account-create?toc=%2Fazure%2Fstorage%2Fblobs%2Ftoc.json&tabs=azure-portal). - -**Step 2:** Create an ASP.NET MVC PDF Viewer sample - -Follow the instructions in this Getting Started [guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-mvc/getting-started-with-server-backed) to create a simple PDF Viewer sample in ASP.NET MVC. - -**Step 3:** Modify the `HomeController.cs` file in the project - -1. Import the required namespaces at the top of the file: - -```csharp -using System.IO; -using Azure.Storage.Blobs; -using Azure.Storage.Blobs.Specialized; -``` - -2. Modify the `Download()` method to save the downloaded PDF files to the Azure Blob Storage container. - -```csharp - -private readonly string _connectionString = "Your Connection string from Azure"; -private readonly string _containerName = "Your container name in Azure"; - -public ActionResult Download(jsonObjects jsonObject) -{ - PdfRenderer pdfviewer = new PdfRenderer(); - var jsonData = JsonConverter(jsonObject); - - string documentBase = pdfviewer.GetDocumentAsBase64(jsonData); - - string document = jsonData["documentId"]; - - // Create a BlobServiceClient object by passing the connection string. - BlobServiceClient blobServiceClient = new BlobServiceClient(_connectionString); - - // Get a reference to the container - BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_containerName); - - string result = Path.GetFileNameWithoutExtension(document); - // Get a reference to the blob - BlobClient blobClient = containerClient.GetBlobClient(result + "_download.pdf"); - - // Convert the document base64 string to bytes - byte[] bytes = Convert.FromBase64String(documentBase.Split(',')[1]); - - - // Upload the document to Azure Blob Storage - using (MemoryStream stream = new MemoryStream(bytes)) - { - blobClient.Upload(stream, true); - } - return Content(documentBase); -} - - -``` - -N> Replace the placeholders with the actual Azure Storage connection string and container name. - -**Step 3:** Set the PDF Viewer properties in the ASP.NET MVC PDF Viewer component - -Set the `documentPath` property of the PDF Viewer component to the desired PDF file name that you wish to load from Azure Blob Storage. Ensure that the document exists in the target container. - -```csharp - -@{ - ViewBag.Title = "Home Page"; -} - -
-
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("PDF_Succinctly.pdf").Render() -
-
- -``` - -N> Install the **Azure.Storage.Blobs** NuGet package in the 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). +[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). \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-search.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-search.md index 2ff183a0fb..c3ff0ff82b 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-search.md @@ -19,12 +19,6 @@ The Text Search option in PDF Viewer is used to find and highlight the text cont @Html.EJS().PdfViewer("pdfviewer").EnableTextSearch(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() {% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSearch(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-{% endhighlight %} {% endtabs %} ![Alt text](./images/search.png) @@ -88,21 +82,6 @@ To perform a case-sensitive search, set the `isMatchCase` parameter to `true`. T } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSearch(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -125,21 +104,6 @@ You can search for whole words by setting the `isMatchWholeWord` parameter to `t } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSearch(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -175,21 +139,6 @@ Searches for the specified text within the document and returns the bounding rec } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -211,21 +160,6 @@ Searches for the specified text within the document and returns the bounding rec } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -247,21 +181,6 @@ Searches for an array of strings within the document and returns the bounding re } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -283,21 +202,6 @@ Searches for an array of strings within the document and returns the bounding re } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -333,21 +237,6 @@ The [textSearchStart](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchStart("textSearchStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -377,20 +266,6 @@ The [textSearchHighlight](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusio } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchHighlight("textSearchHighlighted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -424,20 +299,6 @@ The [textSearchComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSearchComplete("textSearchCompleted").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-selection.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-selection.md index 7db2eae51e..c9afc654b9 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-selection.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/text-selection.md @@ -23,13 +23,6 @@ Use the enableTextSelection property to enable or disable selecting text in the @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableTextSelection(true).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").EnableTextSelection(true).Render() -
- {% endhighlight %} {% endtabs %} @@ -55,20 +48,6 @@ The textSelectionStart event triggers when selection is initiated. Typical use c } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSelectionStart("textSelectionStarted").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -90,20 +69,6 @@ The textSelectionEnd event triggers when selection is completed. It is useful to } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").TextSelectionEnd("textSelectionEnded").Render() -
- - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/annotation-toolbar.md index 19dc5c9f89..688281c0ce 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/annotation-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/annotation-toolbar.md @@ -34,21 +34,6 @@ The following code snippet explains how to show or hide the annotation toolbar u } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -69,12 +54,5 @@ The following example demonstrates how to customize the annotation toolbar by sp @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, AnnotationToolbarItems = "HighlightTool UnderlineTool StrikethroughTool ColorEditTool OpacityEditTool AnnotationDeleteTool StampAnnotationTool HandWrittenSignatureTool InkAnnotationTool ShapeTool CalibrateTool StrokeColorEditTool ThicknessEditTool" }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, AnnotationToolbarItems = "HighlightTool UnderlineTool StrikethroughTool ColorEditTool OpacityEditTool AnnotationDeleteTool StampAnnotationTool HandWrittenSignatureTool InkAnnotationTool ShapeTool CalibrateTool StrokeColorEditTool ThicknessEditTool" }).Render() -
- {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/custom-toolbar.md index afbf4110ce..fdc184073e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/custom-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/custom-toolbar.md @@ -42,16 +42,6 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-download-document- .DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -@Html.EJS().PdfViewer("pdfviewer") -.ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")) -.EnableToolbar(false).EnableThumbnail(false) -.DocumentLoad("documentLoaded").PageChange("pageChanged") -.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} {% endtabs %} **Step 4:** Add the following styles to achieve the custom toolbar styling: diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar.md index 171acee4cf..9b294d8448 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/form-designer-toolbar.md @@ -28,13 +28,6 @@ The following code snippet explains how to show or hide the toolbar using the `E ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableFormDesigner(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ## How to customize the form designer toolbar @@ -52,12 +45,5 @@ The following example demonstrates how to customize the form designer toolbar by @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, FormDesignerToolbarItems = "TextboxTool PasswordTool CheckBoxTool RadioButtonTool DropdownTool ListboxTool DrawSignatureTool DeleteTool" }).Render() -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings { ShowTooltip = true, FormDesignerToolbarItems = "TextboxTool PasswordTool CheckBoxTool RadioButtonTool DropdownTool ListboxTool DrawSignatureTool DeleteTool" }).Render() -
- {% endhighlight %} {% endtabs %} \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md index b14e79096c..ee823dbf9f 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/mobile-toolbar.md @@ -63,13 +63,6 @@ The desktop version of the toolbar can be enabled on mobile devices by using the ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableDesktopMode(true).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ## Enable Scrolling in Desktop Mode with Touch Gestures @@ -84,13 +77,6 @@ To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableTextSelection(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} ## Print Option Not Available diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar.md index 98dd9631e6..51874766b6 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar-customization/primary-toolbar.md @@ -25,12 +25,6 @@ Show or hide the toolbar using the `enableToolbar` property: @Html.EJS().PdfViewer("pdfviewer").EnableToolbar(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableToolbar(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- {% endhighlight %} {% endtabs %} @@ -50,20 +44,6 @@ The following code snippet explains how to show or hide the toolbar using the `s } -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").DocumentLoad("showToolbar").Render() -
- - - {% endhighlight %} {% endtabs %} @@ -83,16 +63,6 @@ The PDF Viewer has an option to show or hide these grouped items in the built-in ``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings{ ShowTooltip = true, ToolbarItem = "OpenOption" ).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` - {% endhighlight %} {% endtabs %} @@ -115,22 +85,6 @@ The PDF Viewer has an option to show or hide these grouped items in the built-in ``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- -``` - {% endhighlight %} {% endtabs %} @@ -212,45 +166,6 @@ The PDF Viewer allows you to customize (add, show, hide, enable, and disable) ex } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@{ - ViewBag.Title = "Home Page"; -} -@using Syncfusion.EJ2.PdfViewer -@using ToolbarCustomization.Controllers -@{ - var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; - CustomToolbarItems customToolbarItems = new CustomToolbarItems(); - customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; - PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() - { - ShowTooltip = true, - ToolbarItems = customToolbarItems.ToolbarItems - }; -} -
-
-

- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ToolbarClick("toolbarClick").ToolbarSettings(toolbarSettings).Render() -
-
- - - - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md index 3e469f765f..d055f326c0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/toolbar.md @@ -50,13 +50,6 @@ The PDF Viewer has an option to show or hide the complete built-in toolbar. You ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} -```html -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableToolbar(false).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
-``` -{% endhighlight %} {% endtabs %} * **Show/Hide toolbar using showToolbar as in the following code snippet.** @@ -94,22 +87,6 @@ The PDF Viewer has an option to show or hide these grouped items in the built-in ``` -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).EnableToolbar(false).ToolbarSettings(new Syncfusion.EJ2.PdfViewer.PdfViewerToolbarSettings{ ShowTooltip = true, ToolbarItem = "OpenOption" ).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- -``` - {% endhighlight %} {% endtabs %} @@ -191,54 +168,6 @@ PDF Viewer allows you to customize(add, show, hide, enable, and disable) existin } -{% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -@{ - ViewBag.Title = "Home Page"; -} -@using Syncfusion.EJ2.PdfViewer -@using ToolbarCustomization.Controllers -@{ - var toolItem1 = new { id = "submit_form", text = "Submit Form", tooltipText = "Custom toolbar item", align = "Center", cssClass = "custom_button" }; - CustomToolbarItems customToolbarItems = new CustomToolbarItems(); - customToolbarItems.ToolbarItems = new List { toolItem1, "OpenOption", "PageNavigationTool", "MagnificationTool", "PanTool", "SelectionTool", "SearchOption", "PrintOption", "DownloadOption", "UndoRedoTool", "AnnotationEditTool", "FormDesignerEditTool", "CommentTool" }; - PdfViewerToolbarSettings toolbarSettings = new PdfViewerToolbarSettings() - { - ShowTooltip = true, - ToolbarItems = customToolbarItems.ToolbarItems - }; -} -
-
-

- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-designer.pdf").ToolbarClick("toolbarClick").Created("onLoadedPage").DocumentLoad("documentLoaded").FormFieldAdd("formFieldAdd").ToolbarSettings(toolbarSettings).Render() -
-
- - - - {% endhighlight %} {% endtabs %} @@ -309,16 +238,6 @@ new ToolbarItem { Type = ItemType.Button, PrefixIcon = "e-pv-download-document- .DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() ``` {% endhighlight %} -{% highlight html tabtitle="Server-Backed" %} - -```html -@Html.EJS().PdfViewer("pdfviewer") -.ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")) -.EnableToolbar(false).EnableThumbnail(false) -.DocumentLoad("documentLoaded").PageChange("pageChanged") -.DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -``` -{% endhighlight %} {% endtabs %} **Step 4:** Add EJ2 Toolbar for perform magnification actions in PDF Viewer using following code snippet, diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md index 5cbf5b8e3e..4d7d7a98ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/troubleshooting/document-loading-issues.md @@ -23,7 +23,7 @@ If the document does not render in the viewer when using version 23.1 or newer, -{% endhighlight %} -{% highlight cshtml tabtitle="Server-Backed" %} - - - -
- @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/api/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf").Render() -
- - - {% endhighlight %} {% endtabs %}