Section:

OCR Showcase Demo Code Sample

Requirements
View Demo
Server SDK
Web SDK
Package: OCR
Module: OCR

Generate searchable PDFs from scanned documents or images using OCR (Optical Character Recognition). The scanned file that contains characters is converted into machine-readable searchable and selectable text as a PDF document.

This sample code includes Server SDK processing in JavaScript, with UI provided by WebViewer. If a viewer is not needed, or you want to work with a different language or framework for the Server SDK, please check out our Server SDK OCR Sample Code.

This demo allows you to:

  • Choose your own PDF or image file
  • Select default documents in various languages: English, French, Spanish, Italian, German, Russian
  • Convert into characters that are selectable and searchable
  • Extract the characters as string

Implementation steps

To add OCR Module capability with Server SDK, and view with WebViewer:

Step 1: Follow get-started in JavaScript for Server SDK
Step 2: Follow get-started in your preferred web stack for WebViewer
Step 3: Download OCR Module
Step 4: Add the ES6 JavaScript sample code provided in this guide

Note: Only the first page is processed in this demo.

Once you generate your license key, it will automatically be included in your sample code below.

License Key

1// ES6 Compliant Syntax
2// GitHub Copilot v1.0 - GPT-4 Model - September 24, 2024
3// File: ocr-module/client/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9function initializeWebViewer() {
10
11  console.log('Initializing WebViewer...');
12  const viewerElement = document.getElementById('viewer');
13  if (!viewerElement) {
14    console.error('❌ Viewer element not found. Please ensure there is a div with id "viewer" in your HTML.');
15    return;
16  }
17
18  WebViewer({
19    path: '/lib',
20    initialDoc: UIElements.demoFilesPath + UIElements.ocrdemofiles['eng'],
21    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
22    enableMeasurement: false,
23    loadAsPDF: true,
24    licenseKey: licenseKey,
25  }, viewerElement).then(instance => {
26
27    // Once the PDF document is loaded, send it to the server.
28    // The sent PDF document will be processed by the server,
29    // by extracting form fields JSON data when the user clicks the "Detect Form Fields" button.
30    instance.Core.documentViewer.addEventListener('documentLoaded', async () => {
31      if (!UIElements.loadingFromList) {
32        UIElements.loadedFromPicker = true;
33        UIElements.loadLabelText = ' Use file picker to load your own file';
34      }
35      
36      // if next time we load from list, this will be set to true again
37      UIElements.loadingFromList = false; 
38      
39      // Customize the main webviewer left panel after loading completes
40      UIElements.customizeUI(instance, performOCR);
41    });
42    console.log('✅ WebViewer loaded successfully.');
43  }).catch((error) => {
44    console.error('Failed to initialize WebViewer:', error);
45  });
46}
47
48// Perform OCR by sending the current PDF page to the server
49const performOCR = async (instance) => {
50  // Reset JSON data
51  UIElements.jsonData = null;
52  let resultText = '';
53
54  // Preparation of the PDF blob to be sent to the server
55  const doc = instance.Core.documentViewer.getDocument();
56  const currentPage = instance.Core.documentViewer.getCurrentPage();
57  const xfdfString = await instance.Core.annotationManager.exportAnnotations(); // obtaining annotations in the loaded document
58  const data = await doc.getFileData({ xfdfString });
59  const arr = new Uint8Array(data);
60  const blob = new Blob([arr], { type: 'application/pdf' });
61  const formData = new FormData();
62  formData.append(doc.filename, blob, doc.filename);
63  // Send the PDF blob to the server for processing
64  new Promise(function (resolve, reject) {
65    console.log('🚀 Sending PDF to server for processing...');
66    fetch(`http://localhost:5050/server/handler.js?filename=${doc.filename}&currentPage=${currentPage}&lang=${UIElements.selectedLanguage}`, {
67      method: 'POST',
68      body: formData,
69    }).then(function (response) {
70
71      if (response.status === 200) {
72        response.text().then(function (json) {
73          UIElements.jsonData = json;
74          const ocrResult = JSON.parse(UIElements.jsonData);
75
76          for (const page of ocrResult.Page) {
77            for (const para of page.Para) {
78              for (const line of para.Line) {
79                for (const word of line.Word) {
80                  resultText += word.text + ' ';
81                }
82                resultText += '\n';
83              }
84            }
85          }
86          resolve();
87        })
88      } else {
89        const errorText = `❌ Server responded with status: ${response.status}`;
90        resultText = errorText + resultText;
91        console.error(resultText);
92        reject(new Error(`Server error: ${response.status}`));
93      }
94    }).catch(function (error) {
95      let errorText = '❌ Failed to connect to server: ' + error;
96      errorText += '\n📍 Attempted URL: http://localhost:5050/server/handler.js';
97      errorText += '\n🔍 This likely means the OCR server is not running on port 5050';
98      console.error(errorText);
99      resultText = errorText + resultText;
100      reject(error);
101    });
102  }).catch(function (error) {
103    const errorText = '❌ Error in PDF upload promise: ' + error;
104    console.error(errorText);
105    resultText = errorText + resultText;
106  }).finally(function () {
107    UIElements.ocrText.textContent = resultText;
108    UIElements.setLoading(instance, false);
109  });
110}
111
112
113function loadUIElementsScript() {
114  return new Promise((resolve, reject) => {
115    if (window.UIElements) {
116      console.log('UIElements already loaded');
117      resolve();
118      return;
119    }
120    
121    const script = document.createElement('script');
122    script.src = '/showcase-demos/ocr-module/client/ui-elements.js';
123    script.onload = function () {
124      console.log('✅ UIElements script loaded successfully');
125      resolve();
126    };
127    script.onerror = function () {
128      console.error('Failed to load UIElements script');
129      reject(new Error('Failed to load ui-elements.js'));
130    };
131    document.head.appendChild(script);
132  });
133}
134
135// Load UIElements script first, then initialize WebViewer
136loadUIElementsScript().then(() => {
137  initializeWebViewer();
138}).catch((error) => {
139  console.error('Failed to load UIElements:', error);
140});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales