From 3042359619797383bdc811425d464c1e6883d203 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 17 Sep 2025 14:01:53 +0530 Subject: [PATCH] 982719: Point To Pixel Conversion Sample --- .../package.json | 59 ++++++++++ .../public/index.html | 19 +++ .../src/index.css | 7 ++ .../src/index.js | 109 ++++++++++++++++++ 4 files changed, 194 insertions(+) create mode 100644 How to/Point-to-Pixel Conversion for findText API/package.json create mode 100644 How to/Point-to-Pixel Conversion for findText API/public/index.html create mode 100644 How to/Point-to-Pixel Conversion for findText API/src/index.css create mode 100644 How to/Point-to-Pixel Conversion for findText API/src/index.js diff --git a/How to/Point-to-Pixel Conversion for findText API/package.json b/How to/Point-to-Pixel Conversion for findText API/package.json new file mode 100644 index 0000000..51bdf2c --- /dev/null +++ b/How to/Point-to-Pixel Conversion for findText API/package.json @@ -0,0 +1,59 @@ +{ + "name": "objyjnmw--run", + "version": "0.0.0", + "private": true, + "dependencies": { + "react": "18.1.0", + "react-dom": "18.1.0", + "awesome-typescript-loader": "3.4.1", + "typescript": "3.9.10", + "source-map-loader": "0.2.4", + "@syncfusion/ej2-base": "31.1.17", + "@syncfusion/ej2-buttons": "31.1.17", + "@syncfusion/ej2-splitbuttons": "31.1.17", + "@syncfusion/ej2-data": "31.1.17", + "@syncfusion/ej2-dropdowns": "31.1.17", + "@syncfusion/ej2-lists": "31.1.17", + "@syncfusion/ej2-inputs": "31.1.17", + "@syncfusion/ej2-navigations": "31.1.17", + "@syncfusion/ej2-popups": "31.1.17", + "@syncfusion/ej2-notifications": "31.1.17", + "@syncfusion/ej2-drawings": "31.1.17", + "@syncfusion/ej2-inplace-editor": "31.1.17", + "@syncfusion/ej2-calendars": "31.1.17", + "@syncfusion/ej2-richtexteditor": "31.1.17", + "@syncfusion/ej2-filemanager": "31.1.17", + "@syncfusion/ej2-layouts": "31.1.17", + "@syncfusion/ej2-grids": "31.1.17", + "@syncfusion/ej2-pdf-export": "31.1.17", + "@syncfusion/ej2-excel-export": "31.1.17", + "@syncfusion/ej2-compression": "31.1.17", + "@syncfusion/ej2-file-utils": "31.1.17", + "@syncfusion/ej2-pdfviewer": "31.1.17", + "@syncfusion/ej2-react-base": "31.1.17", + "@syncfusion/ej2-react-pdfviewer": "31.1.17", + "@syncfusion/ej2-react-buttons": "31.1.17", + "@syncfusion/ej2-pdf": "31.1.17" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "devDependencies": { + "react-scripts": "latest" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/How to/Point-to-Pixel Conversion for findText API/public/index.html b/How to/Point-to-Pixel Conversion for findText API/public/index.html new file mode 100644 index 0000000..f4ecb36 --- /dev/null +++ b/How to/Point-to-Pixel Conversion for findText API/public/index.html @@ -0,0 +1,19 @@ + + + + Syncfusion React PDF Viewer + + + + + + + + + + +
+
Loading....
+
+ + \ No newline at end of file diff --git a/How to/Point-to-Pixel Conversion for findText API/src/index.css b/How to/Point-to-Pixel Conversion for findText API/src/index.css new file mode 100644 index 0000000..65c70c1 --- /dev/null +++ b/How to/Point-to-Pixel Conversion for findText API/src/index.css @@ -0,0 +1,7 @@ + + + + + + + diff --git a/How to/Point-to-Pixel Conversion for findText API/src/index.js b/How to/Point-to-Pixel Conversion for findText API/src/index.js new file mode 100644 index 0000000..0c066d6 --- /dev/null +++ b/How to/Point-to-Pixel Conversion for findText API/src/index.js @@ -0,0 +1,109 @@ +import { createRoot } from 'react-dom/client'; +import './index.css'; +import * as React from 'react'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + Annotation, + TextSearch, + FormFields, + FormDesigner, + PageOrganizer, + Inject, +} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + const terms = ['book', 'from']; + const pdfViewerRef = React.useRef(null); + + const handleDocumentLoad = () => { + // Check periodically for text extraction to complete + let retryCount = 0; + const maxRetries = 20; // Maximum 10 seconds of checking + + const checkTextReady = () => { + const viewer = pdfViewerRef.current; + const textIsRendered = viewer?.textSearchModule?.isTextRetrieved; + if (textIsRendered) { + if (!viewer) return; + + if (viewer?.textSearchModule) { + const results = viewer.textSearchModule.findText(terms, false); + + for (const key in results) { + for (const match of results[key]) { + if (match.bounds) { + viewer.annotationModule.addAnnotation('Highlight', { + pageNumber: match.pageIndex + 1, + bounds: [ + { + x: (match.bounds[0].x * 96) / 72, + y: (match.bounds[0].y * 96) / 72, + width: (match.bounds[0].width * 96) / 72, + height: (match.bounds[0].height * 96) / 72, + }, + ], + }); + } + } + } + } + } else if (retryCount < maxRetries) { + // If text is not ready yet and we haven't exceeded max retries, check again + retryCount++; + setTimeout(checkTextReady, 500); + } else { + console.warn( + 'Text extraction timeout - giving up after', + maxRetries, + 'attempts' + ); + } + }; + + // Start checking after a brief initial delay + setTimeout(checkTextReady, 200); + }; + + return ( +
+
+ + {/* Inject the required services */} + + +
+
+ ); +} +const root = createRoot(document.getElementById('sample')); +root.render();