932599: Updated Sample to standalone and perform OCR in server

Author: SF4524LogeshKumar

How to/Perform OCR before loading the document/Angular Client/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import {
   LinkAnnotationService,
   BookmarkViewService,
@@ -18,9 +19,10 @@ import {
   selector: 'app-root',
   template: `
     <div class="content-wrapper">
+      <button (click)="performOCR()">Perform OCR</button>
       <ejs-pdfviewer 
         id="pdfViewer"
-        [serviceUrl]="serviceUrl"
+        [resourceUrl]="resource"
         [documentPath]="document"
         style="height: 640px; display: block;">
       </ejs-pdfviewer>
@@ -42,9 +44,49 @@ import {
   ]
 })
 export class AppComponent implements OnInit {
-  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-  public serviceUrl: string ='https://localhost:44309/pdfviewer';
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; // Initial PDF file URL
+  public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib"; // Syncfusion library URL
 
-  ngOnInit(): void { }
+  constructor(private http: HttpClient) {}
 
+  ngOnInit(): void {}
+
+  performOCR() {
+    // Fetch the PDF file as a Blob
+    this.http.get(this.document, { responseType: 'blob' }).subscribe((pdfBlob) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        let base64PDF = reader.result as string;
+
+        // Remove the prefix if it exists (e.g., data:application/pdf;base64,)
+        if (base64PDF.startsWith('data:application/pdf;base64,')) {
+          base64PDF = base64PDF.substring('data:application/pdf;base64,'.length);
+        }
+
+        // Construct the body to match the Dictionary<string, string> on the server
+        const body = {
+          documentBase64: base64PDF
+        };
+
+        // Send the Base64 PDF to the server to perform OCR
+        this.http.post('https://localhost:44309/pdfviewer/PerformOCR', body, { responseType: 'text' })
+          .subscribe({
+            next: (response: string) => {
+              // Handle the server response (processed PDF in Base64 format)
+              this.document = response;
+            },
+            error: (err: any) => {
+              // Handle any errors
+              console.error('OCR processing failed', err);
+            },
+            complete: () => {
+              console.log('OCR processing complete');
+            }
+          });
+      };
+
+      // Read the PDF Blob as a Base64 string
+      reader.readAsDataURL(pdfBlob);
+    });
+  }
 }

How to/Perform OCR before loading the document/Angular Client/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {
   TextSelectionService,
   PrintService
 } from '@syncfusion/ej2-angular-pdfviewer';
+import { HttpClientModule } from '@angular/common/http'; // Import HttpClientModule
 import { AppComponent } from './app.component';
 
 @NgModule({
@@ -20,17 +21,20 @@ import { AppComponent } from './app.component';
   ],
   imports: [
     BrowserModule,
-    PdfViewerModule
+    PdfViewerModule,
+    HttpClientModule  // Add HttpClientModule here
   ],
-  providers: [LinkAnnotationService,
+  providers: [
+    LinkAnnotationService,
     BookmarkViewService,
     MagnificationService,
     ThumbnailViewService,
     ToolbarService,
     NavigationService,
     TextSearchService,
     TextSelectionService,
-    PrintService],
+    PrintService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }