How to Implement OCR for Document Viewing in Angular PDF Viewer?

7 mins read

Description:

This article explains how to perform Optical Character Recognition (OCR) on a PDF document after loading it into the Angular PDF Viewer. It outlines the steps to apply OCR to image-based PDFs, making the text in the document searchable and selectable in the viewer, even if the document was originally a scanned image.

Solution:

To achieve this, we use the OCRProcessor to process the document and convert the image-based text into selectable text. After the OCR process is completed, the resulting PDF is saved and loaded into the PDF Viewer, allowing users to interact with the document’s text. This process ensures that scanned documents are fully functional for text selection and searching in the viewer.

Prerequisites:

Before diving into the implementation, ensure that the following steps are completed:

Syncfusion PDF Viewer Setup: Make sure the Syncfusion PDF Viewer is installed and set up in your Angular project. Follow the Getting Started with Syncfusion PDF Viewer for Angular guide if you haven’t already.
Basic Knowledge of Angular: Familiarity with Angular components and the basic setup of Angular projects will help you follow along with the implementation.

Code Snippets

Client Side

app.component.ts

Use the following code on Client Side to send a request to Server to perform OCR

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  FormFieldsService,
  FormDesignerService,
  PrintService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <button (click)="performOCR()">Perform OCR</button>
      <ejs-pdfviewer 
        id="pdfViewer"
        [resourceUrl]="resource"
        [documentPath]="document"
        style="height: 640px; display: block;">
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    FormFieldsService,
    FormDesignerService,
    PrintService
  ]
})
export class AppComponent implements OnInit {
  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

  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);
    });
  }
}

Server Side

Use the following code in server-side to perform OCR and load the document into the PDF Viewer

[HttpPost("PerformOCR")]
        /*        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]*/
        [Route("[controller]/PerformOCR")]
        //Post action for downloading the PDF documents
        public IActionResult PerformOCR([FromBody] Dictionary<string, string> jsonObject)
        {
            //Initialize the PDF Viewer object with memory cache object
            PdfRenderer pdfviewer = new PdfRenderer(_cache);
            // Get the Base64 string of the PDF document from the request body
            string documentBase = jsonObject["documentBase64"];
            byte[] bytes = Convert.FromBase64String(documentBase);
            MemoryStream ms = new MemoryStream(bytes);
            PdfLoadedDocument loadedDocument = new PdfLoadedDocument(ms);

            //Initialize the OCR processor
            using (OCRProcessor processor = new OCRProcessor())
            {
                //Language to process the OCR
                processor.Settings.Language = Languages.English;

                //Process OCR by providing the PDF document.
                processor.PerformOCR(loadedDocument);
            }

            //Saving the PDF to the MemoryStream
            MemoryStream stream = new MemoryStream();
            loadedDocument.Save(stream);

            //Close the PDF document 
            loadedDocument.Close(true);

            //Set the position as '0'
            stream.Position = 0;

            string updatedDocumentBase = Convert.ToBase64String(stream.ToArray());
            return (Content("data:application/pdf;base64," + updatedDocumentBase));
        }

Key Features Used in the Code:

OCRProcessor: This feature is used to perform OCR on image-based PDFs, converting the image text into searchable and selectable text.
PdfLoadedDocument: A class used to load, manipulate, and save PDF documents.
MemoryStream: Used to temporarily store the OCR-processed PDF before loading it into the viewer.

Sample Link:

You can find the full sample in our GitHub repository

Conclusion:

I hope this article helped you learn on how to implement OCR for document viewing in Angular PDF Viewer.
You can refer to Angular PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular PDF Viewer example PDF Viewer example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)