From df7b1fb53efce6954a6d06b6453573beeadb8a21 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 12:58:31 +0530 Subject: [PATCH 01/16] Updated the add-digital-signature-react.md file --- .../add-digital-signature-react.md | 29 +++++++++---------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/add-digital-signature-react.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/add-digital-signature-react.md index c674d17d1a..7be5e9e168 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/add-digital-signature-react.md +++ b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/add-digital-signature-react.md @@ -9,11 +9,12 @@ documentation: ug # Add Digital Signature to PDF -This section explains how to **add signature fields** using the Syncfusion **React PDF Viewer** and how to apply **digital (PKI) signatures** using the **JavaScript PDF Library**. +Learn how to **add signature fields** with the Syncfusion **React PDF Viewer** and how to apply **digital (PKI) signatures** with the **JavaScript PDF Library**. + N> As instructed by team leads — use the **React 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. @@ -30,7 +31,7 @@ Syncfusion supports a hybrid workflow: 1. Open **Form Designer**. 2. Select **Signature Field**. 3. Click on the document to place the field. -4. Configure Name, Tooltip, Required, etc. +4. Configure **Name**, **Tooltip**, and **Required** as needed. ![Signature annotation toolbar](../../javascript-es6/images/add_sign.png) @@ -50,9 +51,7 @@ viewerRef.current?.formDesignerModule.addFormField('SignatureField', { {% endtabs %} ## Capture Electronic Signature (Draw / Type / Upload) -Users click the field → dialog appears → they can **Draw**, **Type**, or **Upload** a handwritten signature. - -This creates a *visual* signature only (not cryptographically secure). +When the user clicks the field, a dialog appears where they can **Draw**, **Type**, or **Upload** a handwritten signature. The result is a *visual* signature only — it is not cryptographically secure. For a cryptographically secure signature. ## Apply PKI Digital Signature (JavaScript PDF Library) @@ -89,16 +88,16 @@ document.destroy(); N> See the PDF Library [Digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) to know more about Digital Signature in PDF Documents. ## Important Notes -- **Do all form edits first. Sign last.** Any PDF modification *after signing* invalidates the signature. -- Self‑signed PFX will show **Unknown / Untrusted** until added to Trusted Certificates. +- **Complete all form edits before signing.** Any PDF modification after signing invalidates the signature. +- A self‑signed PFX certificate displays as **Unknown / Untrusted** until it is added to the consumer's **Trusted Certificates**. ## Best Practices -- Place signature fields via Viewer for accurate layout. -- Apply PKI signature using PDF Library only. -- Use CMS + SHA‑256 for compatibility. -- Avoid flattening after signing. +- Place signature fields with the Viewer for accurate layout. +- Apply the PKI signature with the PDF Library only. +- Use **CMS** with **SHA‑256** for broad compatibility. +- Avoid flattening the form after signing. ## See Also -- [Validate Digital Signatures](./validate-digital-signatures) -- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field) -- [Signature workflows](./signature-workflow) \ No newline at end of file +- [Validate Digital Signatures](./validate-digital-signatures) — verify an existing digital signature and inspect signer details. +- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field) — configure custom fonts for the signature field appearance. +- [Signature workflows](./signature-workflow) — end-to-end signing and approval workflows. \ No newline at end of file From c56966b8ef1afaeacb55572bfb03a42fc5d5ddcb Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 13:10:52 +0530 Subject: [PATCH 02/16] updated the customize-signature-appearance.md file --- .../customize-signature-appearance.md | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md index 9979ecbe32..d99911cb28 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md +++ b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Signature Appearance in React PDF Viewer | Syncfusion -description: Learn here all about how to customize visible PKI digital signature appearances using the Syncfusion PDF Library. +title: Customize Signature Appearance in PDF Library for React PDF Viewer | Syncfusion +description: Learn how to customize visible PKI digital signature appearances using the Syncfusion PDF Library. platform: document-processing control: PdfViewer documentation: ug @@ -13,11 +13,11 @@ This page explains how to customize the visual appearance of PKI [digital signat ## Overview -When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. Appearance rendering is done by composing signature appearance graphics with the PDF Library and embedding that appearance into the signature field. +When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature), you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. The appearance is rendered by drawing text and images into signature graphics via the PDF Library, then embedding them in the signature field. 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 @@ -25,8 +25,11 @@ For implementation details and exact API usage, check the Syncfusion PDF Library - Text (signer name, signing reason, date, descriptive labels) - Fonts, sizes, and styles - Images (company logo, seal, signature image) -- Layout and bounding box for the visible appearance -- Visible vs invisible signatures +- Layout and bounding box for the visible appearance (page index, x, y, width, and height) + +## Visible vs invisible signatures + +A PKI signature can be applied as either a **visible** signature (with a rendered appearance placed on a page) or an **invisible** signature (with no visual representation). The Syncfusion PDF Library supports both modes; the customization options on this page apply only to visible signatures. ## Guidance @@ -39,12 +42,12 @@ For implementation details and exact API usage, check the Syncfusion PDF Library - Use consistent branding for signature visuals. - Keep appearance elements minimal and readable. -- Avoid including data that might change after signing (dates shown should reflect signing time provided by the TSA when used). +- Avoid including data that might change after signing; when a Time Stamping Authority (TSA) is used, the displayed date should reflect the time provided by the TSA. - When producing legally binding signatures, ensure the PKI signing process and appearance comply with your legal/operational requirements. ## See Also -- [Add Digital Signature](./add-digital-signature-react) -- [Validate Digital Signatures](./validate-digital-signatures) +- [Add Digital Signature in React PDF Viewer](./add-digital-signature-react) +- [Validate Digital Signatures in React PDF Viewer](./validate-digital-signatures) - [Custom fonts for Signature fields](../../how-to/custom-font-signature-field) - [Signature workflows](./signature-workflow) From cea67304b35d487775da12262f23c295b86ed174 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 13:26:31 +0530 Subject: [PATCH 03/16] updated the signature-workflow.md file --- .../react/digital-signature/signature-workflow.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md index b36dce1d4f..727c089bfc 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md +++ b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md @@ -46,7 +46,7 @@ function App() { ); } -ReactDOM.createRoot(document.getElementById('sample')!).render(); +ReactDOM.createRoot(document.getElementById('container')!).render(); {% endraw %} {% endhighlight %} {% endtabs %} @@ -153,7 +153,7 @@ N> To preview visual differences, check the [Invisible Signature](https://docume 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. @@ -187,15 +187,15 @@ To prevent rework, validate the PDF before enabling signatures: ![Reviewer using highlights and comments](../images/highlight-comments.png) - **Approver** – Ensures feedback is addressed and signs when finalized. ![Signature Image](../images/handwritten-sign.png) -- **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and may restrict further edits. +- **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and restrict further edits. -N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make annotations and form fields permanent before the last signature. +N> **Implementation tip:** Use the PDF Library’s `flattenFormFields` / `flattenAnnotations` helpers when saving to make form fields and annotations permanent before the last signature. ### Multi‑signer patterns and iterative approvals - Route the document through a defined **sequence of signers**. - Use [comments and replies](../annotation/comments#add-comments-and-replies) for feedback without altering document content. - For external participants, share only annotation data (XFDF/JSON) when appropriate instead of the full PDF. -- After all signatures, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** to lock the file. +- After all signatures, **[Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** to make the file read-only. N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewer/react/#/bootstrap5/pdfviewer/esigning-pdf-forms) sample that shows two signers filling only their designated fields and finalizing the document. @@ -212,7 +212,7 @@ 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-react) - [Customize Signature Appearance](./customize-signature-appearance) -- [Signature workflows](./signature-workflow) \ No newline at end of file +- [Validate Digital Signatures](./validate-digital-signatures) \ No newline at end of file From 2abf3671ca484b470c9e8a50da01735429b7eb56 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 13:35:56 +0530 Subject: [PATCH 04/16] updated the validate-digital-signatures.md file --- .../validate-digital-signatures.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/validate-digital-signatures.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/validate-digital-signatures.md index cdff8f22e1..5c81b8a3df 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/validate-digital-signatures.md +++ b/Document-Processing/PDF/PDF-Viewer/react/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 **React 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 React 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 React 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. -## Overview (Explanation) +## Overview A **digital signature** is a cryptographic proof embedded in the PDF that allows verifiers to confirm: @@ -22,15 +22,15 @@ A **digital signature** is a cryptographic proof embedded in the PDF that allows - **Timestamp validity** – (If present) the signature was time‑stamped by a trusted TSA at signing time. - **Revocation status** – Whether the signer’s certificate was revoked at or after signing (OCSP/CRL). - 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). +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 **React 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 React UI (badge, toast, side panel). -## How‑to: Validate a digital signature (Client‑side) +## How to: 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,22 +42,22 @@ 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 React 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. - **Prefer timestamp (TSA):** A trusted timestamp improves long‑term validation even if the signer’s cert later expires or is revoked. -- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info. +- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info. ## Troubleshooting -- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save/flatten). Re‑sign as the last step. +- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save or flatten). Re‑sign as the last step. - **Unknown signer** – You are using a **self‑signed** PFX. Import the certificate into the validator’s trust store or use a CA‑issued certificate. - **Algorithm unsupported** – Use CMS/PKCS#7 with SHA‑256 (avoid SHA‑1). - **No revocation info** – Ensure OCSP/CRL endpoints are reachable by the validator or embed revocation data if supported. @@ -65,4 +65,4 @@ After using the PDF Library to obtain validation results (integrity, trust, time ## See also - [Add Digital Signature](./add-digital-signature-react) - [Customize Signature Appearance](./customize-signature-appearance) -- [Signature workflows](./signature-workflow) \ No newline at end of file +- [Signature workflow](./signature-workflow) \ No newline at end of file From 52e085c61def4f761c16ebfcb7efaa3c1ebc89f0 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 13:56:46 +0530 Subject: [PATCH 05/16] updated the bookmark.md file --- .../react/interactive-pdf-navigation/bookmark.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/bookmark.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/bookmark.md index 74a0074602..32c60465b2 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/bookmark.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/bookmark.md @@ -1,7 +1,7 @@ --- layout: post -title: Navigation in React Pdfviewer control | Syncfusion -description: Learn here all about Navigation in Syncfusion React Pdfviewer control of Syncfusion Essential JS 2 and more. +title: Bookmark Navigation in React PDF Viewer control | Syncfusion +description: Learn about bookmark navigation in the Syncfusion React PDF Viewer control of Syncfusion Essential JS 2 and more. platform: document-processing control: PDF Viewer documentation: ug @@ -60,7 +60,7 @@ export default function App() { ### 2. Toggle bookmark view programmatically -Toggle bookmark view programmatically using the [`openBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#openbookmarkpane) and [`closeBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#closebookmarkpane) APIs. +Open or close the bookmark pane programmatically using the [`openBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#openbookmarkpane) and [`closeBookmarkPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#closebookmarkpane) APIs. Call `openBookmarkPane` to show the panel and `closeBookmarkPane` to hide it. Both methods have no return value. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -102,7 +102,7 @@ export default function App() { ### 3. Navigate programmatically -Call [`goToBookmark(x, y)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#gotobookmark) where `x` is the zero-based page index and `y` is the vertical coordinate. +Call [`goToBookmark(pageIndex, y)`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/bookmarkview#gotobookmark) where `pageIndex` is the zero-based page index (so `1` navigates to the second page) and `y` is the vertical coordinate in PDF page space used to position the view. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -121,7 +121,7 @@ export default function App() { } return (
- + Date: Mon, 13 Jul 2026 14:27:44 +0530 Subject: [PATCH 06/16] updated the hyperlink.md file --- .../react/interactive-pdf-navigation/hyperlink.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md index 48b693149f..518266c40f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md @@ -1,24 +1,24 @@ --- layout: post -title: Table of contents navigation in PDF Viewer | Syncfusion -description: Learn how to navigate PDFs using the table of contents in the Syncfusion PDF Viewer control for React. +title: Hyperlink navigation in React PDF Viewer | Syncfusion +description: Learn how to configure hyperlink behavior in the Syncfusion React PDF Viewer control. platform: document-processing control: PDF Viewer documentation: ug domainurl: ##DomainURL## --- -# Table of contents navigation in PDF Viewer +# Hyperlink navigation in React PDF Viewer -## Overview: +## Overview -This guide shows how to configure hyperlink behavior in the React PDF Viewer: enable/disable links, control how links open, and handle hyperlink events. +This guide shows how to configure hyperlink behavior in the React PDF Viewer: enable or disable links, control how links open, and handle hyperlink events. To use these features, ensure the [`@syncfusion/ej2-react-pdfviewer`](https://www.npmjs.com/package/@syncfusion/ej2-react-pdfviewer) package is installed and the `LinkAnnotation` service is included in the `Inject` block in every example below. ## Steps ### 1. Enable or disable hyperlink interaction -By default hyperlinks are enabled. Set the [`enableHyperlink`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablehyperlink) property to `false` to make links non-interactive. +By default, [`enableHyperlink={true}`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablehyperlink) is set on the [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer), so links are interactive. Set the property to `false` to make links non-interactive. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -58,7 +58,7 @@ export default function App() { ### 2. Control how links open -Use the [`hyperlinkOpenState`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkopenstate) property to choose whether external links open in the current tab or a new tab or in a whole new window. +Use the [`hyperlinkOpenState`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#hyperlinkopenstate) property to choose whether external links open in the current tab, a new tab, or a new window. The allowed values are `CurrentTab` (default), `NewTab`, and `NewWindow`. {% tabs %} {% highlight ts tabtitle="App.tsx" %} From ad91e34578ab85fe4cf7a1d47edfa8a98bccfa11 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 15:02:33 +0530 Subject: [PATCH 07/16] updated interactive-pdf-navigation/overview.md file --- .../interactive-pdf-navigation/overview.md | 55 ++++++++++--------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md index c5bf06abef..2b80490f4e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Navigation in React PDF Viewer | Syncfusion -description: Learn about the various navigation options available in the Syncfusion React PDF Viewer component and more. +description: Learn about the various navigation options available in the Syncfusion React PDF Viewer component, including page, bookmark, hyperlink, and thumbnail navigation. platform: document-processing control: PDF Viewer documentation: ug @@ -14,44 +14,47 @@ The [React PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/react-pdf-viewe ## Overview -The React PDF Viewer supports several types of navigation: +The React PDF Viewer supports several types of navigation. Each type is enabled by injecting the corresponding feature module and setting the matching property on the `PdfViewerComponent`. -| Navigation Type | Description | -|----------------|-------------| -| [Page Navigation](./page) | Navigate between pages using toolbar buttons or programmatic APIs | -| [Bookmark Navigation](./bookmark) | Navigate using document bookmarks | -| [Hyperlink Navigation](./hyperlink) | Handle internal and external hyperlinks | -| [Page Thumbnail Navigation](./page-thumbnail) | Navigate using thumbnail previews of pages | +| Navigation Type | Module to inject | Property to enable | Description | +|----------------|------------------|--------------------|-------------| +| [Page Navigation](./page) | `Navigation` | `enableNavigation` | Navigate between pages using toolbar buttons or via the navigation API | +| [Bookmark Navigation](./bookmark) | `BookmarkView` | `enableBookmark` | Navigate using bookmarks authored in the PDF | +| [Hyperlink Navigation](./hyperlink) | `LinkAnnotation` | `enableHyperlink` | Handle internal and external hyperlinks | +| [Page Thumbnail Navigation](./page-thumbnail) | `ThumbnailView` | `enableThumbnail` | Navigate using thumbnail previews of pages | ## Quick Links -### [Page Navigation](./page) -Learn how to enable page navigation and use programmatic APIs to navigate to specific pages. +### Page Navigation +See [Page Navigation](./page) for details. -- Enable/disable navigation via toolbar -- Navigate to first, last, next, previous, or specific pages -- Programmatic navigation methods +- Enable page navigation with the `enableNavigation` property +- Navigate to first, last, next, previous, or a specific page +- Use programmatic navigation methods such as `goToPage`, `goToFirstPage`, `goToLastPage`, `goToNextPage`, and `goToPreviousPage` -### [Bookmark Navigation](./bookmark) -Enable and use bookmark navigation for PDFs that contain bookmarks. +### Bookmark Navigation +See [Bookmark Navigation](./bookmark) for details. Bookmarks must be authored in the PDF; the viewer does not generate them. -- Enable bookmark panel +- Enable the bookmark panel with the `enableBookmark` property - Navigate programmatically using `goToBookmark` -- Retrieve bookmark list using `getBookmarks` +- Retrieve the bookmark list using `getBookmarks` +- Handle the `bookmarkClick` event to respond to user selection -### [Hyperlink Navigation](./hyperlink) -Configure hyperlink behavior and handle hyperlink events. +### Hyperlink Navigation +See [Hyperlink Navigation](./hyperlink) for details. Register `hyperlinkClick` and `hyperlinkMouseOver` handlers on the `PdfViewerComponent` to react to link interactions. -- Enable/disable hyperlinks +- Enable hyperlinks with the `enableHyperlink` property - Control how links open (current tab or new tab) -- Handle hyperlink click and mouseover events +- Handle the `hyperlinkClick` and `hyperlinkMouseOver` events; the event argument exposes fields such as `hyperlink`, `page`, and `isTouched` -### [Page Thumbnail Navigation](./page-thumbnail) -Use page thumbnails for quick document navigation. +### Page Thumbnail Navigation +See [Page Thumbnail Navigation](./page-thumbnail) for details. A document must be loaded before thumbnail APIs are used. + +- Enable the thumbnail panel with the `enableThumbnail` property +- Open or close the thumbnail panel programmatically using `openThumbnailPane()` and `closeThumbnailPane()` +- Navigate by clicking a thumbnail +- Handle the `thumbnailClick` event to respond to thumbnail selection -- Enable thumbnail view -- Open/close thumbnail pane programmatically -- Navigate by clicking thumbnails ## Related Topics From 83f01fce9bce7291beb071cf5dc4ced821d59799 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 15:18:33 +0530 Subject: [PATCH 08/16] updated page-thumbnail.md file --- .../page-thumbnail.md | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page-thumbnail.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page-thumbnail.md index 97d3469335..982e9054e0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page-thumbnail.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page-thumbnail.md @@ -14,13 +14,14 @@ domainurl: ##DomainURL## Page thumbnails are miniature previews of PDF pages displayed in a side panel. They allow users to quickly navigate to specific pages without scrolling through the entire document. -This guide explains how to enable the thumbnail navigation feature and to toggle thumbnail view programmatically in the React PDF Viewer component. When enabled, a thumbnails panel appears in the viewer, displaying small previews of each page. +This guide explains how to enable the thumbnail navigation feature and to toggle the thumbnail view programmatically in the React PDF Viewer component. When enabled, a thumbnails panel appears in the viewer, displaying small previews of each page. You can also open or close the panel on demand using the [`openThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#openthumbnailpane) and [`closeThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#closethumbnailpane) methods. + ## Steps ### 1. Enable thumbnail view -Enable or disable the thumbnail view by using [`enableThumbnail`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablethumbnail) API. +Enable or disable the thumbnail view by using the [`enableThumbnail`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablethumbnail) property. The default value of `enableThumbnail` is `true`, so thumbnails are available out of the box once the `ThumbnailView` module is injected. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -58,13 +59,17 @@ export default function App() { {% endhighlight %} {% endtabs %} -**Expected Output:** When [`enableThumbnail`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablethumbnail) is set to `true`, a thumbnail panel can be opened through the navigation toolbar on the left side of the PDF Viewer which displays miniature previews of each page. Clicking on any thumbnail navigates directly to that page. To disable thumbnail navigation, set `enableThumbnail={false}` or simply remove the property. +#### Expected output + +When [`enableThumbnail`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablethumbnail) is set to `true`, a thumbnail panel can be opened through the navigation toolbar on the left side of the PDF Viewer, which displays miniature previews of each page. Clicking on any thumbnail navigates directly to that page. To disable thumbnail navigation, set `enableThumbnail={false}` or simply remove the property. ![Page thumbnails panel in the PDF Viewer](../images/thumbnail.png) ### 2. Open or close thumbnail view programmatically -The thumbnail view in the React PDF Viewer can be opened by using the [`openThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#openthumbnailpane) and closed by using the [`closeThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#closethumbnailpane) APIs +The thumbnail view in the React PDF Viewer can be opened by using the [`openThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#openthumbnailpane) method and closed by using the [`closeThumbnailPane`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview#closethumbnailpane) method. Both methods return `void` and can be called on the `thumbnailView` instance of the viewer reference. + +> The `thumbnailView` property is only available on the viewer instance when the `ThumbnailView` module is included in the `Inject` services array. If the module is not injected, `viewerRef.current?.thumbnailView` will be `undefined`. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -105,6 +110,10 @@ export default function App() { {% endhighlight %} {% endtabs %} +#### Expected output + +Clicking **Open Thumbnail** invokes `openThumbnailPane()`, which expands the thumbnail panel on the left side of the PDF Viewer. Clicking **Close Thumbnail** invokes `closeThumbnailPane()`, which collapses the panel. The buttons are standard HTML elements placed above the viewer inside the same `div` container. + ## Troubleshooting - **Thumbnail panel not appearing**: Ensure [`ThumbnailView`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/thumbnailview) is included in the `Inject` services array. From 9e574c8990f7aef9856e4883428a43f2b7048e35 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 15:30:05 +0530 Subject: [PATCH 09/16] updated page.md file --- .../react/interactive-pdf-navigation/page.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page.md index a8107c723b..d0fa521e7a 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/page.md @@ -14,7 +14,7 @@ This guide explains how to implement page navigation in the React PDF Viewer. Yo ## Enable Page Navigation -To enable or disable page navigation in the PDF Viewer, set the [`enableNavigation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablenavigation) property on the [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer). +Page navigation is enabled by default in the PDF Viewer. When enabled, the default toolbar shows the first, previous, next, and last page controls along with the current page indicator. To toggle this behavior, set the [`enableNavigation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enablenavigation) property (default: `true`) on the [`PdfViewerComponent`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer). {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -58,15 +58,16 @@ export default function App() { The default toolbar of the PDF Viewer provides the following navigation options: -- **Go to page**: Navigates to a specific page of a PDF document. -- **Show next page**: Navigates to the next page of a PDF document. -- **Show previous page**: Navigates to the previous page of a PDF document. -- **Show first page**: Navigates to the first page of a PDF document. -- **Show last page**: Navigates to the last page of a PDF document. +- **Go to first page**: Navigates to the first page in the document. +- **Go to previous page**: Navigates to the page before the current page. +- **Go to next page**: Navigates to the page after the current page. +- **Go to last page**: Navigates to the last page in the document. +- **Current page indicator**: Displays the current page number and total page count, and lets you jump to a specific page. + ## Programmatic Navigation -You can programmatically perform page navigation using the navigation methods available on the navigation module of PDF Viewer instance. +You can programmatically perform page navigation using the methods on the [`navigation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/navigation) module of the PDF Viewer instance. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -128,4 +129,4 @@ When using [`goToPage()`](https://ej2.syncfusion.com/react/documentation/api/pdf ## See also - [Toolbar items](../toolbar-customization/toolbar) -- [Feature Modules](../feature-module) \ No newline at end of file +- [Feature modules](../feature-module) \ No newline at end of file From 4b89ba993f098cad22b4442dd756587cc25c3d8f Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 16:48:22 +0530 Subject: [PATCH 10/16] updated security/overview.md file --- Document-Processing/PDF/PDF-Viewer/react/security/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/overview.md b/Document-Processing/PDF/PDF-Viewer/react/security/overview.md index 0983b7229c..27a52bdca8 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/overview.md @@ -28,7 +28,7 @@ This page provides a concise security overview and recommended controls when usi - Flatten form fields and sanitize form data when publishing public documents. - [Hide or disable viewer UI](./prevent-copy-and-print#3-hidedisable-ui-elements-in-the-viewer) elements for additional UX control. -## Related documents +## See also - [Secure PDf Viewing in React apps](./secure-pdf-viewing) - [Prevent copy/print](./prevent-copy-and-print) From 7b13197274b4607e2ab3109baf4c85690e895a5b Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 17:05:03 +0530 Subject: [PATCH 11/16] updated prevent-copy-and-print.md file --- .../react/security/prevent-copy-and-print.md | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md index a195f7e56a..83dd04f9b3 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/prevent-copy-and-print.md @@ -11,7 +11,7 @@ domainurl: ##DomainURL## # Prevent Copy or Print in React PDF Viewer ## Overview -This guide shows how to prevent users from copying text or printing documents in EJ2 React PDF Viewer. +This guide shows how to prevent users from copying text or printing documents in the Syncfusion React PDF Viewer. **Outcome:** You will learn server-side and client-side options to restrict copy/print with a complete React example. @@ -21,28 +21,30 @@ This guide shows how to prevent users from copying text or printing documents in - Load a PDF that already disallows copy or print functionality itself. The Viewer enforces these permission automatically. -### 2. Pre process restrictions in server-side +#### 2. Pre-process restrictions on the server side - Use Syncfusion PDF Library to set permission flags before sending the file to the client. See the server-side example below. See this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-security#change-the-permission-of-the-pdf-document) for detailed explanations - Disabling print and copy in server-side automatically enforces them in the PDF Viewer. -### 3. Hide/disable UI elements in the viewer +### 3. Hide or disable UI elements in the viewer -- Print, download and copy options can be disabled or hidden in the viewer regardless of the PDF's permissions. -- Print and download options can be hidden in the viewer's primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items). -- Copy option in the context menu can be disabled in the PDF Viewer. See [customize context menu](../context-menu/custom-context-menu). +- Print, download, and copy options can be disabled or hidden in the viewer regardless of the PDF's permissions. +- Use [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) to hide specific items in the primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar#3-show-or-hide-primary-toolbar-items). +- Hide the download option by setting [`enableDownload`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabledownload) to `false`. +- Disable the copy option in the context menu. See [customize context menu](../context-menu/custom-context-menu). -### 4. Disable print programmatically in the viewer +### 4. Disable print via a viewer property -- Set [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) to `false` to disable the print UI even if the PDF allows printing. +- Set [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) to `false` to disable the print UI even if the PDF allows printing. This is a declarative initialization property; for runtime toggling, use the viewer's print module API. ### 5. Disable copy via text-selection UI - Set [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) to `false` to stop text selection and copying through the viewer UI. +- Make sure the corresponding services (`Print`, `TextSelection`) are included in ``; otherwise the property has no effect. **Example:** -The following is a complete React example that demonstrates disabling printing and text selection in the viewer. +The following is a complete React example that demonstrates disabling printing and text selection in the viewer. The example also injects `Print` and `TextSelection` services so the `enablePrint` and `enableTextSelection` properties take effect even when they are set to `false`. {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -76,6 +78,7 @@ export default function App() { - If the Print button still appears: - Confirm [`enablePrint`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enableprint) is set to `false` on `PdfViewerComponent`. + - Confirm the `Print` service is included in ``. - If the PDF explicitly allows printing, prefer server-side removal of print permission. - If text can still be copied: - Confirm [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) is set to `false` and your app isn't adding secondary copy handlers. From bb42f5358a3d9bf3ff1f1f8b34323b2f6206a4e6 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 17:22:46 +0530 Subject: [PATCH 12/16] updated restricting-download-and-print.md file --- .../restricting-download-and-print.md | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md index 1ef4bdb8c7..4a9b4aeeef 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md @@ -14,28 +14,28 @@ domainurl: ##DomainURL## This guide shows how to prevent end users from downloading and printing PDFs displayed by the EJ2 React PDF Viewer. -**Outcome:** The Download and print button are removed from the primary toolbar and any download or print attempt is blocked by the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) and [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event handlers. +**Outcome:** The Download and Print buttons are removed from the primary toolbar, and any download or print attempt (including keyboard shortcuts `Ctrl+S` and `Ctrl+P`) is canceled by the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) and [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event handlers. ## Prerequisites - EJ2 React PDF Viewer installed and basic viewer setup completed. See [getting started guide](../getting-started) ## Steps -### 1. Hide the Download and print button in the primary toolbar +### 1. Hide the Download and Print buttons in the primary toolbar The viewer toolbar items are controlled by [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems). Omit `DownloadOption` and `PrintOption` from that array to remove the Download and print button from the primary toolbar. See [primary toolbar customization](../toolbar-customization/primary-toolbar) for code examples. ### 2. Block download with the `downloadStart` event -The viewer raises the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event whenever a download is initiated. Add an event handler and set `args.cancel = true` to block the operation regardless of how it was triggered (toolbar, API, or custom UI). +The viewer raises the [`downloadStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#downloadstart) event whenever a download is initiated — including from the toolbar, the public `download()` API, custom UI, or the `Ctrl+S` keyboard shortcut. Add an event handler and set `args.cancel = true` to block the operation. See the [`downloadStart` event reference](../events#downloadstart) for full event-argument details. ### 3. Block print with the `printStart` event -The viewer triggers the [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event whenever a print action is initiated. Attach an event handler to the event and set `args.cancel = true` to block the operation regardless of how it was triggered. +The viewer triggers the [`printStart`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#printstart) event whenever a print action is initiated — including from the toolbar, the public `print()` API, custom UI, or the `Ctrl+P` keyboard shortcut. Attach an event handler and set `args.cancel = true` to block the operation. See the [`printStart` event reference](../events#printstart) for full event-argument details. **Complete Example**: -The following is a complete, runnable React example that cancels every download or print attempt. +The following is a complete, runnable React example that hides the Download and Print buttons and cancels every download or print attempt. It assumes the `Toolbar` and `Print` services are injected (as shown below). {% tabs %} {% highlight ts tabtitle="App.tsx" %} @@ -43,16 +43,16 @@ The following is a complete, runnable React example that cancels every download import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, - PageOrganizer, Inject, Print + PageOrganizer, Inject, Print, DownloadStartEventArgs, PrintStartEventArgs } from '@syncfusion/ej2-react-pdfviewer'; export default function App() { - const onDownloadStart = (args: any) => { + const onDownloadStart = (args: DownloadStartEventArgs) => { // Cancels every download attempt args.cancel = true; console.log('Download restricted.'); }; - const onPrintStart = (args: any) => { + const onPrintStart = (args: PrintStartEventArgs) => { // Cancels every print attempt args.cancel = true; console.log('Print restricted.'); @@ -79,7 +79,9 @@ export default function App() { **Expected result**: -- Any programmatic or UI-triggered download attempts are canceled by the `downloadStart` handler; no file is downloaded. +- The Download and Print buttons no longer appear in the primary toolbar because `DownloadOption` and `PrintOption` are omitted from `toolbarSettings.toolbarItems`. +- Any programmatic or UI-triggered download attempt is canceled by the `downloadStart` handler; no file is downloaded. +- Any programmatic or UI-triggered print attempt is canceled by the `printStart` handler; no print dialog is shown. ## Troubleshooting From f14aaabb371de32791bb61e4069445af3494642e Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Mon, 13 Jul 2026 17:31:52 +0530 Subject: [PATCH 13/16] updated secure-pdf-viewing.md file --- .../PDF-Viewer/react/security/secure-pdf-viewing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md index ec78e82e2e..22535f47ae 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md @@ -24,21 +24,21 @@ This page explains best practices for securing PDF content displayed in React ap This section outlines common security controls and how they interact with the viewer. -- **Password protection**: Use user/owner passwords on PDFs. The viewer can open password-protected files when the password is provided at load time. Password-based encryption prevents opening without credentials. See [loading password protected PDFs](../document-handling/load-password-pdf) and [encrypting PDF documents](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-security). +- **Password protection**: Use user/owner passwords on PDFs. The viewer can open password-protected files only when the password is provided at load time. Password-based encryption prevents opening without credentials. See [loading password protected PDFs](../document-handling/load-password-pdf) and [encrypting PDF documents](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-security). -- **Permission restrictions**: Set PDF permissions (copy, print) using Syncfusion PDF library. The viewer respects these permissions at display time but cannot enforce protections if the client receives an unprotected full file. See [prevent copy and print permissions](./prevent-copy-and-print) +- **Permission restrictions**: Set PDF permissions (copy, print) using Syncfusion PDF library. The viewer respects these permissions at display time but cannot enforce protections if the client receives an unprotected full file. See [prevent copy or print](./prevent-copy-and-print) -- **Redaction**: Permanently remove text, images, or regions at the document level on the server before delivering the file. Redaction produces a new PDF with the sensitive content removed. See [redacting sensitive content](../Redaction/overview) +- **Redaction**: Permanently remove text, images, or regions at the document level on the server before delivering the file. See [redacting sensitive content](../Redaction/overview) - **Preprocessing**: On the server, remove metadata, embedded files, hidden layers, form field values, JavaScript actions, and flatten form fields. Compress and linearize PDFs if needed. See [preprocessing PDFs](../document-handling/preprocess-pdf) ## Design decisions and trade-offs -- Client vs server enforcement: Client-side settings which disable disabling print in the viewer improve user experience but are not a security boundary. True protection requires server-side changes which actually enforces the restrictions (encryption, permissions, redaction). +- Client vs server enforcement: Client-side settings that disable print in the viewer improve user experience but are not a security boundary. True protection requires server-side changes that actually enforce the restrictions (encryption, permissions, redaction). -- Usability vs security: Strong encryption and sanitizing heavily can break some workflows (search, form interactivity). Choose operations appropriate to the document life cycle. +- Usability vs. security: Heavy sanitization and strong encryption can break some workflows (search, form interactivity). Choose operations appropriate to the document life cycle. -- Redaction permanence: Redaction is irreversible; keep originals securely archived if needed for audit. +- Redaction irreversibility: Redaction is irreversible, so keep originals securely archived if needed for audit. ## Best practices From 35386d249580b54eccd7632c1f4ccaeff3e16525 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 09:30:17 +0530 Subject: [PATCH 14/16] Resolve CI errors --- .../react/digital-signature/customize-signature-appearance.md | 4 ++-- .../PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md | 2 +- .../PDF-Viewer/react/interactive-pdf-navigation/overview.md | 2 +- .../PDF/PDF-Viewer/react/security/secure-pdf-viewing.md | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md index d99911cb28..33f89e4f00 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md +++ b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/customize-signature-appearance.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Signature Appearance in PDF Library for React PDF Viewer | Syncfusion -description: Learn how to customize visible PKI digital signature appearances using the Syncfusion PDF Library. +title: Customize Signature Appearance in React PDF Viewer | Syncfusion +description: Learn how to customize the appearance of visible PKI digital signatures in PDFs using the Syncfusion PDF Library for React applications. platform: document-processing control: PdfViewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md index 518266c40f..c7dd37e17f 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/hyperlink.md @@ -1,7 +1,7 @@ --- layout: post title: Hyperlink navigation in React PDF Viewer | Syncfusion -description: Learn how to configure hyperlink behavior in the Syncfusion React PDF Viewer control. +description: Learn how to configure hyperlink behavior in the Syncfusion React PDF Viewer, including navigation settings and link interaction options. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md index 2b80490f4e..8f66c03ad1 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/react/interactive-pdf-navigation/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Navigation in React PDF Viewer | Syncfusion -description: Learn about the various navigation options available in the Syncfusion React PDF Viewer component, including page, bookmark, hyperlink, and thumbnail navigation. +description: Learn about page, bookmark, hyperlink, and thumbnail navigation options in the Syncfusion React PDF Viewer for seamless PDF browsing. platform: document-processing control: PDF Viewer documentation: ug diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md index 22535f47ae..203eaae7e0 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/secure-pdf-viewing.md @@ -36,9 +36,9 @@ This section outlines common security controls and how they interact with the vi - Client vs server enforcement: Client-side settings that disable print in the viewer improve user experience but are not a security boundary. True protection requires server-side changes that actually enforce the restrictions (encryption, permissions, redaction). -- Usability vs. security: Heavy sanitization and strong encryption can break some workflows (search, form interactivity). Choose operations appropriate to the document life cycle. +- Usability vs. security: Heavy sanitize and strong encryption can break some workflows (search, form interactivity). Choose operations appropriate to the document life cycle. -- Redaction irreversibility: Redaction is irreversible, so keep originals securely archived if needed for audit. +- irreversible Redaction: Redaction is irreversible, so keep originals securely archived if needed for audit. ## Best practices From 7f0b7d32184f8a67c5d72792c29af5402c6a11e6 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 15 Jul 2026 13:28:19 +0530 Subject: [PATCH 15/16] EJ2-1040486-Resolved the feedback --- .../PDF-Viewer/react/digital-signature/signature-workflow.md | 2 +- .../PDF-Viewer/react/security/restricting-download-and-print.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md index 727c089bfc..1ec180c7a5 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md +++ b/Document-Processing/PDF/PDF-Viewer/react/digital-signature/signature-workflow.md @@ -189,7 +189,7 @@ To prevent rework, validate the PDF before enabling signatures: ![Signature Image](../images/handwritten-sign.png) - **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and restrict further edits. -N> **Implementation tip:** Use the PDF Library’s `flattenFormFields` / `flattenAnnotations` helpers when saving to make form fields and annotations permanent before the last signature. +N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make [annotations](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/annotations#flatten-annotation) and [form fields](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/formfields#flattening-form-fields-in-a-pdf) permanent before the last signature. ### Multi‑signer patterns and iterative approvals - Route the document through a defined **sequence of signers**. diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md index 4a9b4aeeef..80beecc79e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md @@ -43,7 +43,7 @@ The following is a complete, runnable React example that hides the Download and import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, - PageOrganizer, Inject, Print, DownloadStartEventArgs, PrintStartEventArgs + PageOrganizer, Inject, Print, DownloadStartEventArgs } from '@syncfusion/ej2-react-pdfviewer'; export default function App() { From 5234d5fb1e37df24d9b11245e00b78404b7d4e7e Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Wed, 15 Jul 2026 15:26:03 +0530 Subject: [PATCH 16/16] Updated the feedback changes --- .../PDF-Viewer/react/security/restricting-download-and-print.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md index 80beecc79e..4a9b4aeeef 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md +++ b/Document-Processing/PDF/PDF-Viewer/react/security/restricting-download-and-print.md @@ -43,7 +43,7 @@ The following is a complete, runnable React example that hides the Download and import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, - PageOrganizer, Inject, Print, DownloadStartEventArgs + PageOrganizer, Inject, Print, DownloadStartEventArgs, PrintStartEventArgs } from '@syncfusion/ej2-react-pdfviewer'; export default function App() {