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 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..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 React PDF Viewer | Syncfusion -description: Learn here all about how to customize visible PKI digital signature appearances using the Syncfusion PDF Library. +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 @@ -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) 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..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 @@ -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 `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**. - 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 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 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 (
- + 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. 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 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) 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. 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 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..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 @@ -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 sanitize 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. +- irreversible Redaction: Redaction is irreversible, so keep originals securely archived if needed for audit. ## Best practices