1016259: Architecture in React PDF Viewer#2442
1016259: Architecture in React PDF Viewer#2442SF4524LogeshKumar wants to merge 7 commits intodevelopmentfrom
Conversation
|
Build Status: INQUEUE 🕒 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INQUEUE 🕒 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
SF4524LogeshKumar
changed the title
| The Syncfusion React PDF Viewer operates on a **hybrid client-server architecture** designed for scalability, performance, and rich interactivity: | ||
|
|
||
| - **Client-side layer**: A responsive React component that handles user interaction, rendering, annotations, and form filling directly in the browser using the PDFium-based rendering engine. The client provides a smooth, zero-latency user experience for common operations like navigation, zooming, and markup. | ||
| - **Server-side layer**: Optional back-end services (via `serviceUrl`) that enable advanced features such as document preprocessing, OCR, form field recognition, digital signatures, secure document streaming, and import/export operations using the Syncfusion PDF Library. |
There was a problem hiding this comment.
Digital signature creation, import/export operations are available in client side too. Server side includes OCR, Document processing such as docx, excel, ppt to pdf conversion, digital signature validation, encrypting and decrypting PDF document.
| - **Client-side layer**: A responsive React component that handles user interaction, rendering, annotations, and form filling directly in the browser using the PDFium-based rendering engine. The client provides a smooth, zero-latency user experience for common operations like navigation, zooming, and markup. | ||
| - **Server-side layer**: Optional back-end services (via `serviceUrl`) that enable advanced features such as document preprocessing, OCR, form field recognition, digital signatures, secure document streaming, and import/export operations using the Syncfusion PDF Library. | ||
|
|
||
| This architecture allows you to use the viewer in a **client-only mode** (perfect for lightweight applications) or with **full server integration** (for enterprise scenarios requiring advanced document processing, security, and compliance). |
There was a problem hiding this comment.
This line is not necessary
|
|
||
| This architecture allows you to use the viewer in a **client-only mode** (perfect for lightweight applications) or with **full server integration** (for enterprise scenarios requiring advanced document processing, security, and compliance). | ||
|
|
||
| This page explains the internal architecture of the viewer, focusing on how major modules collaborate, how documents are parsed and rendered using PDFium, and how data flows across threads and network boundaries. This content is intended for developers and integrators who want to understand the viewer's internal design to make informed decisions about customization, performance tuning, and advanced integrations. |
There was a problem hiding this comment.
This line is not necessary
| This page explains the internal architecture of the viewer, focusing on how major modules collaborate, how documents are parsed and rendered using PDFium, and how data flows across threads and network boundaries. This content is intended for developers and integrators who want to understand the viewer's internal design to make informed decisions about customization, performance tuning, and advanced integrations. | ||
|
|
||
| **Key Technology Stack:** | ||
| - **PDFium**: Google's open-source PDF rendering and manipulation engine used for fast, reliable PDF parsing and rasterization on the client. |
There was a problem hiding this comment.
We use PDFium for PDF to image conversion and text extraction alone
|
|
||
| **Key Technology Stack:** | ||
| - **PDFium**: Google's open-source PDF rendering and manipulation engine used for fast, reliable PDF parsing and rasterization on the client. | ||
| - **Syncfusion PDF Library**: Server-side library for advanced document processing, preprocessing, and export operations. |
There was a problem hiding this comment.
Parsing and Rastering, Embedded Text extraction, Metadata, Annotation, Form fields data.
| **React PDF Viewer** – Expert rendering and interaction | ||
| - Display standards-based PDFs | ||
| - Intuitive navigation and search | ||
| - Annotation and collaboration features |
There was a problem hiding this comment.
We do not have collaboration features
|
|
||
| **Syncfusion PDF Library** – Advanced PDF processing | ||
| - Create and generate PDF documents | ||
| - Convert documents to PDF/A or PDF/X standards |
There was a problem hiding this comment.
We only have PDF/A in server side. Check with server side for PDF/X conformance
| - **Font substitution**: If the PDF references fonts unavailable in the browser, fallback fonts are used. If fallback fonts have different metrics, text positioning becomes misaligned. | ||
| - **Vertical text**: Right-to-left scripts (Arabic, Hebrew) and vertical text (CJK languages) require special handling. | ||
|
|
||
| **Text selection misalignment:** |
There was a problem hiding this comment.
Remove this section
|
|
||
| **System font fallback:** | ||
|
|
||
| When the viewer encounters a referenced font not available in the browser: |
There was a problem hiding this comment.
Need to provide font collection in fallbackcollection
| <link rel="preload" href="/fonts/Helvetica.woff2" as="font"> | ||
| ``` | ||
|
|
||
| 2. **Validate glyph coverage**: Before using a fallback font, verify it covers all glyphs in the PDF. Missing glyphs will render as boxes or boxes. |
There was a problem hiding this comment.
rendered as boxes or empty spaces
3 participants
Description:
Updated Architecture for React PDF Viewer.
Architecture:
Screenshot to confirm the UG follows Diataxis