- `,
- imports: [PdfViewerModule],
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- LinkAnnotationService,
- ThumbnailViewService,
- BookmarkViewService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PageOrganizerService
- ]
-})
-export class AppComponent {
-
- @ViewChild('pdfViewer')
- public pdfViewer!: PdfViewerComponent;
-
- public document: string =
- 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- public serviceUrl: string = 'YOUR_SERVICE_URL';
-
- public editComment(): void {
- const viewer = this.pdfViewer;
- if (!viewer) return;
- const annot = viewer.annotationCollection?.[0];
- if (annot) {
- annot.commentType = 'edit';
- annot.note = 'Edited Comment';
- viewer.annotation.editAnnotation(annot);
- console.log(viewer.annotationCollection?.[0]);
- }
- }
-
- public editReply(): void {
- const viewer = this.pdfViewer;
- if (!viewer) return;
- const annot = viewer.annotationCollection?.[0];
- if (annot) {
- annot.commentType = 'edit';
- annot.replyComment = ['Edited Reply Comment'];
- viewer.annotation.editAnnotation(annot);
- console.log(viewer.annotationCollection?.[0]);
- }
- }
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md
deleted file mode 100644
index b2855aa7d8..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md
+++ /dev/null
@@ -1,542 +0,0 @@
----
-layout: post
-title: Free text annotation in Angular PDF Viewer component | Syncfusion
-description: Learn about free text annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-platform: document-processing
-control: Free text annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Free text annotation in Angular PDF Viewer control
-
-The PDF Viewer control supports adding, editing, and deleting free text annotations. This article explains how to add free text annotations using the toolbar and programmatically, modify their properties, and manage selection and focus.
-
-## 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-selection mode.
-
-
-
-The following example switches to free text annotation mode using a button click.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- pdfviewer.annotation.addAnnotation("FreeText", {
- offset: { x: 100, y: 150 },
- fontSize: 16,
- fontFamily: "Helvetica",
- pageNumber: 1,
- width: 200,
- height: 40,
- isLock: false,
- textAlignment : 'Center',
- borderStyle : 'solid',
- borderWidth : 2,
- borderColor : 'red',
- fillColor : 'blue',
- fontColor: 'white',
- defaultText: "Syncfusion"
- } as FreeTextSettings);
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Edit free text annotation properties
-
-Free text annotation properties that can be modified using the annotation toolbar include font family, font size, font styles, font color, text alignment, fill color, stroke color, border thickness, and opacity. The toolbar provides dedicated controls for each of these settings.
-
-### Font family
-
-Choose a font family from the Font Family tool to update the annotation text.
-
-
-
-### Font size
-
-Choose a size from the Font Size tool to update the annotation text size.
-
-
-
-### Font color
-
-Select a color from the Font Color palette to change the font color.
-
-
-
-### Text alignment
-
-Use the Text Align tool to set the annotation text alignment.
-
-
-
-### Font styles
-
-Enable bold, italic, or underline using the Font Style tool.
-
-
-
-### Fill color
-
-Set the annotation background using the Edit Color tool.
-
-
-
-### Stroke color
-
-Set the annotation border color using the Edit Stroke Color tool.
-
-
-
-### Thickness
-
-Adjust border thickness with the Edit Thickness slider.
-
-
-
-### Opacity
-
-Adjust annotation opacity with the Edit Opacity slider.
-
-
-
-## Move free text annotation programmatically
-
-Move a free text annotation programmatically by updating its `bounds` and calling `editAnnotation()` on the annotation module.
-
-```html
-
-```
-
-```typescript
-
- moveFreeText() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- for (let i = 0; i < viewer.annotationCollection.length; i++)
- {
- if (viewer.annotationCollection[i].subject === "Text Box") {
- var width = viewer.annotationCollection[i].bounds.width;
- var height = viewer.annotationCollection[i].bounds.height;
- viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: height };
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- }
- }
-
-```
-
-Find the sample: how to move the free text annotation programmatically (https://stackblitz.com/edit/angular-dxub1a-qjbisb?file=app.component.ts)
-
-
-## Get the ID of a newly added free text annotation
-
-Use the `annotationAdd` event to obtain the ID of a newly added free text annotation. The event handler receives an argument with the `annotationId` property for the created annotation.
-
-```typescript
-
-public annotationAddEventHandler(args) {
- if (args.annotationType === 'FreeText') {
- console.log('annotationId:' + args.annotationId);
- }
-}
-
-```
-
-Find the sample: how to get the newly added free text annotation id (https://stackblitz.com/edit/angular-dxub1a-utuefq?file=app.component.ts)
-
-
-## Change the content of an existing free text annotation programmatically
-
-Change the text content of an existing free text annotation by updating its `dynamicText` property and calling `editAnnotation()`.
-
-```html
-
-```
-
-```typescript
-
-changeContent() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- for (let i = 0; i < viewer.annotationCollection.length; i++) {
- if (viewer.annotationCollection[i].subject === 'Text Box') {
- viewer.annotationCollection[i].dynamicText = 'syncfusion';
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- }
-}
-
-```
-
-N> The PDF Viewer cannot edit existing static PDF document text. It supports adding and modifying free text annotations only.
-
-
-## Set default properties during control initialization
-
-Default free text annotation properties can be configured before initializing the control by supplying `freeTextSettings`.
-
-The example below shows how to set default free text annotation settings before the PDF Viewer is created.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, FormDesignerService, FormFieldsService,
- 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 service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public freeTextSettings = { enableAutoFit: true };
- ngOnInit(): void {
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Annotations/How%20to%20change%20the%20properties%20of%20free%20text%20annotation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md
deleted file mode 100644
index 516443c7ea..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md
+++ /dev/null
@@ -1,1001 +0,0 @@
----
-layout: post
-title: Import export annotation in Angular PDF Viewer component | Syncfusion
-description: Learn here all about Import export annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: document-processing
-control: Import export annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import and export annotations
-
-The PDF Viewer control supports importing and exporting annotations as JSON or XFDF. Use the annotation toolbar to add, edit, import, or export annotations for the loaded PDF document.
-
-Using the annotation toolbar:
-
-* Click the Add or Edit annotation button in the PDF Viewer toolbar.
-
-
-
-* In the annotation toolbar, open the Comment Panel.
-
-
-
-* In the Comment Panel, use the More Options menu to choose import or export actions.
-
-
-
-## Importing annotation to the PDF document
-
-* Click the Add or Edit annotation button in the PDF Viewer toolbar.
-* The annotation toolbar will appear.
-* Click the Comment Panel button in the annotation toolbar.
-* The comments panel will displayed.
-* Click the **More Option** button in the comment panel container.
-* Select the Import annotations from JSON file option to import annotations from a JSON file.
-
-
-
-* Select the Import annotations from XFDF file option to import annotations from an XFDF file.
-
-
-
-* Then the file explorer dialog will be opened. Choose the JSON file or the XFDF file to be imported into the loaded PDF document.
-
-
-
-## Importing annotation using PDF Viewer API
-
-You can import annotations using JSON object or JSON file in code behind like the below code snippet.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, AnnotationDataFormat
- } 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 ]
- })
- export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public service: string = 'https://localhost:44347/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- OnImportAnnotationsClick() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- pdfviewer.importAnnotation('PDF_Succinctly.xfdf', AnnotationDataFormat.xfdf);
- }
- }
-
-{% endhighlight %}
-{% endtabs %}
-
->Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_8.0) and then the angular code. Also note that, the XFDF file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
-
-## Importing Annotation Using Base64 Data
-
-You can import annotations into the Syncfusion Angular PDF Viewer by decoding Base64-encoded JSON annotation data at runtime and passing the parsed object to the importAnnotation API, as shown in the following code snippet.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-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',
- template: `
-
-
-
-
-
-
-
-
-
-
-
- `,
- // Register all necessary PDF viewer services
- providers: [
- LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, TextSelectionService, PrintService,
- AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
- ]
-})
-export class AppComponent implements OnInit {
- // URL of the sample PDF document
- public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
-
- // Syncfusion PDF viewer resource URL
- public resource: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';
-
- ngOnInit(): void {}
-
- /**
- * Triggered when a file is selected from the input.
- * Handles reading and importing the JSON annotation file.
- */
- onFileSelected(event: any): void {
- const file = event.target.files[0];
-
- // Validate that the selected file is a .json file
- if (!file || !file.name.endsWith('.json')) {
- alert('Please select a valid JSON file.');
- return;
- }
-
- const reader = new FileReader();
-
- // When file reading is done
- reader.onload = (e: any) => {
- // Extract Base64 string (after the "data:application/json;base64," part)
- const base64String = e.target.result.split(',')[1];
-
- // Decode Base64 to original JSON string
- const decodedJsonString = atob(base64String);
-
- try {
- // Parse the JSON string into a JavaScript object
- const annotationData = JSON.parse(decodedJsonString);
-
- // Get reference to the PDF viewer instance
- const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
-
- // Import the parsed annotation data into the viewer
- viewer.importAnnotation(annotationData);
- } catch (err) {
- // Handle errors (e.g., invalid JSON)
- console.error('Invalid JSON file:', err);
- alert('Failed to parse JSON.');
- }
- };
-
- // Start reading the file as a data URL (Base64 encoded)
- reader.readAsDataURL(file);
- }
-}
-
-{% 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',
- template: `
-
-
-
-
-
-
-
-
-
-
-
- `,
- // Register all necessary PDF viewer services
- providers: [
- LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, TextSelectionService, PrintService,
- AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
- ]
-})
-export class AppComponent implements OnInit {
- // URL of the sample PDF document
- public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
-
- // Syncfusion PDF viewer resource URL
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-
- ngOnInit(): void {}
-
- /**
- * Triggered when a file is selected from the input.
- * Handles reading and importing the JSON annotation file.
- */
- onFileSelected(event: any): void {
- const file = event.target.files[0];
-
- // Validate that the selected file is a .json file
- if (!file || !file.name.endsWith('.json')) {
- alert('Please select a valid JSON file.');
- return;
- }
-
- const reader = new FileReader();
-
- // When file reading is done
- reader.onload = (e: any) => {
- // Extract Base64 string (after the "data:application/json;base64," part)
- const base64String = e.target.result.split(',')[1];
-
- // Decode Base64 to original JSON string
- const decodedJsonString = atob(base64String);
-
- try {
- // Parse the JSON string into a JavaScript object
- const annotationData = JSON.parse(decodedJsonString);
-
- // Get reference to the PDF viewer instance
- const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
-
- // Import the parsed annotation data into the viewer
- viewer.importAnnotation(annotationData);
- } catch (err) {
- // Handle errors (e.g., invalid JSON)
- console.error('Invalid JSON file:', err);
- alert('Failed to parse JSON.');
- }
- };
-
- // Start reading the file as a data URL (Base64 encoded)
- reader.readAsDataURL(file);
- }
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Exporting annotation from the PDF document
-
-The PDF Viewer control provides the support to export the annotations as JSON file or JSON object and XFDF file using annotation toolbar.
-
-* Click the Add or Edit annotation button in the PDF Viewer toolbar.
-* The annotation toolbar will appear.
-* Click the Comment Panel button in the annotation toolbar.
-* The comments panel will displayed.
-* Click the **More Option** button in the comment panel container.
-* Select the Export annotation to JSON file option to export annotations to a JSON file.
-
-
-
-* Select the Export annotation to XFDF file option to export annotations to an XFDF file.
-
-
-
->Export annotations will be in the disabled state when the loaded PDF document does not contain any annotations.
-
-## Exporting annotation using PDF Viewer API
-
-You can export annotations as JSON file in code behind like the following code snippet.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent,LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, AnnotationDataFormat
- } 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]
- })
- export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public exportAnnotationFileName: string = 'ExportedAnnotations.json';
- OnExportAnnotationsClick() {
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- pdfviewer.exportAnnotation(AnnotationDataFormat.Json);
- }
- }
-
-{% endhighlight %}
-{% endtabs %}
-
-Refer to the following code snippet to export annotations as XFDF file.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, AnnotationDataFormat
- } 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]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public exportAnnotationFileName: string = 'ExportedAnnotations.xfdf';
- OnExportAnnotationsClick() {
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- pdfviewer.exportAnnotation(AnnotationDataFormat.Xfdf);
- }
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-
-import { ViewChild } from '@angular/core';
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, AnnotationDataFormat
- } 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]
-})
-export class AppComponent implements OnInit {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent;
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public exportAnnotationFileName: string = 'ExportedAnnotations.xfdf';
- OnExportAnnotationsClick() {
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- pdfviewer.exportAnnotation(AnnotationDataFormat.Xfdf);
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md
deleted file mode 100644
index 8613935eb9..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md
+++ /dev/null
@@ -1,403 +0,0 @@
----
-layout: post
-title: Ink annotation in Angular PDF Viewer component | Syncfusion
-description: Learn about ink annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-platform: document-processing
-control: Ink annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ink annotation in Angular PDF Viewer component
-
-The PDF Viewer control provides options to add, edit, and delete ink annotations.
-
-
-
-## 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
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, 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]
- })
- export class AppComponent implements OnInit {
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public inkAnnotationSettings = { author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6 }
- ngOnInit(): void {
- }
- }
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md
deleted file mode 100644
index d1e19edc52..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md
+++ /dev/null
@@ -1,722 +0,0 @@
----
-layout: post
-title: Measurement annotation in Angular PDF Viewer control | Syncfusion
-description: Learn about measurement annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume.
-platform: document-processing
-control: Measurement annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Measurement Annotation in Angular PDF Viewer component
-
-The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
-
-* Distance
-* Perimeter
-* Area
-* Radius
-* Volume
-
-
-
-## Adding measurement annotations to the PDF document
-
-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 the viewer is in pan mode, selecting a measurement annotation switches it to text selection mode.
-
-
-
-The following example switches to distance annotation mode.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-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';
- ngOnInit(): void {
- }
-
- editDistanceAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
-
- editPerimeterAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
-
- editAreaAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
-
- editRadiusAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
- editVolumeAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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.
-
-
-
-### Edit stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Edit thickness
-
-Edit border thickness using the range slider provided in the Edit Thickness tool.
-
-
-
-### Edit opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-### Editing 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.
-
-
-
-## 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`.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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 distanceSettings = { fillColor: 'blue', opacity: 0.6, strokeColor: 'green' };
- public perimeterSettings = { fillColor: 'green', opacity: 0.6, strokeColor: 'blue' };
- public areaSettings = { fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange' };
- public radiusSettings = { fillColor: 'orange', opacity: 0.6, strokeColor: 'pink' };
- public volumeSettings = { fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow' };
- ngOnInit(): void {
- }
-}
-{% 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.
-
-
-
-The PDF Viewer supports the following measurement units:
-
-* Inch
-* Millimeter
-* Centimeter
-* Point
-* Pica
-* Feet
-
-
-
-## 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 { 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 measurementSettings = { scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm' };
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
-{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md
deleted file mode 100644
index 555ea47f12..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md
+++ /dev/null
@@ -1,607 +0,0 @@
----
-layout: post
-title: Shape annotation in Angular PDF Viewer control | Syncfusion
-description: Learn about shape annotations in the Syncfusion Angular PDF Viewer (Essential JS 2), including add, edit, delete, and default settings.
-platform: document-processing
-control: Shape annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Shape Annotation in Angular PDF Viewer component
-
-The PDF Viewer provides options to add, edit, and delete shape annotations. Supported shape annotation types include:
-
-* Line
-* Arrow
-* Rectangle
-* Circle
-* Polygon
-
-
-
-## Adding a shape annotation to the PDF document
-
-Shape annotations can be added to the PDF document using the annotation toolbar.
-
-* Select the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
-* Open the **Shape Annotation** drop-down to view available shape types.
-* Select a shape type to enable its annotation mode, then draw the shape on the page.
-
-N> When the PDF Viewer is in pan mode and a shape annotation tool is selected, the viewer automatically switches to text select mode to ensure a smooth interaction experience.
-
-
-
-Use the following sample to switch the viewer to circle annotation mode.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService
- } 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 resource: string = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
- ngOnInit(): void {
- }
- editLineAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
- editArrowAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
- editRectangleAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
- editCircleAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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]);
- }
- }
- }
- editPolygonAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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.
-
-
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-### Editing the line properties
-
-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.
-
-
-
-## 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 { Component, OnInit } from '@angular/core';
- import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService
- } from '@syncfusion/ej2-angular-pdfviewer';
- @Component({
- selector: 'app-root',
- // Specifies the template string for the PDF Viewer component.
- template: `
- `
-})
-export class AppComponent {
- public documentPath: string =
- 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- public serviceUrl: string =
- 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-}
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
import { Component } from '@angular/core';
import {
PdfViewerModule,
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md
deleted file mode 100644
index 0e20580543..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md
+++ /dev/null
@@ -1,465 +0,0 @@
----
-layout: post
-title: Stamp annotation in Angular PDF Viewer control | Syncfusion
-description: Learn about stamp annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps.
-platform: document-processing
-control: Stamp annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Stamp Annotation in Angular PDF Viewer component
-
-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
-
-
-
-## 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.
-
-
-
-* Select a stamp type to enable its annotation mode.
-
-
-
-* 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.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
- import { Component, OnInit } from '@angular/core';
- import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService, SignStampItem
- } 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';
- ngOnInit(): void {
- }
- editAnnotation() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- for (let i = 0; i < viewer.annotationCollection.length; i++)
- {
- if (viewer.annotationCollection[i].shapeAnnotationType === "stamp") {
- var width = viewer.annotationCollection[i].bounds.width;
- var height = viewer.annotationCollection[i].bounds.height;
- viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: height };
- viewer.annotationCollection[i].annotationSettings.isLock = true;
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- }
- }
-}
-
-{% 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.
-
-
-
-* In the file explorer dialog, choose an image and add it to the PDF page.
-
-N> Only JPG and JPEG image formats are supported for custom stamp annotations.
-
-## Setting default properties during control initialization
-
-Default properties for stamp annotations can be set before creating the control using StampSettings.
-
-After changing the default opacity using the Edit Opacity tool, the selected value is applied to subsequent stamps. The following example shows how to set default stamp annotation settings.
-
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, AnnotationService
- } 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]
- })
- export class AppComponent implements OnInit {
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public stampSettings = { opacity: 0.3, author: 'Guest User' };
- }
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md
deleted file mode 100644
index 814353baee..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md
+++ /dev/null
@@ -1,397 +0,0 @@
----
-layout: post
-title: Sticky notes in Angular PDF Viewer control | Syncfusion
-description: Learn about sticky note annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-platform: document-processing
-control: Sticky notes annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Sticky notes in Angular PDF Viewer control
-
-The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
-
-
-
-## Add a sticky note annotation to the PDF document
-
-Sticky note annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Comments** button in the PDF Viewer toolbar to open the annotation toolbar.
-* Click the position where the sticky note annotation should be added.
-* The sticky note annotation appears at the selected position.
-
-
-
-Annotation comments can be added using the comment panel.
-
-* Select a sticky note annotation in the PDF document and right-click it.
-* Choose Comment from the context menu.
-* Add comments, replies, and status using the comment panel.
-
-
-
-## 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/angular/documentation/api/pdfviewer/annotation#addannotationn) method.
-
-The following example shows how to add a sticky note annotation programmatically using `addAnnotation()`:
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService,
- AnnotationService, PageOrganizerService, StickyNotesSettings } 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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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.
-
-The following example shows how to modify an existing sticky note annotation using `editAnnotation()`:
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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 resource: string = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
- ngOnInit(): void {
- }
- editAnnotation() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- for (let i = 0; i < viewer.annotationCollection.length; i++)
- {
- if (viewer.annotationCollection[i].shapeAnnotationType === "sticky") {
- var width = viewer.annotationCollection[i].bounds.width;
- var height = viewer.annotationCollection[i].bounds.height;
- viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: height };
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- }
- }
-}
-{% 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';
- ngOnInit(): void {
- }
- editAnnotation() {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- for (let i = 0; i < viewer.annotationCollection.length; i++)
- {
- if (viewer.annotationCollection[i].shapeAnnotationType === "sticky") {
- var width = viewer.annotationCollection[i].bounds.width;
- var height = viewer.annotationCollection[i].bounds.height;
- viewer.annotationCollection[i].bounds = {x : 100, y: 100, width: width, height: height };
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the properties of the sticky note annotations
-
-### Editing opacity
-
-Edit opacity using the range slider in the Edit Opacity tool.
-
-
-
-### Editing comments
-
-Comment text, replies, and status can be edited in the comment panel.
-
-* Open the comment panel using the Comment Panel button in the annotation toolbar.
-
-
-
-Modify or delete comments or replies, and change status using the menu options in the comment panel.
-
-
-
-## Set default properties during the control initialization
-
-Default properties for sticky note annotations can be set before creating the control using `StickyNotesSettings`.
-
-After changing default opacity with the Edit Opacity tool, the selected value is applied to new sticky note annotations. The following example sets default sticky note annotation properties.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-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';
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md
deleted file mode 100644
index 6a10a98bcf..0000000000
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md
+++ /dev/null
@@ -1,1435 +0,0 @@
----
-layout: post
-title: Text markup annotation in Angular PDF Viewer | Syncfusion
-description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion Angular PDF Viewer.
-platform: document-processing
-control: Text Markup Annotation
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Text markup annotation in Angular PDF Viewer
-
-The PDF Viewer provides options to add, edit, and delete text markup annotations, including highlight, underline, strikethrough, and squiggly.
-
-
-
-## 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.
-
-
-
-
-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**.
-
-
-
-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 sample to switch to the highlight mode.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- 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.
-
-
-
-
-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**.
-
-
-
-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 sample to switch to the underline mode.
-
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- pdfviewer.annotation.addAnnotation("Underline", {
- bounds: [{ x: 250, y: 148, width: 345, height: 14 }],
- pageNumber: 2
- } as HighlightSettings);
- }
-}
-
-{% 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.
-
-
-
-
-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**.
-
-
-
-N> While in pan mode, clicking the strikethrough button switches the viewer to text select mode so text can be selected for annotation.
-
-Refer to the following code sample to switch to strikethrough mode.
-
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- pdfviewer.annotation.addAnnotation("Strikethrough", {
- bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
- pageNumber: 2
- } 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.
-
-
-
-
-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**.
-
-
-
-N> While in pan mode, clicking the squiggly button switches the viewer to text select mode so text can be selected for annotation.
-
-Refer to the following code sample to switch to squiggly mode.
-
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-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';
- ngOnInit(): void {
- }
- addAnnotation() {
- var pdfviewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- pdfviewer.annotation.addAnnotation("Squiggly", {
- bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
- pageNumber: 2
- } 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.
-
-
-
-## Edit text markup annotation properties
-
-The color and opacity of text markup annotations can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
-
-### Edit color
-
-Use the color palette in the Edit Color tool to change the annotation color.
-
-
-
-### Edit opacity
-
-Use the range slider in the Edit Opacity tool to change annotation opacity.
-
-
-
-## Set default properties during control initialization
-
-Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`.
-
-N> After editing default color and opacity with the Edit Color and Edit Opacity tools, the default values update to the selected settings.
-
-Refer to the following code sample to set the default annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-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 highlightSettings = { author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: '' };
- public underlineSettings = { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: '' };
- public strikethroughSettings = { author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: '' };
- public squigglySettings = { author: 'Guest User', subject: 'Confidential', color: '#0000ff', opacity: 0.9, modifiedDate: '' };
- ngOnInit(): void {
- }
-}
-{% 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="Standalone" %}
-
-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';
- ngOnInit(): void {
- }
- Undo() {
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- pdfviewer.undo();
- }
- Redo() {
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- pdfviewer.redo();
- }
-}
-{% 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 ts tabtitle="Standalone" %}
-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,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService]
- })
- export class AppComponent implements OnInit {
- public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- }
-
{% endhighlight %}
{% endtabs %}
+
To invoke download programmatically, use the following snippet:
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
index 49d907a7cb..74ecc17762 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
@@ -17,7 +17,7 @@ This guide shows how to import form field values into an already loaded PDF in t
2. Call [`importFormFields(data, format)`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#importformfields) where `format` is one of `FormFieldDataFormat.Fdf`, `FormFieldDataFormat.Xfdf`, or `FormFieldDataFormat.Json`. `data` may be a file path (for server/file-based imports) / base64 string or a JavaScript object mapping field names to values.
-3. Verify the form fields are populated after the import completes. For server-backed imports, ensure [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) is configured and the import file is accessible by the server.
+3. Verify the form fields are populated after the import completes.
## Example
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
index ed278ae55b..08041e64ce 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-author-name-using-annotation-settings.md
@@ -60,35 +60,4 @@ export class AppComponent {
}
```
{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-```ts
-// app.ts
-import { Component } from '@angular/core';
-import { AnnotationService, AnnotationSettingsModel, BookmarkViewService, FormFieldsService, FreeTextSettingsModel, LinkAnnotationService, MagnificationService, NavigationService, PageOrganizerService, PdfViewerModule, PrintService, TextSearchService, TextSelectionService, ThumbnailViewService, ToolbarService } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- imports: [ PdfViewerModule ],
- providers: [ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, PrintService, AnnotationService, FormFieldsService, PageOrganizerService],
- template: `
-
-
- `
-})
-export class AppComponent {
- public serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
- public docPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public annotationSettings: AnnotationSettingsModel = {
- author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, skipPrint: false, skipDownload: false
- };
- public freeTextSettings: FreeTextSettingsModel = {
- allowEditTextOnly: true
- };
-}
-```
-{% endhighlight %}
{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
index 11c1f08ba3..f594f53f3f 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/change-selection-border.md
@@ -28,19 +28,6 @@ Recommended steps
style="height:640px;display:block">
-{% endhighlight %}
-
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/configure-annotation-selector-setting.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/configure-annotation-selector-setting.md
index 98263b74c1..6f49aa5e22 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/configure-annotation-selector-setting.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/configure-annotation-selector-setting.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Configure annotation selector settings in Angular PDF Viewer | Syncfusion
+title: Configure annotation selector setting Angular PDF Viewer | Syncfusion
description: Learn how to configure annotation selector settings in the Angular PDF Viewer using annotationSelectorSettings and related options.
platform: document-processing
control: PDF Viewer
@@ -8,15 +8,15 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Configure Annotation Selector Settings
+# Configure Annotation Selector Settings in Angular
### Annotation Selector Settings
-Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettings/) property to customize the appearance and interaction behavior of the annotation selector in the Angular PDF Viewer UI.
+Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettings) property to customize the appearance and interaction behavior of the annotation selector in the Angular PDF Viewer UI.
### AnnotationSelectorSettingsModel
-The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel/) defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.
+The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel) defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.
Steps to configure annotation selector settings
@@ -87,69 +87,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,
- AnnotationService,
- TextSearchService,
- TextSelectionService,
- FormFieldsService,
- FormDesignerService,
- PrintService,
- AnnotationResizerLocation,
- CursorType
-} 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,
- AnnotationService,
- TextSearchService,
- TextSelectionService,
- FormFieldsService,
- FormDesignerService,
- PrintService]
-})
-export class AppComponent implements OnInit {
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public resource: string = 'https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib';
- public annotationSelection = {
- selectionBorderColor: 'blue',
- resizerBorderColor: 'red',
- resizerFillColor: '#4070ff',
- resizerSize: 8,
- selectionBorderThickness: 1,
- resizerShape: 'Circle',
- selectorLineDashArray: [5, 6],
- resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
- resizerCursorType: CursorType.grab
- };
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
{% endtabs %}
#### Key properties
@@ -161,7 +98,7 @@ export class AppComponent implements OnInit {
- selectionBorderThickness: Specifies the thickness of the selection border.
- resizerShape: Sets the shape of the resizer handles (for example, Circle or Square).
- selectorLineDashArray: Specifies the dash pattern for the selector line.
-- resizerLocation: Determines where the resizers appear relative to the annotation (for example, Corners or Edges).
+- resizerLocation: Determines where the resizer appear relative to the annotation (for example, Corners or Edges).
- resizerCursorType: Sets the cursor style when hovering over a resizer.
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
index 550cc565d6..caafcf67ed 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Convert PDF Library bounds to PDF Viewer bounds | Syncfusion
+title: Convert PDF Library bounds to PDF Viewer bounds Angular | Syncfusion
description: Learn how to convert PDF Library bounds into PDF Viewer bounds when exporting annotations, ensuring accurate placement in the Angular PDF Viewer.
platform: document-processing
control: PDF Viewer
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Convert PDF Library bounds to PDF Viewer bounds
+# Convert PDF Library bounds to PDF Viewer bounds in Angular
When exporting annotations from the PDF Library, convert the annotation bounds into the PDF Viewer coordinate system so exported annotations appear at the correct position and scale in the viewer.
@@ -22,7 +22,7 @@ Create an instance of the PDF Viewer and configure it with the required services
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
index 9eeb11d33e..867645bc54 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-context-menu.md
@@ -221,11 +221,6 @@ 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 below serviceUrl in the `app.ts` file
-`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
-Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
-
{% previewsample "/document-processing/samples/pdfviewer/angular/custom-context-menu" %}
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/download-start-event.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/download-start-event.md
index 4e66bf9ac3..609baaaeb8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/download-start-event.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/download-start-event.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Controlling File Downloads in Angular PDF Viewer component | Syncfusion
+title: Controlling File Downloads Angular PDF Viewer component | Syncfusion
description: Learn here how to Controlling File Downloads in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: PDF Viewer
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Controlling File Downloads in Syncfusion® PDF Viewer
+# Controlling File Downloads in Angular PDF Viewer
The PDF Viewer exposes a `downloadStart` event that enables interception of a document download before it begins. Use this event to apply custom logic and, if needed, cancel the download by setting the event's `cancel` flag.
@@ -51,44 +51,6 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
}
}
-{% endhighlight %}
-
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
- MagnificationService, ThumbnailViewService, ToolbarService,
- NavigationService, TextSearchService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService,
- AnnotationService, PageOrganizerService, DownloadStartEventArgs } from '@syncfusion/ej2-angular-pdfviewer';
-@Component({
- selector: 'app-container',
- // 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 service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- ngOnInit(): void {
- }
- public downloadStart(args: DownloadStartEventArgs): void {
- // Your custom logic here
- args.cancel = true; // Prevent download action
- }
-}
-
{% endhighlight %}
{% endtabs %}
@@ -96,4 +58,4 @@ By default, the `cancel` argument is `false`, so the download proceeds unless th
### Enhanced Flexibility
-Using the [downloadStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/downloadStartEventArgs/) event enables conditional control over downloads—for example, to enforce authentication, restrict downloads for certain documents, or prompt users for confirmation. When using server-backed viewers, confirm whether server-side behavior requires additional handling; canceling the client-side event prevents the local download but may not affect server workflows.
\ No newline at end of file
+Using the [downloadStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/downloadStartEventArgs) event enables conditional control over downloads—for example, to enforce authentication, restrict downloads for certain documents, or prompt users for confirmation. When using server-backed viewers, confirm whether server-side behavior requires additional handling; canceling the client-side event prevents the local download but may not affect server workflows.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-disable-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-disable-annotation.md
index a1e896ea2e..0de8bfa863 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-disable-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-disable-annotation.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# How to enable and disable the delete button based on annotation selection and unselection events
+# How to enable and disable the delete button
This article demonstrates how to enable and disable a toolbar delete button in response to annotation selection and unselection events using `annotationSelect` and `annotationUnSelect`.
@@ -27,19 +27,6 @@ Example:
style="height:640px; display: block">
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-
-
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-local-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-local-storage.md
index d66566f03d..cf73aa5e1a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-local-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-local-storage.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Managing Local Storage in Syncfusion® PDF Viewer
+# Managing Local Storage in Syncfusion PDF Viewer
The Syncfusion® PDF Viewer exposes the `enableLocalStorage` property to control how session-specific viewer data is stored. Configure this property to choose between the viewer's internal storage mechanism (in-memory collection) and the browser's session storage.
@@ -41,7 +41,7 @@ import {
@@ -65,7 +65,7 @@ import {
})
export class AppComponent implements OnInit {
public document: string = 'PDF_Succinctly.pdf';
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+ public resource: string='https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
ngOnInit(): void { }
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-completed.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-completed.md
index 2386d8fc27..b055ab32e0 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-completed.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-completed.md
@@ -1,6 +1,6 @@
---
layout: post
-title: extractTextCompleted Event in Angular PDF Viewer component | Syncfusion
+title: extractTextCompleted Event Angular PDF Viewer component | Syncfusion
description: Learn here all about extractTextCompleted Event in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: extractTextCompleted
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-## Extract text using the extractTextCompleted event in the PDF Viewer
+# Extract text using the extractTextCompleted event in the PDF Viewer
The PDF Viewer can extract page text along with bounding information. Enable text extraction using the `isExtractText` property and handle the `extractTextCompleted` event to receive extracted text and bounds for the document.
@@ -20,7 +20,7 @@ The following steps are used to extract the text from the page.
```html
-
-
-
-
- `,
- providers: [
- LinkAnnotationService,
- BookmarkViewService,
- MagnificationService,
- ThumbnailViewService,
- ToolbarService,
- NavigationService,
- AnnotationService,
- TextSearchService,
- TextSelectionService,
- FormFieldsService,
- FormDesignerService,
- PrintService
- ]
-})
-export class AppComponent implements OnInit {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-
- ngOnInit(): void { }
-
- getBase64() {
- const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
- viewer.saveAsBlob().then((blobData: Blob) => {
- const reader = new FileReader();
- reader.onload = () => {
- const base64data = reader.result as string;
- console.log(base64data); // Outputs a data URL containing the Base64 string of the PDF
- };
- reader.readAsDataURL(blobData);
- });
- }
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-n-number-page.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-n-number-page.md
index 2d75718670..7d410c7e52 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-n-number-page.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-n-number-page.md
@@ -8,11 +8,11 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Load N pages initially
+# Load N pages initially in Angular
Control the number of pages the PDF Viewer renders on the initial load to improve perceived performance and reduce initial memory usage. Additional pages are rendered dynamically as the user scrolls through the document, allowing quick access to early pages without loading the entire file.
-Set the [initialRenderPages](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#initialrenderpages) property to specify how many pages to render initially. For large documents, avoid high values for `initialRenderPages` because rendering many pages at once increases memory use and may slow loading. Typical ranges of 10–20 pages work well for most documents; adjust based on document size and client capabilities.
+Set the [initialRenderPages](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#initialrenderpages) property to specify how many pages to render initially. For large documents, avoid high values for `initialRenderPages` because rendering many pages at once increases memory use and may slow loading. Typical ranges of 10–20 pages work well for most documents; adjust based on document size and client capabilities.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -46,40 +46,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,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService
- } 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,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService]
-})
-export class AppComponent implements OnInit {
- public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public initialRender = 10;
- ngOnInit(): void {
- }
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-annotation-in-a-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-annotation-in-a-document.md
index a51a77470e..4185c06d38 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-annotation-in-a-document.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-annotation-in-a-document.md
@@ -28,17 +28,6 @@ The following sample shows how to set `IsLocked` for custom stamp annotations wh
style="height:640px;display:block">
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-
-
-
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-formfield-in-a-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-formfield-in-a-document.md
index b0a2ebb343..51b8c8c9a8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-formfield-in-a-document.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/lock-formfield-in-a-document.md
@@ -151,141 +151,5 @@ export class AppComponent implements OnInit {
});
}
}
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService, PageOrganizerService,
- TextFieldSettings, RadioButtonFieldSettings, InitialFieldSettings,
- CheckBoxFieldSettings, SignatureFieldSettings, LoadEventArgs } 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 maxZoom = 270;
- public minZoom = 45;
- ngOnInit(): void {
- }
-}
-{% endhighlight %}
{% endtabs %}
#### Restrict Zoom Percentage on Mobile Devices
@@ -143,52 +107,6 @@ import {Browser} from '@syncfusion/ej2-base';
}
}
-{% endhighlight %}
-
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormFieldsService, FormDesignerService,
- PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
-import {Browser} from '@syncfusion/ej2-base';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService, FormFieldsService, FormDesignerService, PageOrganizerService]
- })
- export class AppComponent implements OnInit {
- public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- ngOnInit(): void {
- }
- documentLoaded(e: any): void {
- var viewer = (document.getElementById('pdfViewer')).ej2_instances[0];
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- viewer.maxZoom = 200;
- viewer.minZoom = 10;
- }
- else {
- viewer.zoomMode = 'Default';
- }
- }
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/pagerenderstarted-pagerendercompleted.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/pagerenderstarted-pagerendercompleted.md
index 4d58a45fb7..75ba0dd812 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/pagerenderstarted-pagerendercompleted.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/pagerenderstarted-pagerendercompleted.md
@@ -10,14 +10,14 @@ domainurl: ##DomainURL##
# Page render initiate and complete events
-In the PDF Viewer, the `pageRenderInitiate` and `pageRenderComplete` events fire during the page rendering lifecycle:
+In the PDF Viewer, the `pageRenderInitiate` and `pageRenderComplete` events fire during the page rendering life cycle:
- `pageRenderInitiate`: fired when the rendering of a page begins. Use this event to initialize resources, show loading indicators, or set up rendering parameters before the page content is drawn.
- `pageRenderComplete`: fired when the rendering of a page finishes. Use this event to hide loading indicators, record render timing, or run post-render processing.
```html
® PDF Viewer component.
+The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageRenderInitiateEventArgs) and [pageRenderComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageRenderCompleteEventArgs) events in the Syncfusion® PDF Viewer component.
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/PageRenderStarted%20and%20PageRenderCompleted%20event)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/restricting-zoom-in-mobile-mode.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/restricting-zoom-in-mobile-mode.md
index 5fcec3c4a7..f1eef2757f 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/restricting-zoom-in-mobile-mode.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/restricting-zoom-in-mobile-mode.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Restrict zoom percentage on mobile devices
+# Restrict zoom percentage on mobile devices in Angular
Use `minZoom` and `maxZoom` to restrict zoom levels on mobile devices and improve scrolling performance and perceived load time. Restricting zoom prevents extreme zoom levels that can degrade rendering performance on constrained devices.
@@ -56,52 +56,6 @@ import {Browser} from '@syncfusion/ej2-base';
}
}
-{% endhighlight %}
-
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormFieldsService, FormDesignerService,
- PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
-import {Browser} from '@syncfusion/ej2-base';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
- `,
- providers: [
- LinkAnnotationService,
- BookmarkViewService,
- MagnificationService,
- ThumbnailViewService,
- ToolbarService,
- NavigationService,
- AnnotationService,
- TextSearchService,
- TextSelectionService,
- FormFieldsService,
- FormDesignerService,
- PrintService,
- ],
-})
-export class AppComponent implements OnInit {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public serviceUrl: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
-
- public customStampSettings = {
- isAddToMenu: true,
- customStamps: [
- {
- customStampName: 'Image1',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- },
- {
- customStampName: 'Image2',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- }
- ],
- enableCustomStamp: true,
- opacity: 1,
- };
-
- ngOnInit(): void {}
-
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-pop-up-after-completion-of-export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-pop-up-after-completion-of-export-form-fields.md
index 9b440d9f6a..6685a6fc8d 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-pop-up-after-completion-of-export-form-fields.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-pop-up-after-completion-of-export-form-fields.md
@@ -19,29 +19,7 @@ Use the following example to display a notification after a successful export.
-
-
-//Method to notify popup once the form is submitted.
-public fireExportRequestSuccess() {
- var pdfViewer = (document.getElementById('pdfViewer'))
- .ej2_instances[0];
- //API to notify popup once the form is submitted.
- pdfViewer.viewerBase.openImportExportNotificationPopup(
- 'Your form information has been saved. You can resume it at any times.Form Information Saved'
- );
-}
-
-{% endhighlight %}
-
-{% highlight js tabtitle="Server-Backed" %}
-
-
-
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/signatureselect-signatureunselect.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/signatureselect-signatureunselect.md
index f133f14b84..a2c227c791 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/signatureselect-signatureunselect.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/signatureselect-signatureunselect.md
@@ -24,7 +24,7 @@ The following snippet shows how to subscribe to `signatureSelect` and `signature
```html
-
-
- `,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService]
- })
- export class AppComponent implements OnInit {
- public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- }
-
{% endhighlight %}
{% endtabs %}
@@ -113,32 +83,6 @@ You can switch the interaction mode of the PDF Viewer using the following code s
public interaction = 'Pan';
}
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- AnnotationService, TextSearchService, TextSelectionService,
- PrintService]
- })
- export class AppComponent implements OnInit {
- public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public linkOpenState = 'NewTab';
- }
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
index dea35fffa0..a4171ff95c 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
@@ -74,149 +74,4 @@ loadDocument() {
N> Install the AWS SDK package appropriate for the project. For v2 use `npm install aws-sdk`; for v3 prefer the modular packages such as `@aws-sdk/client-s3`.
-[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 Simple PDF Viewer Sample in Angular
-
-Create a basic PDF Viewer sample by following the getting started guide: [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/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()` method to load the PDF files from AWS S3.
-
-```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"]))
- {
- 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 actual values when testing. For production deployments, avoid storing AWS credentials in configuration files; use secure server-side credential management, IAM roles, or pre-signed URLs.
-
-**Step 3:** Configure the PDF Viewer component
-
-Set the serviceUrl of the PDF Viewer to your web service endpoint (replace the localhost URL with your server URL). Set the documentPath to the PDF file name to load from AWS S3. Ensure the document name matches an object in your bucket.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of your server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-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/angular/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
index 266f7907a8..579fbb5998 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
@@ -86,131 +86,4 @@ blobToBase64(blob: Blob): Promise {
}
```
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage).
-
-## 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 Simple PDF Viewer Sample in Angular
-
-Follow the getting-started guide in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic PDF Viewer sample in Angular.
-
-**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()` 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*"
-}
-```
-
-Note: Do not store secrets in source control. Use secure configuration options such as Azure Key Vault, environment variables, or a secrets manager to hold connection strings.
-
-**Step 3:** Configure the PDF Viewer component
-
-Set the serviceUrl to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from Azure Blob Storage. Ensure the document name exists in your Azure container.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of your server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-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).
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
index 634981e56f..c9cc21da81 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
@@ -63,149 +63,4 @@ private blobToBase64(blob: Blob): Promise {
N> The **npm install dropbox** package must be installed in the Angular application to use the Dropbox SDK.
-[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
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). This enables programmatic access with secure credentials.
-
-**Step 2:** Create a PDF Viewer sample in Angular
-
-Start by following the steps provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in Angular. 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. 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 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()` 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.
-
-**Step 4:** Configure the PDF Viewer component
-
-Set the serviceUrl to your web service endpoint (replace the localhost URL with your server URL). Set documentPath to the PDF file name to load from Dropbox. Ensure the document name exists in your Dropbox folder.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of your server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-N> The **Dropbox.Api** NuGet package must be installed in the web service project to use the Dropbox SDK.
-
-N> Replace `PDF_Succinctly.pdf` with the actual document name to load from Dropbox. Ensure the specified document exists in the configured Dropbox folder and is passed to the `documentPath` property of the PDF Viewer component.
-
-[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)
\ No newline at end of file
+[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/angular/organize-pages/import-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md
index aa17ab7a43..7f1fdf5556 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md
@@ -20,7 +20,7 @@ This guide explains how to import pages from another PDF into the current docume
- EJ2 Angular PDF Viewer installed
- PDF Viewer is injected with `PageOrganizer` service
-- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
+- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) (standalone)
## Steps
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md
index 91cc5ad4c4..bb9bd0b66a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md
@@ -20,7 +20,7 @@ This guide describes inserting new blank pages into a PDF using the **Organize P
- EJ2 Angular PDF Viewer installed
- `PageOrganizer` services injected into `PdfViewerComponent`
-- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
+- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) for standalone mode.
## Steps
@@ -57,7 +57,7 @@ To enable or disable the **Insert Pages** button in the page thumbnails, update
## Troubleshooting
- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
-- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
+- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) is configured for your selected processing mode.
- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
## Related topics
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
index 3bd7fdbf19..bb99741745 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
@@ -75,65 +75,6 @@ export class AppComponent implements OnInit {
ngOnInit(): void { }
}
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import {
- PdfViewerModule,
- LinkAnnotationService,
- BookmarkViewService,
- MagnificationService,
- ThumbnailViewService,
- ToolbarService,
- NavigationService,
- TextSearchService,
- TextSelectionService,
- PrintService,
- AnnotationService,
- FormFieldsService,
- FormDesignerService,
- PageOrganizerService,
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- providers: [
- LinkAnnotationService,
- BookmarkViewService,
- MagnificationService,
- ThumbnailViewService,
- ToolbarService,
- NavigationService,
- TextSearchService,
- TextSelectionService,
- PrintService,
- AnnotationService,
- FormFieldsService,
- FormDesignerService,
- PageOrganizerService,
- ],
- template: `
-
- `,
-})
-export class AppComponent implements OnInit {
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-
- ngOnInit(): void { }
-}
-
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
index 9154edd7c8..b4f233d83e 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-amazon-s3.md
@@ -116,138 +116,4 @@ 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/angular/getting-started) to create a simple PDF Viewer sample in Angular. 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 above. You can refer to this [link](https://support.syncfusion.com/kb/article/9766/how-to-create-pdf-viewer-web-service-in-net-core-31-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 `Download()` method to save the downloaded PDF files to 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 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 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 with your web service endpoint and set documentPath to the PDF file name to load from AWS S3. Ensure the document exists in the target bucket.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of your server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-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
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
index d7c1a6acb4..3a63ba0afe 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-azure-blob-storage.md
@@ -103,172 +103,4 @@ SavePdfToBlob() {
N> Install the Azure Storage Blob client package for browser use: `npm install @azure/storage-blob`.
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone).
-
-## Using Server-Backed PDF Viewer
-
-To save a PDF file to Azure Blob Storage, you can follow the steps below
-
-**Step 1:** Create a PDF Viewer sample in Angular
-
-Follow the instructions provided in this [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in Angular. 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 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 [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 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 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:** Modify the web service project to save the downloaded document to Azure Blob Storage
-
-Create a web service project in .NET Core (version 3.0 and above) by following the steps in this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above). In the controller.cs file of your web service project, add the following code to modify the `Download` method. This code saves the downloaded PDF document to Azure Blob Storage container.
-
-```c#
-using System.IO;
-using Azure.Storage.Blobs;
-using Azure.Storage.Blobs.Specialized;
-
-[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 + "_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);
-}
-```
-
-**Step 4:** Set the PDF Viewer properties in the Angular 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 { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of your server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-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/angular/save-pdf-file/to-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
index 5f3ee020ae..3e6641c201 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/save-pdf-file/to-dropbox-cloud-file-storage.md
@@ -103,140 +103,4 @@ saveDocument() {
N> Install the `dropbox` package in the Angular 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 Simple PDF Viewer Sample in Angular
-
-Follow the Syncfusion getting-started instructions for the Angular PDF Viewer: [Angular PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started). This sets up the basic PDF Viewer application structure.
-
-**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 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 `Download()` method to save the downloaded PDF files to Dropbox cloud 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 Angular PDF Viewer component
-
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Dropbox cloud file storage. Ensure that you correctly pass the document name from the files available in your dropbox folder to the documentPath property.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, FormDesignerService, FormFieldsService} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
-
-
-
`,
- providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService,
- ToolbarService, NavigationService, AnnotationService, TextSearchService,
- TextSelectionService, PrintService, FormDesignerService, FormFieldsService]
- })
- export class AppComponent implements OnInit {
- // Replace the "localhost:44396" with the actual URL of the server
- public service = 'https://localhost:44396/pdfviewer';
- public documentPath = 'PDF_Succinctly.pdf';
- }
-```
-
-N> Install the `Dropbox.Api` NuGet package in the web service application to use the previous code example.
-
-N> Replace `PDF_Succinctly.pdf` with the actual document name stored in Dropbox and pass that name to the `documentPath` property of the PDF Viewer component.
-
-[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)
\ No newline at end of file
+[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/angular/toolbar-customization/annotation-toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/annotation-toolbar.md
index c984a6b491..fbc5534b51 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/annotation-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/annotation-toolbar.md
@@ -19,7 +19,7 @@ This guide shows how to show or hide the annotation toolbar and how to choose wh
## Prerequisites
- EJ2 Angular PDF Viewer installed and added in your project. See [getting started guide](../getting-started)
-- A valid [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) for viewer assets when running locally
+- A valid [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl)
## Steps
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
index e39d07ab6e..32f9fdaafa 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/custom-toolbar.md
@@ -32,19 +32,6 @@ Create a simple PDF Viewer sample by following the [getting started](https://ej2
style="height:640px; display: block">
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-
-
-
{% endhighlight %}
{% endtabs %}
@@ -89,21 +76,6 @@ Hide the default toolbar using `enableToolbar` and `enableThumbnail` properties:
style="display: block; height: 640px;">
-{% endraw %}
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-{% raw %}
-
-
-
-
-
{% endraw %}
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/form-designer-toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/form-designer-toolbar.md
index 3460e11b06..90d20b56f4 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/form-designer-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/form-designer-toolbar.md
@@ -19,7 +19,7 @@ This guide shows how to show or hide the form designer toolbar, and how to confi
## Prerequisites
- EJ2 Angular PDF Viewer installed and added in project. See [getting started guide](../getting-started)
-- If using standalone WASM mode, provide [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#resourceurl) or a [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#serviceurl) for server mode.
+- If using standalone WASM mode, provide [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#resourceurl)
## Steps
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/mobile-toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/mobile-toolbar.md
index cba0f914b3..bf46e84ce1 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/mobile-toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar-customization/mobile-toolbar.md
@@ -17,7 +17,6 @@ This how-to explains how to enable the desktop toolbar on mobile devices running
- EJ2 Angular PDF Viewer installed and added in your Angular project.
- For standalone mode: a valid [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#resourceurl) hosting the PDF Viewer assets.
-- For server-backed mode: a working [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#serviceurl) endpoint.
## Steps
@@ -59,35 +58,6 @@ export class AppComponent {
public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}
{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-import { Component } from '@angular/core';
-import { PdfViewerModule, ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
- ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService,
- PrintService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- providers: [
- ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
- ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService,
- PrintService, PageOrganizerService
- ],
- template: `
- `
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-}
-{% endhighlight %}
{% endtabs %}
## Troubleshooting
@@ -95,7 +65,6 @@ export class AppComponent {
- Print option not visible on mobile: set [`enableDesktopMode`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enabledesktopmode) to `true`; otherwise the mobile toolbar omits Print.
- Touch scrolling is jerky after enabling desktop toolbar: set [`enableTextSelection`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enabletextselection) to `false` to avoid text-selection capturing touch events.
- Missing assets or broken UI: confirm [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#resourceurl) points to the correct version of the `ej2-pdfviewer-lib` and is reachable from the device.
-- Server errors in server-backed mode: verify [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#serviceurl) CORS configuration and that the back end is running.
## Related topics
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
index 408f3509c2..6f3a9fbf6e 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/toolbar.md
@@ -62,37 +62,6 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}
-{% endhighlight %}
-
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService
- } from '@syncfusion/ej2-angular-pdfviewer';
-@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `