From afc3c8e6eb8544c4a219e278ae53823cd5944092 Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Mon, 27 Jul 2026 16:09:58 +0530 Subject: [PATCH 1/6] Task(1043618): Revamped the UG documentation for the How-To samples in the Angular PDF Viewer platform --- .../how-to/add-annotation-in-text-search.md | 4 ++-- .../angular/how-to/add-header-value.md | 7 ++++--- .../angular/how-to/annotation-selectors.md | 7 ++++--- ...ge-author-name-using-annotation-settings.md | 12 ++++++------ .../angular/how-to/change-selection-border.md | 10 +++++----- .../configure-annotation-selector-setting.md | 4 ++-- .../PDF-Viewer/angular/how-to/conformance.md | 2 +- .../how-to/control-annotation-visibility.md | 7 +++---- ...-pdf-library-bounds-to-pdf-viewer-bounds.md | 4 ++-- ...te-a-standalone-pdf-viewer-in-angular-12.md | 6 +++--- ...lar-17-and-above-with-no-standalone-flag.md | 8 ++++---- ...-17-and-above-without-no-standalone-flag.md | 8 ++++---- .../angular/how-to/custom-context-menu.md | 6 +++--- .../how-to/custom-font-signature-field.md | 15 ++++++++------- .../PDF-Viewer/angular/how-to/custom-fonts.md | 4 ++-- .../PDF-Viewer/angular/how-to/custom-stamp.md | 8 ++++---- .../angular/how-to/delete-annotation.md | 8 +++++--- .../angular/how-to/download-start-event.md | 2 +- .../how-to/enable-disable-annotation.md | 6 +++--- .../angular/how-to/enable-local-storage.md | 2 +- .../angular/how-to/enable-text-selection.md | 4 ++-- .../angular/how-to/export-as-image.md | 4 +++- .../angular/how-to/extract-text-completed.md | 6 +++--- .../angular/how-to/extract-text-option.md | 5 ++--- .../PDF-Viewer/angular/how-to/extract-text.md | 18 +++++++++--------- 25 files changed, 86 insertions(+), 81 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-annotation-in-text-search.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-annotation-in-text-search.md index feb4880866..b9c7a1314b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-annotation-in-text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-annotation-in-text-search.md @@ -1,6 +1,6 @@ --- layout: post -title: Add Rectangle Annotation via Text Search | Syncfusion +title: Add Rectangle Annotations via Text Search | Syncfusion description: Learn to add rectangle annotations using text search bounds in the Angular PDF Viewer component, including initialization and search controls. platform: document-processing control: PDF Viewer @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Add Rectangle Annotations via Text Search in Angular PDF Viewer -A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the Angular PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps. +Learn how to add rectangle annotations at highlighted text search results in the Angular PDF Viewer by wiring a callback to the `textSearchHighlight` event. ## Steps to add rectangle annotations on search result highlight diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md index 52741bf2e0..e435f9667c 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/add-header-value.md @@ -5,16 +5,17 @@ description: Learn how to include custom headers in PDF Viewer AJAX requests usi platform: document-processing control: PDF Viewer documentation: ug +domainurl: ##DomainURL## --- # Add header values in the Angular PDF Viewer -Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#ajaxrequestsettings) to include custom headers with each AJAX request. +Use the ajaxHeaders property in the PDF Viewer's [ajaxRequestSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#ajaxrequestsettings) to include custom headers with each AJAX request. -Example: Add a custom Authorization header using `ajaxRequestSettings` in an Angular component +The following example adds a custom Authorization header using `ajaxRequestSettings` in an Angular component. {% tabs %} -{% highlight ts tabtitle="index.ts" %} +{% highlight ts tabtitle="app.component.ts" %} import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core'; import { PdfViewerComponent, diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md index 95fd439082..f67dfb3e30 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/annotation-selectors.md @@ -5,13 +5,14 @@ description: Learn how to customize annotation selectors in the Angular PDF View platform: document-processing control: PDF Viewer documentation: ug +domainurl: ##DomainURL## --- -# Customize annotation selectors in Angular PDF Viewer +# Customize Annotation Selectors in Angular PDF Viewer -Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes selection handles and resizer (for example, handle shape and size), which determine how users interact with annotations during editing. +Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes the selection handles and the resizer (for example, the shape and size of the resizer handles), which determine how users interact with annotations during editing. -The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles; ensure an annotation exists before calling `editAnnotation` to avoid runtime errors. +The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles. Ensure an annotation exists before calling `editAnnotation` to avoid runtime errors. Example: Customize the selector of a shape annotation 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..d4ed7df040 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 @@ -9,13 +9,13 @@ domainurl: ##DomainURL## --- -# Change author name using annotation settings in Angular PDF Viewer +# Change Author Name Using Annotation Settings in Angular PDF Viewer The `annotationSettings` API provides a central way to configure properties that apply to all annotations in the viewer. API name: annotationSettings -| Property Name | Data type & Default Value | Description | +| Property Name | Data type and Default Value | Description | |---|---|---| | author | String ("Guest") | Specifies the author of the annotation. | | minWidth | Number (0) | Specifies the minimum width of the annotation. | @@ -23,8 +23,8 @@ API name: annotationSettings | minHeight | Number (0) | Specifies the minimum height of the annotation. | | maxHeight | Number (0) | Specifies the maximum height of the annotation. | | isLock | Boolean (false) | Specifies whether the annotation is locked. If true, the annotation cannot be selected. | -| isPrint | Boolean (true) | Specifies whether the annotation is included in print actions. | -| isDownload | Boolean (true) | Specifies whether the annotation is included in download actions. | +| skipPrint | Boolean (true) | Specifies whether the annotation is included in print actions. | +| skipDownload | Boolean (true) | Specifies whether the annotation is included in download actions. | | Free Text Settings | | allowOnlyTextInput | Boolean (false) | Specifies text-only mode for free text annotations. If true, moving or resizing is disabled. | @@ -80,8 +80,8 @@ import { AnnotationService, AnnotationSettingsModel, BookmarkViewService, FormFi ` }) 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 serviceUrl: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; + public docPath: string = '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 }; 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..9ee23209f9 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 @@ -1,16 +1,16 @@ --- layout: post -title: Change selection border in Angular PDF Viewer component | Syncfusion -description: Learn here all about Change selection border in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Change the selection border in Angular PDF Viewer component | Syncfusion +description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component. platform: document-processing -control: Change selection border +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Customize the selection border +# Change the selection border -The PDF Viewer library allows you to customize the annotations selection borders using the [**annotationSelectorSettings**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel#annotationselectorsettingsmodel) Property. +The PDF Viewer library allows you to customize the annotations selection borders using the [**annotationSelectorSettings**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel#annotationselectorsettingsmodel) property. Recommended steps 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..ce3a82ee9f 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 @@ -18,7 +18,7 @@ Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/document 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 +Steps to configure annotation selector settings: - Step 1: Create a PDF Viewer instance and initialize it. - Step 2: Set the annotationSelectorSettings property to customize selector behavior. @@ -152,7 +152,7 @@ export class AppComponent implements OnInit { {% endhighlight %} {% endtabs %} -#### Key properties +### Key properties - selectionBorderColor: Sets the color for the border around selected annotations. - resizerBorderColor: Sets the color for the border of the resizer handles. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md index 1283206dac..3aab6a51cf 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# supported PDF conformance in Anglar PDF Viewer component +# Supported PDF Conformance in an Angular PDF Viewer Component The Angular PDF Viewer supports the following PDF/A and PDF/X conformance levels: diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md index 37cc4a74c2..3fb17cb553 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Control annotations visibility in PDF Viewer +# Control annotation visibility in PDF Viewer ## Overview @@ -16,9 +16,9 @@ This guide shows how to display annotations in the Angular PDF Viewer while prev ## Steps to control annotation visibility -**Step 1:** Follow the steps in the getting-started guide (https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic PDF Viewer sample. +**Step 1:** Follow the steps in the [getting-started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic PDF Viewer sample. -**Step 2:** Add controls for annotation modification and downloading +**Step 2:** Add controls for annotation modification and downloading. Add buttons in the component template to modify annotations and to trigger a download of the PDF. @@ -182,7 +182,6 @@ save() { {% endhighlight %} {% endtabs %} - After performing these steps, annotations remain visible in the viewer but are hidden in the downloaded PDF. [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..44a7cc9390 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 @@ -12,7 +12,7 @@ domainurl: ##DomainURL## 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. -Steps to convert bounds values +Steps to convert bounds values: **Step 1:** Initialize the PDF Viewer instance @@ -86,7 +86,7 @@ Fetch the blob data and convert it into a JSON object. } ``` -**Conclusion** +## Conclusion These steps convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON, helping maintain accurate annotation placement. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md index 7148a75892..6d8eeb9ff5 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md @@ -17,9 +17,9 @@ N> For Angular 17+, see the following links: * [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag). * [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag). -## Setup Angular Environment +## Set Up Angular Environment -You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications. +You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to set up your Angular applications. To install the latest Angular CLI globally use the following command. ```bash @@ -162,7 +162,7 @@ View the sample in GitHub to [load PDF Viewer with local resources](https://gith ## Run the application -Use the following command to run the application in browser. +Use the following command to run the application in the browser. ```javascript ng serve --open diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md index f0e05c63cb..fceb3f82a6 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag.md @@ -1,7 +1,7 @@ --- layout: post title: PDF Viewer in Angular 17+ with no-standalone | Syncfusion -description: Checkout and learn about Create a Standalone PDF Viewer in Angular 17 and above with --no-standalone flag of Syncfusion Essential JS 2 and more details. +description: Learn how to create a PDF Viewer in Angular 17 and above using the --no-standalone flag with Syncfusion Essential JS 2 and more details. platform: document-processing control: PDF Viewer documentation: ug @@ -12,9 +12,9 @@ domainurl: ##DomainURL## This article describes the steps required to create a standalone Angular PDF Viewer for Angular 17 and later using the `--no-standalone` option. -## Setup Angular Environment +## Set up Angular Environment -You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications. +You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to set up your Angular applications. To install the latest Angular CLI globally use the following command. ```bash @@ -133,7 +133,7 @@ export class AppComponent implements OnInit { Use the following command to run the application in the browser. -```javascript +```bash ng serve --open ``` diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md index 37c2fa838f..2d5331b108 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## This section explains the steps required to create a simple Standalone Angular PDF Viewer in Angular 17 and above without --no-standalone flag. -## Setup Angular Environment +## Set up Angular Environment Use the Angular CLI to create and manage Angular applications. To install the latest Angular CLI globally use the following command. @@ -50,7 +50,7 @@ On Windows, use an equivalent command or add an npm script to copy assets cross- ## Registering PDF Viewer Module and Adding PDF Viewer component -Import PDF Viewer module into Angular application from the package `@syncfusion/ej2-angular-pdfviewer` and Add the Angular PDF Viewer by using `` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component. +Import PDF Viewer module into Angular application from the package `@syncfusion/ej2-angular-pdfviewer` and add the Angular PDF Viewer by using `` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component. ```typescript @@ -109,9 +109,9 @@ Add the Angular PDF Viewer component’s styles as given below in `src/styles.cs ``` ## Run the application -Use the following command to run the application in browser. +Use the following command to run the application in the browser. -```javascript +```bash ng serve --open ``` 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..f270387872 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 @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Customize the context menu in Angular PDF Viewer -The PDF Viewer supports adding custom options to the context menu using the `addCustomMenu()` method; define custom actions with `customContextMenuSelect()`. See the addCustomMenu and [customContextMenuSelect()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#customcontextmenuselect) API. +The PDF Viewer supports adding custom options to the context menu using the `addCustomMenu()` method; define custom actions with `customContextMenuSelect()`. See the `addCustomMenu()` and [customContextMenuSelect()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#customcontextmenuselect) API. ### Add a custom option @@ -99,7 +99,7 @@ Toggle the display of the default context menu. When the addCustomMenu parameter } ``` -#### show or hide custom items before opening +#### Show or hide custom items before opening Use [customContextMenuBeforeOpen()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#customcontextmenubeforeopen) to hide or show custom options dynamically. @@ -222,7 +222,7 @@ The following is the output of the custom context menu with customization. {% endtabs %} N> To set up the **server-backed PDF Viewer**, -Add the below serviceUrl in the `app.ts` file +Add the serviceUrl below 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. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-font-signature-field.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-font-signature-field.md index e1d6afc17b..d4ddb82fb4 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-font-signature-field.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-font-signature-field.md @@ -1,6 +1,6 @@ --- -Layout: post -title: To change the font family in Syncfusion Angular PDF Viewer component +layout: post +title: Change the font family in Syncfusion Angular PDF Viewer component description: Learn how to change the font family in Form Field's Type Signature in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer @@ -18,7 +18,7 @@ The following steps are used to include custom fonts for signature and initial f **Step 1:** Follow the steps in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) guide to create a simple PDF Viewer sample. -**Step 2:** Insert the following code snippet to implement the functionality for using custom fonts in Signature field. +**Step 2:** Insert the following code snippet to implement the functionality for using custom fonts in the signature field. ```html @@ -30,7 +30,7 @@ The following steps are used to include custom fonts for signature and initial f ```ts changeFontFamily(){ var pdfviewer=(document.getElementById('pdfviewer')).ej2_instances[0]; - pdfviewer.SignatureFieldSettings.typeSignatureFonts = [ + pdfviewer.signatureFieldSettings.typeSignatureFonts = [ 'Allura', 'Tangerine', 'Sacramento', @@ -40,7 +40,8 @@ changeFontFamily(){ ``` ### Initial Field -Insert the following code snippet to implement the functionality for using custom fonts in Initial field. + +Insert the following code snippet to implement the functionality for using custom fonts in the initial field. ```html @@ -52,7 +53,7 @@ Insert the following code snippet to implement the functionality for using custo ```ts changeFontFamily(){ var pdfviewer=(document.getElementById('pdfviewer')).ej2_instances[0]; - pdfviewer.InitialFieldSettings.typeInitialFonts = [ + pdfviewer.initialFieldSettings.typeInitialFonts = [ 'Allura', 'Tangerine', 'Sacramento', @@ -61,4 +62,4 @@ changeFontFamily(){ } ``` -Implementing this enables use of custom fonts in form-field signature and initial fields. \ No newline at end of file +Implementing this enables the use of custom fonts in form-field signature and initial fields. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md index a7804a1774..c579835b6d 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-fonts.md @@ -1,7 +1,7 @@ --- layout: post title: Add custom fonts in Angular PDF Viewer | Syncfusion -description: Learn how to add and load custom TTF fonts for documents displayed in the Angular PDF Viewer using the customFonts property. +description: Learn how to add and load custom TTF fonts for form fields displayed in the Angular PDF Viewer using the customFonts property. platform: document-processing control: PDF Viewer documentation: ug @@ -93,6 +93,6 @@ Custom fonts can be applied to the following form field types: - If text rendered using a custom font exceeds the form field’s bounds, the downloaded PDF may render incorrectly in some third party PDF viewers. - The same content displays correctly in the **Syncfusion PDF Viewer**. -## To avoid rendering issues: +## To avoid rendering issues - Use an appropriate font size that fits within the form field. - Increase the size of the form field before saving or downloading the PDF. \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-stamp.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-stamp.md index 19507a44f0..ba7bc0a419 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-stamp.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/custom-stamp.md @@ -1,14 +1,14 @@ --- layout: post -title: Add the custom stamp based on the free text bounds | Syncfusion -description: Learn how to add the custom stamp based on the free text bounds in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Add a custom stamp based on the free text bounds | Syncfusion +description: Learn how to add a custom stamp based on the free text bounds in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Add the custom stamp based on the free text bounds +control: Add a custom stamp based on the free text bounds documentation: ug domainurl: ##DomainURL## --- -# Add the custom stamp based on the free text bounds +# Add a custom stamp based on the free text bounds When adding a stamp programmatically, the PDF Viewer expects offset values in points (1 point = 1/72 inch). Typical displays use 96 DPI for pixels, so convert pixels to points using: points = pixels * 72 / 96. Also consider page scale and rotation when positioning stamps so the stamp appears at the expected location on the page. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md index 22c1e8230a..91a03a27e8 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md @@ -1,9 +1,9 @@ --- layout: post -title: Delete annotation in Angular PDF Viewer component | Syncfusion -description: Learn here all about Delete annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Delete a specific annotation in Angular PDF Viewer component | Syncfusion +description: Learn here all about Delete a specific annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Delete annotation +control: Delete a specific annotation documentation: ug domainurl: ##DomainURL## --- @@ -24,6 +24,8 @@ The following steps are used to delete a specific annotation from PDF Document: ```typescript // Delete Annotation by id. +// Note: viewer.annotationCollection must contain at least one annotation, +// otherwise accessing index [0] will throw. deleteAnnotationbyId() { var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; viewer.annotationModule.deleteAnnotationById( 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..60a7691be3 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,7 +1,7 @@ --- layout: post title: Controlling File Downloads in 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. +description: Learn here how to control file downloads in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug 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..3c01646af3 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 @@ -1,7 +1,7 @@ --- layout: post -title: Enable and disable the delete button based on annotation | Syncfusion -description: Learn to enable and disable delete button based on annotation events in Syncfusion Angular PDF Viewer component and more. +title: Enable and disable the delete button based on annotation selection and unselection | Syncfusion +description: Learn to enable and disable the delete button based on annotation selection and unselection events in Syncfusion Angular PDF Viewer component and more. platform: document-processing control: How to enable and disable the delete button based on annotation selection and unselection events documentation: ug @@ -51,7 +51,7 @@ Example: id ="DeleteButton" disabled="true" (click)="deleteSelectedAnnotation()"> - + ``` 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 88fe3e70d2..b61a479361 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 @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Managing Local Storage in PDF Viewer -The 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. +The PDF Viewer exposes the `enableLocalStorage` property to control how session-specific viewer data is stored, such as annotations and form field values created during the current session. Configure this property to choose between the viewer's internal storage mechanism (in-memory collection) and the browser's session storage. ### Using the `enableLocalStorage` property diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-text-selection.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-text-selection.md index 699ed9dd3b..4fb7225fdf 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-text-selection.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/enable-text-selection.md @@ -83,7 +83,7 @@ export class AppComponent { **Set `enableTextSelection` to false** -Use the [`enableTextSelection`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#enabletextselection) property during initialization to disable or enable text selection. The following example disables the text selection during initialization. +Use the [`enableTextSelection`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#enabletextselection) property during initialization to disable or enable text selection. The following example disables text selection during initialization. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -248,5 +248,5 @@ If text selection remains active, ensure that the [`TextSelectionService`](https ## See also -- [Text Selection API reference](../text-selection/reference) +- [Text Selection API Events](../text-selection/text-selection-api-events) - [Angular PDF Viewer events](../events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md index 5db575366d..3473fe5315 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The PDF Viewer component can export pages as Base64-encoded image strings using the `exportAsImage()` method (single page) and `exportAsImages()` method (page range). The examples below demonstrate single-page export, range export, and how to specify a custom image size. -The following steps are used to exportAsImage. +The following steps are used to implement exportAsImage. **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample. @@ -65,6 +65,7 @@ Export a page range; the method returns an array of Base64-encoded image strings ```ts exportAsImages() { + let imageDetails; let startPageIndex: number = 1; let endPageIndex: number = 5; var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; @@ -85,6 +86,7 @@ Pass a `Size` object when exporting a page range to control the output image dim ```ts exportAsImageWithSize() { + let imageDetails; let startPageIndex: number = 1; let endPageIndex: number = 5; let size: Size = new Size(200,500); 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..56be29f104 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 @@ -3,7 +3,7 @@ layout: post title: extractTextCompleted Event in 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 +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -12,11 +12,11 @@ domainurl: ##DomainURL## 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. -The following steps are used to extract the text from the page. +The following steps are used to extract text from a page. **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample. -**Step 2:** The following code snippet explains how to extract the text from a page . +**Step 2:** The following code snippet explains how to extract text from a page. ```html Text Search: When using the `extractTextOption.TextOnly` and `extractTextOption.None` option, the findText method will not work. Instead, you should use the findTextAsync method to perform text searches asynchronously. +N> Text Search: When using the `extractTextOption.TextOnly` and `extractTextOption.None` options, the findText method will not work. Instead, you should use the findTextAsync method to perform text searches asynchronously. [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/extract-text.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md index 6ffdaf71b4..d039412dce 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md @@ -1,9 +1,9 @@ --- layout: post -title: Extract Text in Vue PDF Viewer component | Syncfusion -description: Learn about the Extract Text in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Extract Text -platform: ej2-vue +title: Extract Text in Angular PDF Viewer component | Syncfusion +description: Learn about the Extract Text in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +control: PDF Viewer +platform: document-processing documentation: ug domainurl: ##DomainURL## --- @@ -48,8 +48,8 @@ import { selector: 'app-root', template: `
- - + + { console.log('Extracted Text from Page 1:'); @@ -88,7 +88,7 @@ export class AppComponent implements OnInit { } // Function to extract text from a range of pages (pages 0 to 2) -extrctsText(): void { +extractTexts(): void { const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0]; viewer.extractText(0, 2, 'TextOnly').then((val: any) => { console.log('Extracted Text from Pages 0 to 2:'); @@ -102,6 +102,6 @@ extrctsText(): void { #### Explanation: **Single Page Extraction:** The first `extractText` call extracts text from page 1 (`startIndex = 1`), using the 'TextOnly' option for plain text extraction. -**Multiple Pages Extraction:** The second extractText call extracts text from pages 0 through 2 (`startIndex = 0, endIndex = 2`), using the `TextOnly` option for plain text extraction. +**Multiple Pages Extraction:** The second `extractText` call extracts text from pages 0 through 2 (`startIndex = 0, endIndex = 2`), using the `TextOnly` option for plain text extraction. [View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to) \ No newline at end of file From ba3adf97d837c0eb0fb0473435a88c04120f5a3c Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Mon, 27 Jul 2026 18:28:26 +0530 Subject: [PATCH 2/6] Task(1043618): Revamped the UG documentation for the How-To samples in the Angular PDF Viewer platform --- .../PDF-Viewer/angular/how-to/find-text-async.md | 14 +++++++------- .../PDF/PDF-Viewer/angular/how-to/font-family.md | 6 +++--- .../get-base-string-of-the-loaded-document.md | 12 ++++++------ .../PDF/PDF-Viewer/angular/how-to/get-base64.md | 6 +++--- .../PDF/PDF-Viewer/angular/how-to/getPageInfo.md | 2 +- .../angular/how-to/import-export-annotation.md | 2 +- .../angular/how-to/include-authorization-token.md | 4 ++-- ...install-packages-required-for-lower-versions.md | 2 +- .../how-to/load-document-after-resources-loaded.md | 6 +++--- .../PDF/PDF-Viewer/angular/how-to/load-document.md | 4 ++-- .../angular/how-to/load-n-number-page.md | 4 ++-- .../PDF-Viewer/angular/how-to/load-office-files.md | 2 +- .../how-to/load-pdf-viewer-with-local-resources.md | 2 +- .../how-to/lock-annotation-in-a-document.md | 3 +-- .../angular/how-to/lock-formfield-in-a-document.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/min-max-zoom.md | 8 ++++---- .../PDF/PDF-Viewer/angular/how-to/open-bookmark.md | 4 ++-- .../PDF-Viewer/angular/how-to/open-thumbnail.md | 4 ++-- .../pagerenderstarted-pagerendercompleted.md | 6 +++--- .../PDF/PDF-Viewer/angular/how-to/redis-cache.md | 9 +++------ .../resolve-unable-to-find-an-entry-point-error.md | 6 +++--- .../how-to/restricting-zoom-in-mobile-mode.md | 10 +++++----- .../PDF/PDF-Viewer/angular/how-to/retry-timeout.md | 4 ++-- .../angular/how-to/show-custom-stamp-item.md | 10 +++++----- ...op-up-after-completion-of-export-form-fields.md | 6 +++--- .../how-to/signatureselect-signatureunselect.md | 4 ++-- .../PDF-Viewer/angular/how-to/unload-document.md | 2 +- .../angular/how-to/webservice-not-listening.md | 10 +++++----- 28 files changed, 75 insertions(+), 79 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/find-text-async.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/find-text-async.md index 66e420d7fe..56e8e769f0 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/find-text-async.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/find-text-async.md @@ -1,6 +1,6 @@ --- layout: post -title: Find Text Async Angular PDF Viewer component | Syncfusion +title: Find Text Async in Angular PDF Viewer component | Syncfusion description: Learn about the `findTextAsync` in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Find Text Async @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Find Text using findTextAsync Method in Syncfusion PdfViewer +# Find Text using findTextAsync Method in Syncfusion PDF Viewer The findTextAsync method in the Syncfusion PDF Viewer control allows you to search for specific text or an array of strings asynchronously within a PDF document. The method returns the bounding rectangles for each occurrence of the search term, allowing you to find and work with text positions in the document. @@ -73,14 +73,14 @@ export class AppComponent implements OnInit { viewer.textSearchModule.findTextAsync('pdf', false).then((res: any) =>{ console.log(res); }); -} -findTexts(): void { - const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0]; - //Search for multiple strings (['pdf', 'the']) with a case-insensitive search across all pages + } + findTexts(): void { + const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0]; + //Search for multiple strings (['pdf', 'the']) with a case-insensitive search across all pages viewer.textSearchModule.findTextAsync(['pdf', 'the'], false).then((res: any) =>{ console.log(res); }); -} + } } ``` diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/font-family.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/font-family.md index 0564ca379a..27373dc7cd 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/font-family.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/font-family.md @@ -1,7 +1,7 @@ --- -Layout: post +layout: post title: Change the Font Family in Angular PDF Viewer component | Syncfusion -description: Learn how to change the font family in the type signature in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +description: Learn how to change the font family of the type signature in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Change the Font Family in the Type Signature documentation: ug @@ -12,7 +12,7 @@ domainurl: ##DomainURL## Use the PDF Viewer's [handWrittenSignatureSettings.typeSignatureFonts](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/handwrittensignaturesettings#typesignaturefonts) property to supply an array of font-family names that the Type Signature control can use. Ensure fonts are loaded before applying them to the viewer (for example, call `changeFontFamily()` after the viewer instance is available, such as in `ngAfterViewInit` or after the component finishes initializing). ```html - + diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md index 74d0e1e273..9939ef7479 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md @@ -1,6 +1,6 @@ --- layout: post -title: Get base string of the loaded document in Angular PDF Viewer component | Syncfusion +title: Get Base64 string of the loaded document in Angular PDF Viewer component | Syncfusion description: Learn here all about Get base string of the loaded document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Get base string of the loaded document @@ -12,11 +12,11 @@ domainurl: ##DomainURL## The PDF Viewer exposes `saveAsBlob()` to retrieve the currently loaded PDF as a Blob. Convert that Blob to a Base64 data URL (for example, to save in a database or transfer to a backend) and reload the document later using `load()` with the Base64 data. -The following steps are used to get the base 64 string of the loaded PDF document in the PDF viewer control. +The following steps are used to get the Base64 string of the loaded PDF document in the PDF viewer control. -**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create simple PDF Viewer sample in Angular. +**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a simple PDF Viewer sample in Angular. -**Step 2:** Add the following code snippet to get the base 64 string with button click event. +**Step 2:** Add the following code snippet to get the Base64 string with button click event. ```html @@ -38,10 +38,10 @@ base64ofloadedDocument() { console.log(base64data); }; }); - +} ``` -**Step 3:** Use the following code snippet inside the **saveAsBlob()** method to load the document from the base 64 string. +**Step 3:** Use the following code snippet to load the document from the Base64 string. ```typescript // load the document from base 64 string. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base64.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base64.md index c34e982fab..5622ff7a60 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base64.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base64.md @@ -1,6 +1,6 @@ --- layout: post -title: Retrieving Base64 Value from a PDF in Angular PDF Viewer|Syncfusion. +title: Retrieving Base64 Value from a PDF in Angular PDF Viewer | Syncfusion description: Learn here all about how to retrieve the Base64 value of a loaded PDF document 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## --- -# Retrieve Base64 from a PDF in Angular PDF Viewer +# Retrieve the Base64 value of a PDF in Angular PDF Viewer ### Overview @@ -161,6 +161,6 @@ export class AppComponent implements OnInit { ### Conclusion -By implementing these steps in the Angular component, a PDF document loaded in the PDF Viewer can be converted into a Base64-encoded data URL when a button is clicked. This facilitates the manipulation or transfer of PDF data as needed. +By implementing these steps in the Angular component, you can convert a PDF document loaded in the PDF Viewer into a Base64-encoded data URL when the button is clicked. This facilitates the manipulation or transfer of PDF data as needed. [View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/getPageInfo.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/getPageInfo.md index c7d697e01d..63f9fc7524 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/getPageInfo.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/getPageInfo.md @@ -92,6 +92,6 @@ export class AppComponent implements OnInit { {% endhighlight %} {% endtabs %} -By following these steps, you can successfully integrate and use the get page info API in the EJ2 PDF Viewer. +By following these steps, you can successfully integrate and use the `getPageInfo` API in the EJ2 PDF Viewer. [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/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/import-export-annotation.md index 91fb3b8f7f..81d2b01e85 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/import-export-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/import-export-annotation.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Import Export annotation in Angular PDF Viewer component +# Import & Export Annotations in Angular PDF Viewer component The PDF Viewer control supports exporting and importing annotations in multiple formats: JSON, XFDF, or as native annotation objects. Use `exportAnnotation('Json')` or `exportAnnotation('Xfdf')` for serialized formats, and `exportAnnotationsAsObject()` to obtain the in-memory annotation objects that can be re-imported with `importAnnotation()`. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md index 7707fc5ddb..bc72a964d3 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md @@ -8,11 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- -# Include the authorization token +# Include the authorization token in Angular PDF Viewer component The PDF Viewer supports adding an authorization token to every AJAX request by configuring the `ajaxRequestSettings.ajaxHeaders` property. Set the header once and the library includes it in all requests initiated by the viewer. -The following steps are used to include the authorization token to the PDF viewer control. +The following steps show how to include the authorization token in the PDF Viewer control. **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create simple PDF Viewer sample in Angular. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/install-packages-required-for-lower-versions.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/install-packages-required-for-lower-versions.md index 510f1dcc06..70920bf998 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/install-packages-required-for-lower-versions.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/install-packages-required-for-lower-versions.md @@ -16,7 +16,7 @@ npm install @syncfusion/ej2-angular-pdfviewer@ngcc --save To reference the ngcc package in the `package.json` file, append the `-ngcc` suffix to the package version: -```bash +```json "@syncfusion/ej2-angular-pdfviewer": "20.2.38-ngcc" ``` diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md index 2c38e195ef..3aab737e2f 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md @@ -1,7 +1,7 @@ --- layout: post -title: Load document after resources Loaded Angular PDF Viewer | Syncfusion -description: Learn here all about how to Load document after loading assets in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Load a Document After Resources Are Loaded in Angular PDF Viewer | Syncfusion +description: Learn how to load a document in the Syncfusion Angular PDF Viewer only after PDFium assets have finished loading. platform: document-processing control: PDF Viewer documentation: ug @@ -36,7 +36,7 @@ The `resourcesLoaded` event fires once the viewer finishes loading all required ```ts // app.ts import { Component, ViewChild } from '@angular/core'; -import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; +import { PdfViewerModule, PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; @Component({ selector: 'app-root', diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md index 19fa2e90e9..58b6ccbbb5 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md @@ -3,7 +3,7 @@ layout: post title: Load document in Angular PDF Viewer component | Syncfusion description: Learn here all about Load document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Load document +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -14,7 +14,7 @@ The PDF Viewer supports loading or switching PDF documents at runtime after the The following steps show common approaches for loading documents dynamically. -**Step 1:** Follow the getting started guide to create a basic Angular PDF Viewer sample: https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started +**Step 1:** Follow the getting started guide to create a basic Angular PDF Viewer sample: [Angular PDF Viewer getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) **Step 2:** Use the following code snippet to load the document from a Base64 string. 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..0f47b1d982 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 @@ -1,9 +1,9 @@ --- layout: post title: Load N number of pages in Angular PDF Viewer component | Syncfusion -description: Learn how to Load N number of pages on initial loading in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +description: Learn how to load N number of pages on initial loading in the Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Load N number of pages on initial loading +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md index 650d1b9d28..2fd42fe6ff 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md @@ -3,7 +3,7 @@ layout: post title: Load office files in PDF Viewer description: Learn about how to load office files in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: How to load the Office products +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-pdf-viewer-with-local-resources.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-pdf-viewer-with-local-resources.md index ac6c379f71..77f6369591 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-pdf-viewer-with-local-resources.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-pdf-viewer-with-local-resources.md @@ -91,7 +91,7 @@ export class AppComponent { } ``` -### Step 5: Run the Application +### Step 4: Run the Application Run the Angular application: 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..cfc4a7d29a 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 @@ -3,7 +3,7 @@ layout: post title: Lock annotation in Angular PDF Viewer component | Syncfusion description: Learn here all about Lock annotation in a document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Lock annotation in a document +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -45,7 +45,6 @@ The following sample shows how to set `IsLocked` for custom stamp annotations wh ```typescript //Method to lock the custom stamp annotation. public fireAjaxRequestSuccess(event: any, data: any) { - debugger; if (event.action == 'RenderAnnotationComments') { for (var i = data.startPageIndex; i < data.endPageIndex; i++) { for ( 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..54c1a00e5e 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 @@ -3,7 +3,7 @@ layout: post title: Lock Form Fields in Angular PDF Viewer component | Syncfusion description: Learn here all about Lock Form Fields in a document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Lock Form Fields in a document +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/min-max-zoom.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/min-max-zoom.md index bc05bf9835..4cf89fc983 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/min-max-zoom.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/min-max-zoom.md @@ -108,7 +108,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, TextSearchService, AnnotationService, TextSelectionService, PrintService, FormFieldsService, FormDesignerService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; -import {Browser} from '@syncfusion/ej2-base'; +import { Browser } from '@syncfusion/ej2-base'; @Component({ selector: 'app-container', @@ -135,7 +135,7 @@ import {Browser} from '@syncfusion/ej2-base'; var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; if (Browser.isDevice && !viewer.enableDesktopMode) { viewer.maxZoom = 200; - viewer.minZoom = 10; + viewer.minZoom = 10; } else { viewer.zoomMode = 'Default'; @@ -153,7 +153,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, TextSearchService, AnnotationService, TextSelectionService, PrintService, FormFieldsService, FormDesignerService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; -import {Browser} from '@syncfusion/ej2-base'; +import { Browser } from '@syncfusion/ej2-base'; @Component({ selector: 'app-container', @@ -181,7 +181,7 @@ import {Browser} from '@syncfusion/ej2-base'; var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; if (Browser.isDevice && !viewer.enableDesktopMode) { viewer.maxZoom = 200; - viewer.minZoom = 10; + viewer.minZoom = 10; } else { viewer.zoomMode = 'Default'; diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-bookmark.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-bookmark.md index 98e7e6f056..6a35231e8d 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-bookmark.md @@ -19,7 +19,7 @@ Follow these steps to call the bookmark APIs from the application. **Step 2:** Insert the following code snippet to implement opening the bookmark pane: ```html - + ``` ```ts @@ -29,7 +29,7 @@ openBookmark() { viewer.bookmarkViewModule.openBookmarkPane(); } ``` -Similarly, to close the Bookmark pane programmatically, employ the following code snippet: +Similarly, to close the bookmark pane programmatically, use the following code snippet: ```html diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md index 8d46b7d3c7..9cb8cd092a 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md @@ -3,14 +3,14 @@ layout: post title: Open thumbnail in Angular PDF Viewer component | Syncfusion description: Learn here all about Open thumbnail in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Open thumbnail +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- # Open the thumbnail pane programmatically -The PDF Viewer exposes a `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows. +The PDF Viewer exposes an `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows. Follow these steps to open the thumbnail pane from application code. 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 9cfd734a2d..c2aebcc17c 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 @@ -1,7 +1,7 @@ --- layout: post title: Rendering events in Angular PDF Viewer component | Syncfusion -description: Learn here all about pageRenderInitiate and pageRenderComplete event in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +description: Learn here all about pageRenderInitiate and pageRenderComplete events in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug @@ -34,8 +34,8 @@ public pageRenderInitiate(args: any): void { public pageRenderComplete(args: any): void { // This method is called when the page rendering completes - console.log('Rendering of pages completed'); - console.log(args) + console.log('Rendering of pages completed'); + console.log(args) } ``` diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/redis-cache.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/redis-cache.md index 9368bd5faa..b4c78d70ee 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/redis-cache.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/redis-cache.md @@ -3,7 +3,7 @@ layout: post title: Redis cache in Angular PDF Viewer component | Syncfusion description: Learn here all about Redis cache in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Redis cache +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -35,12 +35,9 @@ public void ConfigureServices(IServiceCollection services) ``` -**Step 5:** Use the Redis cache in the PDF Viewer controller action: +5. Use the Redis cache in the PDF Viewer controller: -To use Redis Cache in PDF Viewer, you can implement the IDistributedCache interface and use the Redis Cache service to store and -retrieve - -the PDF document bytes. +To use Redis Cache in PDF Viewer, you can implement the IDistributedCache interface and use the Redis Cache service to store and retrieve the PDF document bytes. ```cs private readonly IHostingEnvironment _hostingEnvironment; diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/resolve-unable-to-find-an-entry-point-error.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/resolve-unable-to-find-an-entry-point-error.md index 6116e8199c..0affe74224 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/resolve-unable-to-find-an-entry-point-error.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/resolve-unable-to-find-an-entry-point-error.md @@ -2,7 +2,7 @@ layout: post title: Find an entry point in Angular PDF Viewer component | Syncfusion description: Learn here how to resolve unable to find an entry point named error in Angular PDF Viewer component of Syncfusion Essential JS 2 and more. -control: Resolve unable to find an entry point error +control: PDF Viewer platform: document-processing documentation: ug domainurl: ##DomainURL## @@ -16,11 +16,11 @@ From the release of version **21.1.0.35 (2023 Volume 1)** of Essential Studio When hosting in cloud environments (Azure, AWS, container platforms), always remove or overwrite older published files to avoid stale native binaries remaining on the host. \ 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..d7b50a22f1 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 @@ -1,7 +1,7 @@ --- layout: post title: Restrict Zoom Percentage in Angular PDF Viewer component | Syncfusion -description: Learn here all how to restrict zoom percentage in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +description: Learn here how to restrict the zoom percentage in the Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug @@ -21,7 +21,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, TextSearchService, AnnotationService, TextSelectionService, PrintService, FormFieldsService, FormDesignerService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; -import {Browser} from '@syncfusion/ej2-base'; +import { Browser } from '@syncfusion/ej2-base'; @Component({ selector: 'app-container', @@ -48,7 +48,7 @@ import {Browser} from '@syncfusion/ej2-base'; var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; if (Browser.isDevice && !viewer.enableDesktopMode) { viewer.maxZoom = 200; - viewer.minZoom = 10; + viewer.minZoom = 10; } else { viewer.zoomMode = 'Default'; @@ -66,7 +66,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService, TextSearchService, AnnotationService, TextSelectionService, PrintService, FormFieldsService, FormDesignerService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; -import {Browser} from '@syncfusion/ej2-base'; +import { Browser } from '@syncfusion/ej2-base'; @Component({ selector: 'app-container', @@ -94,7 +94,7 @@ import {Browser} from '@syncfusion/ej2-base'; var viewer = (document.getElementById('pdfViewer')).ej2_instances[0]; if (Browser.isDevice && !viewer.enableDesktopMode) { viewer.maxZoom = 200; - viewer.minZoom = 10; + viewer.minZoom = 10; } else { viewer.zoomMode = 'Default'; diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md index 9e1e22fd6f..b2b5ee207f 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md @@ -1,7 +1,7 @@ --- layout: post title: Retry Timeout | Syncfusion -Description: Learn here all about Retry Timeout in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +description: Learn here about the retry timeout in the Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Retry Timeout documentation: ug @@ -35,7 +35,7 @@ Use cases: ``` -In the given example, the `retryTimeout` is set to 10 seconds, and the `retryCount` is set to 5. This means that if a request made by the PDF Viewer takes longer than 10 seconds to receive a response, it will be considered a timeout. In such cases, The PDF Viewer will resend the same request based on the retryCount. Here, this process will repeat up to maximum of 5 retries. +In the given example, the `retryTimeout` is set to 10 seconds, and the `retryCount` is set to 5. This means that if a request made by the PDF Viewer takes longer than 10 seconds to receive a response, it will be considered a timeout. In such cases, the PDF Viewer will resend the same request based on the retryCount. Here, this process will repeat up to a maximum of 5 retries. When an AJAX request times out, the viewer decrements `retryCount` and retries the request until the count reaches zero. The viewer stops retrying when the request succeeds or when `retryCount` is exhausted, at which point the viewer surfaces an error to the application. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-custom-stamp-item.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-custom-stamp-item.md index 9f77a72310..67cffef8fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-custom-stamp-item.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/show-custom-stamp-item.md @@ -1,7 +1,7 @@ --- layout: post -title: Displaying Custom stamp Items in Angular PDF Viewer|Syncfusion. -description: Learn how to display custom items in the custom stamp Dropdown in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Displaying Custom Stamp Items in the Angular PDF Viewer | Syncfusion +description: Learn how to display custom items in the custom stamp dropdown in the Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug @@ -80,7 +80,7 @@ export class AppComponent implements OnInit { { 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 @@ -151,7 +151,7 @@ export class AppComponent implements OnInit { { 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 @@ -168,6 +168,6 @@ export class AppComponent implements OnInit { {% endhighlight %} {% endtabs %} -By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents. +By following these instructions, you can successfully display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents. [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/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..8b738cffb8 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 @@ -3,7 +3,7 @@ layout: post title: Show pop up in Angular PDF Viewer component | Syncfusion description: Learn here all about Show pop up after completion of export form fields in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Show pop up after completion of export form fields +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -31,7 +31,7 @@ public fireExportRequestSuccess() { .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' + 'Your form information has been saved. You can resume it at any time.Form Information Saved' ); } @@ -53,7 +53,7 @@ public fireExportRequestSuccess() { .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' + 'Your form information has been saved. You can resume it at any time.Form Information Saved' ); } 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 401b31a9af..68631bdcf6 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 @@ -1,7 +1,7 @@ --- layout: post -title: Signature selection events in Angular PDF Viewer component| Syncfusion -description: Learn here all about signatureSelect and signatureUnselect event event in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. +title: Signature selection events in Angular PDF Viewer component | Syncfusion +description: Learn here all about signatureSelect and signatureUnselect events in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md index 1276c8dc17..04e63f0c01 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md @@ -3,7 +3,7 @@ layout: post title: Unload document in Angular PDF Viewer component | Syncfusion description: Learn here all about Unload document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing -control: Unload document +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/webservice-not-listening.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/webservice-not-listening.md index 9c70eba23b..e1a74d8df7 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/webservice-not-listening.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/webservice-not-listening.md @@ -2,7 +2,7 @@ layout: post title: Web-service is not listening to error | Syncfusion description: Learn how to clear Web-service is not listening to errors in Syncfusion Angular PDF Viewer component and more. -control: How to clear Web-service is not listening to errors. +control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- @@ -12,7 +12,7 @@ domainurl: ##DomainURL## If the Angular PDF Viewer reports a "Web-service is not listening" error, use the browser's developer tools to diagnose the request and the server behavior. The steps below guide the most common troubleshooting paths and remediation actions. -**Step 1:** Open the browser's developer tools by right-clicking on the page and selecting `Inspect` from the dropdown menu. Then Navigate to the `Network` tab. This will show you all of the requests that are being made by the page. +**Step 1:** Open the browser's developer tools by right-clicking on the page and selecting `Inspect` from the dropdown menu. Then navigate to the `Network` tab. This will show you all of the requests that are being made by the page. ![Alt text](../images/networktab.png) @@ -46,13 +46,13 @@ The `Document cache not found` exception in PDF Viewer typically occurs when the It's possible that you have multiple instances of the PDF Viewer running simultaneously, which can cause issues with the document cache. To check for this, open the Task Manager on your computer and look for any instances of the PDF Viewer running. If you find multiple instances, try closing them all and reopening the viewer. -We can use Redis cache and distributive cache for this issue. +We can use Redis cache and distributed cache for this issue. ### Check your network connection Ensure that your network connection is stable and strong enough to support the web service you are trying to use. Sometimes, simply restarting the web service can resolve the issue. Try stopping and starting the service again to see if it resolves the problem. -## The document pointer does not exist in the cache. +## The document pointer does not exist in the cache The `Document pointer does not exist in the cache` exception in the PDF Viewer usually occurs when there is an issue with loading or caching the PDF document. This error can be caused by a variety of reasons, including: @@ -66,4 +66,4 @@ To clear this error in the Angular PDF Viewer, you can try the following steps: ## Internal server error -Server-side exceptions happen for various use cases. We can't just define them if they are document-specific, provide the document, or you may need to contact support for further assistance. \ No newline at end of file +Server-side exceptions happen for various use cases. If they are document-specific, provide the document, or contact support for further assistance. \ No newline at end of file From 2212d0087eb6288e7b50c1b3cf4e823572df290c Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Mon, 27 Jul 2026 20:10:03 +0530 Subject: [PATCH 3/6] Task(1043618): Resolved the CI failure --- .../angular/how-to/change-selection-border.md | 4 ++-- .../how-to/configure-annotation-selector-setting.md | 10 +++++----- .../PDF/PDF-Viewer/angular/how-to/conformance.md | 4 ++-- .../angular/how-to/control-annotation-visibility.md | 2 +- .../convert-pdf-library-bounds-to-pdf-viewer-bounds.md | 4 ++-- .../PDF/PDF-Viewer/angular/how-to/delete-annotation.md | 2 +- .../PDF-Viewer/angular/how-to/download-start-event.md | 4 ++-- .../angular/how-to/enable-disable-annotation.md | 4 ++-- .../PDF/PDF-Viewer/angular/how-to/export-as-image.md | 2 +- .../angular/how-to/extract-text-completed.md | 4 ++-- .../PDF-Viewer/angular/how-to/extract-text-option.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/extract-text.md | 2 +- .../how-to/get-base-string-of-the-loaded-document.md | 4 ++-- .../angular/how-to/include-authorization-token.md | 2 +- .../how-to/load-document-after-resources-loaded.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/load-document.md | 2 +- .../PDF-Viewer/angular/how-to/load-n-number-page.md | 4 ++-- .../PDF/PDF-Viewer/angular/how-to/load-office-files.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/open-thumbnail.md | 2 +- .../angular/how-to/restricting-zoom-in-mobile-mode.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/retry-timeout.md | 2 +- ...ow-pop-up-after-completion-of-export-form-fields.md | 2 +- .../how-to/signatureselect-signatureunselect.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/unload-document.md | 4 +++- 24 files changed, 38 insertions(+), 36 deletions(-) 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 9ee23209f9..f78bb81637 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 @@ -1,7 +1,7 @@ --- layout: post -title: Change the selection border in Angular PDF Viewer component | Syncfusion -description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component. +title: Change the selection border in Angular | Syncfusion +description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component using the annotationSelectorSettings property, with step-by-step code samples. platform: document-processing control: PDF Viewer documentation: ug 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 ce3a82ee9f..52af5567a2 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 settings in Angular | 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: @@ -161,7 +161,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 handles 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/conformance.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md index 3aab6a51cf..ae97167627 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/conformance.md @@ -1,7 +1,7 @@ --- layout: post -title: Supported PDF conformance levels | Syncfusion -description: Learn about the supported PDF/A and PDF/X conformance levels in the Angular PDF Viewer component. +title: Supported PDF conformance levels in Angular | Syncfusion +description: Learn about the supported PDF/A and PDF/X conformance levels in the Syncfusion Angular PDF Viewer component. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md index 3fb17cb553..eb69b2e725 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/control-annotation-visibility.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Control annotation visibility in PDF Viewer +# Control annotation visibility in Angular PDF Viewer ## Overview 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 44a7cc9390..0899f5f88c 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 in 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. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md index 91a03a27e8..fb465db988 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/delete-annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: Delete a specific annotation in Angular PDF Viewer component | Syncfusion +title: Delete a specific annotation in Angular PDF Viewer | Syncfusion description: Learn here all about Delete a specific annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Delete a specific annotation 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 60a7691be3..42769206a5 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: Control file downloads in Angular PDF Viewer | Syncfusion description: Learn here how to control 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 Syncfusion® 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. 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 3c01646af3..7454aa83a0 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 @@ -1,6 +1,6 @@ --- layout: post -title: Enable and disable the delete button based on annotation selection and unselection | Syncfusion +title: Enable or disable the delete button using annotation selection events description: Learn to enable and disable the delete button based on annotation selection and unselection events in Syncfusion Angular PDF Viewer component and more. platform: document-processing control: How to enable and disable the delete button based on annotation selection and unselection events @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# How to enable and disable the delete button based on annotation selection and unselection events +# Enable or disable the delete button using annotation selection events This article demonstrates how to enable and disable a toolbar delete button in response to annotation selection and unselection events using `annotationSelect` and `annotationUnSelect`. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md index 3473fe5315..af7ab9f76a 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/export-as-image.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -## Export as image in Angular PDF Viewer component +# Export as image in Angular PDF Viewer component The PDF Viewer component can export pages as Base64-encoded image strings using the `exportAsImage()` method (single page) and `exportAsImages()` method (page range). The examples below demonstrate single-page export, range export, and how to specify a custom image size. 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 56be29f104..99b39ff6fa 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 in Angular | 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: PDF Viewer @@ -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. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-option.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-option.md index 41883ebeff..21e28a92e2 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-option.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text-option.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -## Extract text option in the Angular PDF Viewer +# Extract text option in the Angular PDF Viewer The `extractTextOption` property controls the amount of text and layout information returned by the viewer. Adjusting this value helps balance memory usage and the level of detail required for downstream processing. The viewer exposes four options: diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md index d039412dce..6828013a18 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -## Extract text method in the PDF Viewer +# Extract text method in the PDF Viewer The `extractText` method retrieves text content and, optionally, positional data for elements on one or more pages. It returns a Promise that resolves to an object containing extracted `textData` (detailed items with bounds) and `pageText` (concatenated plain text). diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md index 9939ef7479..9637cfaea7 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/get-base-string-of-the-loaded-document.md @@ -1,6 +1,6 @@ --- layout: post -title: Get Base64 string of the loaded document in Angular PDF Viewer component | Syncfusion +title: Get Base64 string of the loaded document in Angular | Syncfusion description: Learn here all about Get base string of the loaded document in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Get base string of the loaded document @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Get the Base64 string of the loaded PDF document -The PDF Viewer exposes `saveAsBlob()` to retrieve the currently loaded PDF as a Blob. Convert that Blob to a Base64 data URL (for example, to save in a database or transfer to a backend) and reload the document later using `load()` with the Base64 data. +The PDF Viewer exposes `saveAsBlob()` to retrieve the currently loaded PDF as a Blob. Convert that Blob to a Base64 data URL (for example, to save in a database or transfer to a back end) and reload the document later using `load()` with the Base64 data. The following steps are used to get the Base64 string of the loaded PDF document in the PDF viewer control. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md index bc72a964d3..3ff063e7e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/include-authorization-token.md @@ -1,6 +1,6 @@ --- layout: post -title: Include authorization token in Angular PDF Viewer component | Syncfusion +title: Include authorization token in Angular | Syncfusion description: Learn here all about Include authorization token in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: Include authorization token diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md index 3aab737e2f..76628a926b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document-after-resources-loaded.md @@ -1,6 +1,6 @@ --- layout: post -title: Load a Document After Resources Are Loaded in Angular PDF Viewer | Syncfusion +title: Load a Document After Resources Are Loaded in Angular | Syncfusion description: Learn how to load a document in the Syncfusion Angular PDF Viewer only after PDFium assets have finished loading. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md index 58b6ccbbb5..b865b29216 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-document.md @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Load PDF documents dynamically -The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string. +The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#load) method to open a document from a URL or a Base64 string. The following steps show common approaches for loading documents dynamically. 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 0f47b1d982..9720049d0c 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/index-default#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" %} diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md index 2fd42fe6ff..4969e851b0 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/load-office-files.md @@ -1,6 +1,6 @@ --- layout: post -title: Load office files in PDF Viewer +title: Load office files in Angular PDF Viewer | Syncfusion description: Learn about how to load office files in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md index 9cb8cd092a..194597993a 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/open-thumbnail.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Open the thumbnail pane programmatically +# Open the thumbnail pane programmatically in Angular The PDF Viewer exposes an `openThumbnailPane()` API to open the thumbnail pane from application code. Use this API when the UI needs to show the thumbnail pane in response to user actions or programmatic workflows. 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 d7b50a22f1..8eaf1ff910 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. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md index b2b5ee207f..1c82bff0a2 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/retry-timeout.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Retry timeout +# Retry timeout in Angular The `retryTimeout` property controls how long the PDF Viewer waits (in seconds) for an AJAX response before considering that request timed out. When a timeout occurs, the viewer will retry the request according to the `retryCount` setting. Properly configuring `retryTimeout` and `retryCount` makes the viewer more resilient to transient network errors while avoiding excessive load on the server. 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 8b738cffb8..92986ff2bd 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 @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Show pop-up after completion of export form fields -The [exportSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportSuccessEventArgs/) event fires when exporting annotations or form data completes successfully. Use this event to display a notification pop-up that informs users the export finished and their data was saved. +The [exportSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportsuccesseventargs) event fires when exporting annotations or form data completes successfully. Use this event to display a notification pop-up that informs users the export finished and their data was saved. Use the following example to display a notification after a successful export. 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 68631bdcf6..66893d6f46 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 @@ -1,6 +1,6 @@ --- layout: post -title: Signature selection events in Angular PDF Viewer component | Syncfusion +title: Signature selection events in Angular | Syncfusion description: Learn here all about signatureSelect and signatureUnselect events in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md index 04e63f0c01..a3ed4745e9 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/unload-document.md @@ -8,9 +8,11 @@ documentation: ug domainurl: ##DomainURL## --- +# Unload document in Angular PDF Viewer component + ## Unload the PDF document programmatically -The PDF Viewer provides the [unload()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#unload) method to remove the currently loaded PDF from the viewer instance. Use this API to free memory or reset the viewer when navigating between documents or closing the viewer. +The PDF Viewer provides the [unload()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#unload) method to remove the currently loaded PDF from the viewer instance. Use this API to free memory or reset the viewer when navigating between documents or closing the viewer. The following steps are used to unload the PDF document programmatically. From f799f14dc28e3514b1ce15945feaf1d71d16a5ec Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Mon, 27 Jul 2026 22:54:33 +0530 Subject: [PATCH 4/6] Task(1043618): Resolved the CI failure --- .../PDF/PDF-Viewer/angular/how-to/change-selection-border.md | 2 +- .../how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/download-start-event.md | 2 +- .../PDF-Viewer/angular/how-to/enable-disable-annotation.md | 4 ++-- .../PDF/PDF-Viewer/angular/how-to/extract-text-completed.md | 2 +- .../PDF/PDF-Viewer/angular/how-to/extract-text.md | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) 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 f78bb81637..948906c7d4 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 @@ -1,7 +1,7 @@ --- layout: post title: Change the selection border in Angular | Syncfusion -description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component using the annotationSelectorSettings property, with step-by-step code samples. +description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component using the annotationSelectorSettings property. platform: document-processing control: PDF Viewer documentation: ug 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 0899f5f88c..23b0fb2dbf 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 in Angular | Syncfusion +title: Convert PDF Library bounds to PDF Viewer bounds | 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 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 42769206a5..46f64baf2b 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 @@ -96,4 +96,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 7454aa83a0..adbb48c2b1 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 @@ -1,6 +1,6 @@ --- layout: post -title: Enable or disable the delete button using annotation selection events +title: Enable or disable the delete button using annotation selection events | Syncfusion description: Learn to enable and disable the delete button based on annotation selection and unselection events in Syncfusion Angular PDF Viewer component and more. platform: document-processing control: How to enable and disable the delete button based on annotation selection and unselection events @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Enable or disable the delete button using annotation selection events +# Enable or disable the delete button using annotation selection events in Angular This article demonstrates how to enable and disable a toolbar delete button in response to annotation selection and unselection events using `annotationSelect` and `annotationUnSelect`. 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 99b39ff6fa..1754741cc1 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 @@ -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 Angular 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. diff --git a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md index 6828013a18..26dfc23ac6 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/how-to/extract-text.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Extract text method in the PDF Viewer +# Extract text method in the Angular PDF Viewer The `extractText` method retrieves text content and, optionally, positional data for elements on one or more pages. It returns a Promise that resolves to an object containing extracted `textData` (detailed items with bounds) and `pageText` (concatenated plain text). From 73f8d5f05dec9164cc1a523f3ad2ddb277645727 Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Mon, 27 Jul 2026 23:28:56 +0530 Subject: [PATCH 5/6] Task(1043618): Resolved the CI failure --- .../how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds.md | 2 +- .../PDF-Viewer/angular/how-to/enable-disable-annotation.md | 4 ++-- .../PDF/PDF-Viewer/angular/how-to/extract-text-completed.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) 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 23b0fb2dbf..4e5faa3919 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 Angular PDF Viewer bounds | 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 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 adbb48c2b1..32a93c2d19 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 @@ -1,6 +1,6 @@ --- layout: post -title: Enable or disable the delete button using annotation selection events | Syncfusion +title: Enable or disable the delete button on annotation events | Syncfusion description: Learn to enable and disable the delete button based on annotation selection and unselection events in Syncfusion Angular PDF Viewer component and more. platform: document-processing control: How to enable and disable the delete button based on annotation selection and unselection events @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Enable or disable the delete button using annotation selection events in Angular +# Enable or disable the delete button using annotation events in Angular This article demonstrates how to enable and disable a toolbar delete button in response to annotation selection and unselection events using `annotationSelect` and `annotationUnSelect`. 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 1754741cc1..b59aa95860 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Extract text using the extractTextCompleted event in the Angular PDF Viewer +# Extract text using the extractTextCompleted event in Angular 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. From 0e199445b6aedbd1c352c43846ff835a73810bf6 Mon Sep 17 00:00:00 2001 From: Dhanush Sugumaran Date: Tue, 28 Jul 2026 09:03:40 +0530 Subject: [PATCH 6/6] Task(1043618): Resolved the CI failure --- Document-Processing-toc.html | 2 ++ .../PDF/PDF-Viewer/angular/how-to/extract-text-completed.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index e16bc70782..ce28cbcf9a 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -987,6 +987,7 @@
  • PageRenderInitiate and PageRenderComplete event
  • Open and Close Bookmark pane programmatically
  • Locking Form Fields in a PDF document
    • +
  • Locking annotations in a PDF document
  • SignatureSelect and SignatureUnselect event
  • Controlling File Downloads
  • Minimum and Maximum Zoom Properties
    • @@ -1011,6 +1012,7 @@
  • Dynamically Enable or Disable Text Selection
  • Show and Hide Annotations
  • Load document after resources loaded
    • +
  • Show pop-up after completion of export form fields
  • Troubleshooting 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 b59aa95860..849de8afb0 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Extract text using the extractTextCompleted event in Angular PDF Viewer +# Extract text using extractTextCompleted event in Angular 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.