diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md
index 81d4a8e218..8f42e05565 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/mobile-view.md
@@ -5,6 +5,7 @@ description: Learn how to apply redactions in mobile view using the Syncfusion A
platform: document-processing
control: PdfViewer
documentation: ug
+domainurl: ##DomainURL##
---
# Redaction in Mobile View in Angular PdfViewer Component
@@ -193,7 +194,7 @@ Step 3: Configure your redaction parameters using the selected tool interface.
N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered.
-Once you have configured redactions using any combination of tools.
+Once you have configured redactions using any combination of tools, follow these steps to apply them.
Step 1: Review all redaction marks and configurations.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md
index 24d9dbe158..283849357b 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md
@@ -137,7 +137,7 @@ After adding redaction annotations, permanently apply them to the document using
-A confirmation dialog appears before applying redaction to ensure acknowledgement of the irreversible action.
+A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible action.
@@ -145,7 +145,7 @@ N> Applying redaction is irreversible. Once applied, the original content cannot
## Comment Support
-Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction.
+Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction.
Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments).
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md
index dfd813f943..26d2ef3957 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md
@@ -5,6 +5,7 @@ description: Learn how to add, delete, update, and apply redaction annotations p
platform: document-processing
control: PdfViewer
documentation: ug
+domainurl: ##DomainURL##
---
# Programmatic support for redaction in Angular PdfViewer
@@ -203,7 +204,7 @@ export class AppComponent {
} as any);
}
- //You can listen to the annotationAdd event to track when annotations are added.
+ // You can listen to the annotationAdd event to track when annotations are added.
onAnnotationAdd(args: any): void {
console.log('Annotation added:', args);
}
@@ -383,7 +384,7 @@ export class AppComponent {
]
};
- //Edit RedactionAnnotation
+ // Edit RedactionAnnotation
editRedactAnnotation(): void {
const collection: any[] = (this.pdfViewer as any).annotationCollection;
for (let i = 0; i < collection.length; i++) {
@@ -489,7 +490,7 @@ export class AppComponent implements AfterViewInit {
]
};
- //Add page redactions programmatically (pages 1, 3, 5, 7)
+ // Add page redactions programmatically (pages 1, 3, 5, 7)
addPageRedactions(): void {
this.pdfViewer.annotation.addPageRedactions([1, 3, 5, 7]);
}
@@ -578,7 +579,7 @@ export class AppComponent implements AfterViewInit {
]
};
- //Apply redaction programmatically (irreversible)
+ // Apply redaction programmatically (irreversible)
applyRedaction(): void {
this.pdfViewer.annotation.redact();
}
@@ -666,7 +667,7 @@ export class AppComponent implements AfterViewInit {
]
};
- //Configure default redaction annotation properties (same as your JS)
+ // Configure default redaction annotation properties (same as your JS)
ngAfterViewInit(): void {
(this.pdfViewer as any).redactionSettings = {
overlayText: 'Confidential',
@@ -698,5 +699,5 @@ The redaction property panel allows users to update annotation properties throug
* [Overview of Redaction](./overview)
* [Redaction UI interactions](./ui-interaction)
* [Redaction Toolbar](./toolbar)
-* [Reaction in Mobile view](./mobile-view)
+* [Redaction in Mobile view](./mobile-view)
* [Search Text and Redact](./search-redact)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md
index 8165b860a8..3c4a9db6b7 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/search-redact.md
@@ -67,7 +67,6 @@ import {
`,
providers: [
- // Angular DI is the Angular equivalent of PdfViewer.Inject(...)
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
@@ -86,7 +85,7 @@ import {
export class AppComponent {
@ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent;
- // Same sources as in your JS
+ // Document and resource URLs
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md
index e05f40317b..2bd29533ff 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/toolbar.md
@@ -5,6 +5,7 @@ description: Learn how to customize the redaction toolbar in the Syncfusion Angu
platform: document-processing
control: PDF Viewer
documentation: ug
+domainurl: ##DomainURL##
---
# Redaction toolbar customization in Angular
@@ -102,7 +103,7 @@ export class AppComponent {
Refer to the following image for the toolbar view:
-
+
## Show or hide the redaction toolbar
@@ -112,7 +113,7 @@ The redaction toolbar can be toggled using the built‑in toolbar icon or progra
When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
-
+
### Display the redaction toolbar programmatically
@@ -221,7 +222,7 @@ export class AppComponent {
Refer to the following image for details:
-
+
## See also
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md
index 8e8da2fc47..bb7247b1e8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md
@@ -5,6 +5,7 @@ description: Learn about UI interactions in Redaction annotations of the Syncfus
platform: document-processing
control: PDF Viewer
documentation: ug
+domainurl: ##DomainURL##
---
# Redaction UI interactions in Angular PDF Viewer
@@ -120,7 +121,7 @@ The **Apply Redaction** button permanently removes all marked content from the d
-A confirmation dialog appears before applying redaction to ensure acknowledgement of the irreversible nature of the process.
+A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible nature of the process.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md
index 5190eedcda..64f033e51c 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md
@@ -11,9 +11,9 @@ documentation: ug
This section explains how to **add signature fields** using the Syncfusion **Angular PDF Viewer** and how to apply **digital (PKI) signatures** using the **JavaScript PDF Library**.
-N> As instructed by team leads — use the **Angular PDF Viewer only to add & place signature fields**. Use the **JavaScript PDF Library** to apply the *actual cryptographic digital signature*.
+N> Use the **Angular PDF Viewer only to add & place signature fields**. Use the **JavaScript PDF Library** to apply the *actual cryptographic digital signature*.
-## Overview (Explanation)
+## Overview
A **digital signature** provides:
- **Authenticity** – confirms the signer’s identity.
@@ -24,11 +24,12 @@ Syncfusion supports a hybrid workflow:
- Viewer → **[Design signature fields](../forms/manage-form-fields/create-form-fields#signature-field)**, capture Draw/Type/Upload electronic signature.
- PDF Library → **[Apply PKCS#7/CMS digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)** using a certificate (PFX/P12).
-## Add a Signature Field (How-to)
+## Add a Signature Field
### Using the UI
-1. Open **Form Designer**.
-2. Select **Signature Field**.
+1. Enable **Form Designer** mode in the PDF Viewer. See [Form Designer overview](../forms/overview).
+2. Open **Form Designer**.
+3. Select **Signature Field**.
3. Click on the document to place the field.
4. Configure Name, Tooltip, Required, etc.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md
index 6f52be8a6c..c97496947f 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md
@@ -17,7 +17,7 @@ When applying a PKI [digital signature](https://help.syncfusion.com/document-pro
For implementation details and exact API usage, check the Syncfusion PDF Library references:
-- .NET PDF Library — [Drawing text/image in the signature appearance]( https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
+- .NET PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
- JavaScript PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#drawing-textimage-in-the-signature-appearance)
## What you can customize
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md
index 014cc44e88..f9524557a8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md
@@ -242,13 +242,13 @@ N> For a ready‑to‑try flow that routes two users to sign their own fields an
Use the **JavaScript PDF Library** to apply a cryptographic signature on a field, with or without a visible appearance. See the **Digital Signature** documentation for additional options (external signing callbacks, digest algorithms, etc.).
-N> To preview visual differences, check the [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser. Digital Signature samples in the Angular sample browser.
+N> To preview visual differences, check the [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser.
### Finalize a signed document (lock)
After collecting all signatures and passing validations, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** the PDF (and optionally restrict permissions) to prevent further edits.
-## Signature Workflow Best Practices (Explanation)
+## Signature Workflow Best Practices
Designing a well‑structured signature workflow ensures clarity, security, and efficiency when working with PDF documents. Signature workflows typically involve multiple participants—reviewers and approvers each interacting with the document at different stages.
@@ -307,7 +307,6 @@ N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewe
- [Customize Annotation](../annotation/customize-annotation)
- [Digital Signature - JavaScript PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)
- [Handwritten Signature](../annotation/signature-annotation)
-- [Form Fields API](../form-fields-api)
+- [Form Fields API](../forms/form-fields-api)
- [Add Digital Signature](./add-digital-signature)
-- [Customize Signature Appearance](./customize-signature-appearance)
-- [Signature workflows](./signature-workflow)
\ No newline at end of file
+- [Customize Signature Appearance](./customize-signature-appearance)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md
index ba82b0ed7a..e890dda203 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md
@@ -11,9 +11,9 @@ documentation: ug
This guide explains **how to validate digital signatures** on PDFs when using the **Angular PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results).
-N> **Important:** The Angular PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI.
+N> **Important:** The Angular PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the results in your UI.
-## Overview (Explanation)
+## Overview
A **digital signature** is a cryptographic proof embedded in the PDF that allows verifiers to confirm:
@@ -24,13 +24,13 @@ A **digital signature** is a cryptographic proof embedded in the PDF that allows
In Syncfusion, you typically **[design the signature field in the Viewer](../forms/manage-form-fields/create-form-fields#signature-field)** and then use the Syncfusion PDF Library to perform cryptographic validation. See the PDF Library documentation for API references and examples: [Digital signature validation (PDF Library)](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#digital-signature-validation).
-## How validation fits in the Viewer flow (Concept)
+## How validation fits in the Viewer flow
1. Load and interact with the PDF in **Angular PDF Viewer** (place fields, fill forms).
2. Use **JavaScript PDF Library** to **open the PDF bytes** and **validate the signature**.
3. Display the validation outcome (valid/invalid/unknown) in your Angular UI (badge, toast, side panel).
-## How‑to: Validate a digital signature (Client‑side)
+## Validate a digital signature (Client‑side)
Cryptographic signature validation is performed by the Syncfusion PDF Library. Please refer to the PDF Library documentation for detailed guidance and sample code. The following pages cover validation concepts, APIs, and full examples:
@@ -42,13 +42,13 @@ Cryptographic signature validation is performed by the Syncfusion PDF Library. P
After using the PDF Library to obtain validation results (integrity, trust, timestamp), surface those results in your Angular UI (for example: badge, table, or details panel) to communicate status to users.
-## Interpreting validation outcomes (Reference)
+## Interpreting validation outcomes
- **Valid** – Integrity OK **and** certificate is trusted. (Timestamp valid if present.)
- **Invalid** – Bytes changed after signing **or** signature object malformed.
- **Unknown/Not Trusted** – Integrity OK but signer certificate is not trusted locally (common with **self‑signed PFX** used for demos). Import the signer certificate into the trusted store to see a *Valid* badge.
-## Best practices (Explanation)
+## Best practices
- **Single‑save rule:** Do **all edits first**, then **sign**, and **do not modify** the PDF after signing; modifying bytes after signing will invalidate the signature.
- **Establish trust:** For demos, a self‑signed PFX will appear *Unknown*. For production, use a certificate that chains to a trusted CA or import the signer/issuer to the verifier’s trust store.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
index 2ddf8b8f2e..1c8a004ca9 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
@@ -21,7 +21,7 @@ The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and
### Viewer Capability Highlights
- **Smooth performance for PDFs up to 1 GB**
- **Supports viewing files up to ~2 GB**
-- **1 GB PDFs typically load within 5–6 seconds**
+- **1 GB PDFs typically load within 5–6 seconds** (varies by system)
- **Optimized incremental page loading** for faster interaction
Performance may vary if the user’s system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
@@ -114,7 +114,7 @@ If thumbnails or page reordering are not essential:
```
-### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
+### 4. Enable Local Storage for Large PDFs with Many Form Fields or Annotations
PDFs with a high number of:
@@ -130,7 +130,7 @@ require more storage for:
Enabling local storage in the PDF Viewer can improve performance and smoothness when working with large files. This allows the viewer to cache document data locally, reducing repeated network requests and memory spikes.
-Use the [`enableLocalStorage`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in memory for the current session; when `false` (default), browser session storage is used.
+Use the [`enableLocalStorage`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, viewer data is persisted in the browser `localStorage`; when `false` (default), browser `sessionStorage` is used.
**How the viewer stores this data by default**
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
index dac174860c..183c42ea4d 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
@@ -12,7 +12,7 @@ domainurl: ##DomainURL##
This article explains how to open password-protected PDF files in the Angular PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
-## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+## 1. Opening a Password-Protected PDF using the **Open File** Dialog
When the user selects a password-protected PDF using the built‑in **Open File** option:
@@ -53,7 +53,7 @@ viewer.load(
This is useful when the password is known beforehand.
-### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+### 2.2 Loading a Password-Protected PDF by URL Using `documentPath`
If the [`documentPath`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
index bcaa1989dd..a9ce9a867b 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Pre-process PDF Document Before Displaying in Angular PDF Viewer
+# Pre process PDF Document Before Displaying in Angular PDF Viewer
This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the Angular PDF Viewer.
@@ -30,7 +30,7 @@ You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer.
### Programmatically Merge PDFs
Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
-```js
+```ts
import { PdfDocument } from '@syncfusion/ej2-pdf';
const document1 = await PdfDocument.load('file1.pdf');
@@ -48,7 +48,7 @@ Using the Viewer's [**Organize Pages**](../../organize-pages/overview) window, u
### Programmatically Extract Pages
-```js
+```ts
import { PdfDocument } from '@syncfusion/ej2-pdf';
const original = await PdfDocument.load('sample.pdf');
@@ -64,7 +64,7 @@ This reduces file size and improves performance when loading large documents.
- Ensures consistent appearance across all devices
### Programmatic Flattening
-```js
+```ts
import { PdfDocument } from '@syncfusion/ej2-pdf';
const doc = await PdfDocument.load('form.pdf');
@@ -75,7 +75,7 @@ const bytes = await doc.save();
### Flatten on Load
-Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
+Use the following code snippet when you want uploaded PDFs to be flattened before they are loaded into the viewer.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -212,7 +212,7 @@ The PDF Viewer toolbar allows users to:
### Programmatically Add a Watermark
-```js
+```ts
import { PdfDocument, PdfGraphics, PdfBrushes } from '@syncfusion/ej2-pdf';
const doc = await PdfDocument.load('input.pdf');
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md
index 3285f4362c..6a4acf9cd7 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md
@@ -1,7 +1,8 @@
---
layout: post
-title: Retrieve the Loaded Document in Angular PDF Viewer | syncfusion
+title: Retrieve the Loaded Document in Angular PDF Viewer | Syncfusion
description: Learn how to access the loaded PDF document instance in the Angular PDF Viewer using ViewChild and the documentLoad event.
+control: PDF Viewer
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
index b3652ed08f..fe941f1163 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/bookmark.md
@@ -54,8 +54,7 @@ import {
[documentPath]="document"
[resourceUrl] = "resource"
[enableBookmark]='true'
- >
- style="height:640px;display:block"
+ style="height:640px;display:block">
`,
encapsulation: ViewEncapsulation.None,
@@ -133,8 +132,7 @@ import {
[documentPath]="document"
[resourceUrl] = "resource"
[enableBookmark]='true'
- >
- style="height:640px;display:block"
+ style="height:640px;display:block">
`,
encapsulation: ViewEncapsulation.None,
@@ -182,7 +180,7 @@ Use the **goToBookmark** method to navigate to a bookmark programmatically. The
The examples below demonstrate using `goToBookmark` and `getBookmarks()`; do not modify code samples unless adapting them for a specific app.
```
-
+
```
```ts
@@ -209,7 +207,7 @@ export class AppComponent implements AfterViewInit {
}
```
-x - Specifies the pageIndex for Navigate.
+x - Specifies the pageIndex for navigate.
y - Specifies the Y coordinates value of the Page.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/hyperlink.md
index f979c7b381..2bbdfbd30a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/hyperlink.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/hyperlink.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Hyperlink navigation in PDF Viewer | Syncfusion
+title: Hyperlink navigation in Angular PDF Viewer | Syncfusion
description: Learn how to configure hyperlink navigation, including table-of-contents entries, in the Syncfusion PDF Viewer control for Angular.
platform: document-processing
control: PDF Viewer
@@ -16,7 +16,7 @@ N> The table of contents pane and hyperlink interactions rely on the same naviga
## Required modules
-Inject the following modules to enable both navigation experiences: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, and optionally `Annotation`.
+Inject the following modules to enable both navigation experiences: `Toolbar`, `Magnification`, `Navigation`, `LinkAnnotation`, `BookmarkView`, `TextSelection`, `ThumbnailView`, `Print`, and optionally `Annotation`.
## Table of contents navigation
@@ -285,6 +285,6 @@ export class AppComponent {
## See also
-- [Bookmark navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/interactive-pdf-navigation/bookmark-navigation/)
-- [Page navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/interactive-pdf-navigation/page-navigation/)
-- [Page thumbnail navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/interactive-pdf-navigation/page-thumbnail-navigation/)
+- [Bookmark navigation](./bookmark)
+- [Page navigation](./page)
+- [Page thumbnail navigation](./page-thumbnail.md)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page-thumbnail.md
index a2822215cf..bfe4512136 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page-thumbnail.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page-thumbnail.md
@@ -18,7 +18,7 @@ Enable or disable thumbnail navigation using the examples below.
{% highlight ts tabtitle="Standalone" %}
import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
+import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, AnnotationService, TextSelectionService,
PrintService
@@ -50,7 +50,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
{% highlight ts tabtitle="Server-Backed" %}
import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
+import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, AnnotationService, TextSelectionService,
PrintService
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page.md
index b7a7abc013..c0bea9e0a2 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/interactive-pdf-navigation/page.md
@@ -16,11 +16,11 @@ The Angular PDF Viewer supports internal and external navigation methods.
The PDF Viewer default toolbar includes the following page navigation options:
-* [**Go to page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to a specified page in the PDF document.
-* [**Show next page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page in the PDF document.
-* [**Show previous page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page in the PDF document.
-* [**Show first page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of the PDF document.
-* [**Show last page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of the PDF document.
+* [**Go to page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation#gotopage):- Navigates to a specified page in the PDF document.
+* [**Show next page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation#gotonextpage):- Navigates to the next page in the PDF document.
+* [**Show previous page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation#gotopreviouspage):- Navigates to the previous page in the PDF document.
+* [**Show first page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation#gotofirstpage):- Navigates to the first page of the PDF document.
+* [**Show last page**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/navigation#gotolastpage):- Navigates to the last page of the PDF document.
```html
@@ -144,7 +144,7 @@ The following examples show how to perform page navigation programmatically.
-
+
@@ -176,7 +176,7 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, Magnifi
`,
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
index dea35fffa0..f6e0418767 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-amazon-s3.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Open PDF files from AWS S3
+# Open PDF files from AWS S3 in Angular PDF Viewer
The Angular PDF Viewer component supports loading PDF files from AWS S3 using either the standalone or the server-backed PDF Viewer. The following sections demonstrate both approaches and include prerequisites and security guidance.
@@ -34,7 +34,7 @@ N> Replace the placeholder values with valid values when testing. Do not embed p
```typescript
AWS.config.update({
- region: '**Your Region**', // Update this your region
+ region: '**Your Region**', // Update this to your region
accessKeyId: '*Your Access Key*', // Update this with your access key id
secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
});
@@ -78,7 +78,7 @@ N> Install the AWS SDK package appropriate for the project. For v2 use `npm inst
## Using the server-backed PDF Viewer
-Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer
+Follow these steps to load a PDF from AWS S3 using the server-backed PDF Viewer.
**Step 1:** Create a Simple PDF Viewer Sample in Angular
@@ -99,9 +99,11 @@ using Amazon.S3;
using Amazon.S3.Model;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields.
```csharp
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string _accessKey;
public readonly string _secretKey;
@@ -166,7 +168,7 @@ public async Task Load([FromBody] Dictionary json
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-active-directory.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-active-directory.md
index 55cf0c0b36..b716fcf16a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-active-directory.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-active-directory.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Open PDF from Azure Active Directory
+# Open PDF from Azure Active Directory in Angular PDF Viewer
### Overview
@@ -86,7 +86,7 @@ This article explains how to load and save PDF files from Azure Active Directory
### Step 6: Client-side configuration
-1. Run the TypeScript Sample:
+1. Run the TypeScript sample:
- Start the Angular sample that includes the Syncfusion® PDF Viewer.
2. Load PDF from AAD:
@@ -257,7 +257,7 @@ export class AppComponent implements OnInit {
};
xhr.send();
} else if (args.item && args.item.id === 'saveToAAD') {
- viewer.serverActionSettings.download = "SaveToAAD";
+ viewer.serverActionSettings.download = "SaveToAAD";
viewer.download();
}
}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
index 266f7907a8..16a84149d6 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-azure-blob-storage.md
@@ -22,7 +22,7 @@ Follow the getting-started guide in this [link](https://help.syncfusion.com/docu
**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
-1. Add the following private properties to the `AppComponent` class, and assign the values from the configuration to the corresponding properties
+1. Add the following private properties to the `AppComponent` class, and assign the values from the configuration to the corresponding properties.
N> Replace **Your account name in Azure** with the Azure storage account name, **Your container name in Azure** with the container name, and **Your Blob name in Azure** with the blob name.
@@ -110,7 +110,7 @@ using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Specialized;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the values from the configuration to the corresponding fields.
```csharp
private readonly string _storageConnectionString;
@@ -161,7 +161,7 @@ public IActionResult Load([FromBody] Dictionary jsonObject)
}
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-box-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-box-cloud-file-storage.md
index ac84dd184e..2d1c9c8078 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-box-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-box-cloud-file-storage.md
@@ -14,7 +14,7 @@ Follow these steps to load a PDF from Box cloud storage using the server-backed
**Step 1:** Set up a Box developer account and create a Box application
-Create a developer account and Box application in the [Box Developer Console](https://developer.box.com/). Note the Client ID and Client Secret. Use OAuth 2.0 to authenticate the application.
+Create a developer account and a Box application in the [Box Developer Console](https://developer.box.com/). Note the Client ID and Client Secret. Use OAuth 2.0 to authenticate the application.
**Step 2:** Create a PDF Viewer sample in Angular
@@ -38,6 +38,8 @@ using Box.V2.Models;
4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign configuration values to the corresponding fields.
```csharp
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string _accessToken;
public readonly string _clientID;
@@ -48,7 +50,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
{
_hostingEnvironment = hostingEnvironment;
_cache = cache;
- _configuration = configuration;
+ _configuration = configuration;
_accessToken = _configuration.GetValue("AccessToken");
_clientID = _configuration.GetValue("ClientID");
_clientSecret = _configuration.GetValue("ClientSecret");
@@ -111,7 +113,7 @@ public async Task Load([FromBody] Dictionary json
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
index 634981e56f..2921ee8980 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-dropbox-cloud-file-storage.md
@@ -8,15 +8,15 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Open PDF from Dropbox cloud storage
+# Open PDF from Dropbox cloud storage in Angular PDF Viewer
The Angular PDF Viewer component supports loading PDF files from Dropbox using either the standalone or the server-backed PDF Viewer. The following steps demonstrate both approaches.
## Using Standalone PDF Viewer
-To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
+To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below.
-**Step 1** Create a Dropbox API
+**Step 1:** Create a Dropbox API
Follow the Dropbox documentation to create an API app: [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). This enables programmatic access with secure credentials.
@@ -67,9 +67,9 @@ N> The **npm install dropbox** package must be installed in the Angular applicat
## Using the server-backed PDF Viewer
-To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
+To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below.
-**Step 1** Create a Dropbox API
+**Step 1:** Create a Dropbox API
To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). This enables programmatic access with secure credentials.
@@ -91,9 +91,11 @@ using Dropbox.Api;
using Dropbox.Api.Files;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the values from the configuration to the corresponding fields.
```csharp
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string _accessToken;
public readonly string _folderName;
@@ -102,7 +104,7 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
{
_hostingEnvironment = hostingEnvironment;
_cache = cache;
- _configuration = configuration;
+ _configuration = configuration;
_accessToken = _configuration.GetValue("AccessToken");
_folderName = _configuration.GetValue("FolderName");
}
@@ -132,7 +134,7 @@ public async Task Load([FromBody] Dictionary json
string fileName = jsonObject["document"];
using (var dropBox = new DropboxClient(_accessToken))
- {
+ {
using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName))
{
var byteArray = await response.GetContentAsByteArrayAsync();
@@ -154,7 +156,7 @@ public async Task Load([FromBody] Dictionary json
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-cloud-storage.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-cloud-storage.md
index abcdd25771..d5db59ce26 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-cloud-storage.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-cloud-storage.md
@@ -18,7 +18,7 @@ Start by following the steps in this guide to create a simple [PDF viewer sample
**Step 2:** Modify the `PdfViewerController.cs` file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. See this background article for the PDF Viewer [web service pattern](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above)
+1. Create a web service project in .NET Core 3.0 or above. See this background article for the PDF Viewer [web service pattern](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -33,9 +33,9 @@ using Google.Apis.Auth.OAuth2;
4. Add the following private fields and constructor parameters to PdfViewerController. In the constructor, assign values from configuration to the corresponding fields.
```csharp
-// Private readonly object _storageClient
private readonly StorageClient _storageClient;
-
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string _bucketName;
@@ -54,9 +54,8 @@ public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache
// Create a storage client with Application Default Credentials
_storageClient = StorageClient.Create(credentials);
- _configuration = configuration;
-
- _bucketName = _configuration.GetValue("BucketName");
+ _configuration = configuration;
+ _bucketName = _configuration.GetValue("BucketName");
}
```
@@ -94,7 +93,7 @@ public IActionResult Load([FromBody] Dictionary jsonObject)
}
```
-6. Open appsettings.json in the web service project and add the following keys below the existing AllowedHosts configuration
+6. Open the `appsettings.json` file in the web service project and add the following keys below the existing `AllowedHosts` configuration.
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-drive.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-drive.md
index 0c6b2fc56b..5a7bff55f3 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-drive.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-google-drive.md
@@ -14,7 +14,7 @@ Follow these steps to load a PDF from Google Drive using the server-backed PDF V
**Step 1:** Set up Google Drive API
-Create a project in the Google Developers Console, enable the Google Drive API, and obtain OAuth 2.0 credentials. See the official guide for [details](https://developers.google.com/drive/api/guides/enable-sdk)
+Create a project in the Google Developers Console, enable the Google Drive API, and obtain OAuth 2.0 credentials. See the official guide for [details](https://developers.google.com/drive/api/guides/enable-sdk).
**Step 2:** Create a simple PDF Viewer sample in Angular
@@ -22,7 +22,7 @@ Start by following the steps in this guide to create a simple [PDF Viewer sample
**Step 3:** Modify the PdfViewerController.cs file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. For background on the PDF Viewer [web service pattern](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above)
+1. Create a web service project in .NET Core 3.0 or above. For background on the PDF Viewer web service pattern, see this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -37,6 +37,8 @@ using Google.Apis.Util.Store;
4. Add the following private fields and constructor parameters to PdfViewerController. In the constructor, assign values from configuration to the corresponding fields.
```csharp
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string folderId;
public readonly string applicationName;
@@ -125,7 +127,7 @@ public async Task Load([FromBody] Dictionary json
}
```
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
+6. Open the `appsettings.json` file in your web service project. Add the following lines below the existing `"AllowedHosts"` configuration
```json
{
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-one-drive.md b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-one-drive.md
index b238d6fcf0..b42fa1609a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-one-drive.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/open-pdf-file/from-one-drive.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Open PDF files from One Drive in Angular PDF Viewer Component | Syncfusion
+title: Open PDF files from One Drive in Angular PDF Viewer | Syncfusion
description: Learn here all about how to Open PDF files from One Drive in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Open PDF files from One Drive
@@ -8,13 +8,13 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Open PDF from OneDrive
+# Open PDF from OneDrive in Angular PDF Viewer
Follow these steps to load a PDF from OneDrive using the server-backed PDF Viewer.
**Step 1:** Create a Microsoft Graph API application
-Create a Microsoft Graph API application and obtain the application ID and tenant ID. Follow this [guide](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive)
+Create a Microsoft Graph API application and obtain the application ID and tenant ID. Follow this [guide](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive).
**Step 2:** Create a simple PDF Viewer sample in Angular
@@ -22,7 +22,7 @@ Start by following the steps in this guide to create a simple [PDF Viewer sample
**Step 3:** Modify the PdfViewerController.cs file in the web service project
-1. Create a web service project in .NET Core 3.0 or above. For background on the PDF Viewer [web service pattern](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above)
+1. Create a web service project in .NET Core 3.0 or above. For background on the PDF Viewer web service pattern, see this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above).
2. Open the `PdfViewerController.cs` file in your web service project.
@@ -35,9 +35,11 @@ using Microsoft.Identity.Client;
using Helpers;
```
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
+4. Add the following private fields and constructor parameters to the `PdfViewerController` class. In the constructor, assign the values from the configuration to the corresponding fields.
```csharp
+private IWebHostEnvironment _hostingEnvironment;
+private IMemoryCache _cache;
private IConfiguration _configuration;
public readonly string folderName;
public readonly string applicationId;
@@ -114,7 +116,7 @@ public async Task Load([FromBody] Dictionary json
else
{
byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
+ stream = new MemoryStream(bytes);
}
}
jsonResult = pdfviewer.Load(stream, jsonObject);
@@ -123,7 +125,7 @@ public async Task Load([FromBody] Dictionary json
```
-6. Open appsettings.json in the web service project and add the following keys below the existing AllowedHosts configuration
+6. Open the `appsettings.json` file in the web service project and add the following keys below the existing `AllowedHosts` configuration.
```json
{
@@ -135,7 +137,7 @@ public async Task Load([FromBody] Dictionary json
},
"AllowedHosts": "*",
"TenantId": "Your_Tenant_ID",
- "applApplicationIdicationId": "Your_Application_ID",
+ "ApplicationId": "Your_Application_ID",
"FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
}
@@ -175,7 +177,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
}
```
-N> The following NuGet packages are required to use the previous code example
+N> The following NuGet packages are required to use the previous code example:
* **Microsoft.Identity.Client**
* **Microsoft.Graph**
* **Microsoft.Extensions.Configuration**