SyncfusionExamples · SF4524LogeshKumar · Sep 17, 2025
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
@@ -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
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Syncfusion React PDF Viewer</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Essential JS 2 for React Components" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
+    <script src="systemjs.config.js"></script>
+</head>
+<body style="margin-top: 100px;">
+        <div id='sample'>
+            <div id='loader'>Loading....</div>
+        </div>
+</body>
+</html>
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
@@ -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
@@ -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 (
+    <div>
+      <div className="control-section">
+        <PdfViewerComponent
+          ref={pdfViewerRef}
+          id="container"
+          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+          resourceUrl="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
+          extractTextCompleted={handleDocumentLoad}
+          height="640px"
+        >
+          {/* Inject the required services */}
+          <Inject
+            services={[
+              Toolbar,
+              Magnification,
+              Navigation,
+              Annotation,
+              LinkAnnotation,
+              BookmarkView,
+              ThumbnailView,
+              Print,
+              TextSelection,
+              TextSearch,
+              FormFields,
+              FormDesigner,
+              PageOrganizer,
+            ]}
+          />
+        </PdfViewerComponent>
+      </div>
+    </div>
+  );
+}
+const root = createRoot(document.getElementById('sample'));
+root.render(<App />);