How to Build a Browser-Based PDF OCR to Text Converter Using JavaScript
Not every PDF contains searchable or editable text. Many PDFs are simply scanned images of documents such as invoices, contracts, books, receipts, government forms, and handwritten notes.
While these documents are easy to read, copying, searching, or editing their content isn’t possible without additional processing.
This is where Optical Character Recognition (OCR) comes in. OCR recognizes text inside scanned images and converts it into editable, searchable digital text.
In this tutorial, you’ll build a browser-based PDF OCR to Text Converter using JavaScript. Users will be able to upload PDF files, preview pages, configure OCR settings, extract text, monitor processing progress, review OCR confidence scores, and export the results – all directly inside the browser.
Since everything runs locally, uploaded documents never leave the user’s device, making the tool both fast and privacy-friendly.
By the end of this tutorial, you’ll understand how browser-based OCR works and how to build your own PDF-to-text converter using JavaScript.
Table of Contents
Why PDF OCR Is Useful
Many PDF files are scanned documents rather than digital text. Although they look readable, the text is actually stored as images, making it impossible to search, copy, edit, or analyze the content.
OCR (Optical Character Recognition) solves this problem by recognizing characters from scanned pages and converting them into editable, searchable text. Once the text is extracted, it can be copied, translated, indexed, summarized, or imported into other applications.
OCR is widely used across many industries. Businesses use it to process invoices, purchase orders, receipts, contracts, bank statements, and tax documents without manually entering data. Legal professionals use OCR to search agreements, affidavits, and court documents for names, dates, or specific clauses. Government agencies digitize historical records, application forms, passports, and official documents to build searchable digital archives.
Educational institutions convert scanned books, research papers, lecture notes, and examination materials into searchable text, making learning resources easier to access. Healthcare organizations use OCR to digitize prescriptions, laboratory reports, insurance claims, and patient records, reducing paperwork and improving record management.
OCR is also valuable for e-commerce businesses. Sellers handling hundreds of invoices, shipping labels, and purchase orders from platforms such as Amazon, Flipkart, Meesho, or Shopify can quickly extract order numbers, customer details, addresses, and product information instead of typing everything manually.
Developers use OCR when building document management systems, enterprise search tools, AI assistants, and workflow automation platforms where scanned documents need to become searchable digital content.
Since this application performs OCR entirely inside the browser, users can process confidential documents without uploading them to external servers. This keeps document processing fast, private, and secure while making scanned PDFs much more useful.
How PDF OCR Works
A PDF OCR application converts scanned pages into editable text by combining PDF rendering with Optical Character Recognition.
When a user uploads a PDF, the browser first validates the document and loads it into memory. Each page is then rendered as an image using PDF.js. These rendered page images become the input for the OCR engine.
The OCR engine examines every image pixel by pixel. It identifies printed characters, recognizes words and sentences, and reconstructs the document as digital text. Depending on the selected language, the recognition engine applies language-specific dictionaries and character models to improve accuracy.
If the user enables image enhancement, the application can improve the scanned page before recognition. Converting the page to grayscale, increasing contrast, or sharpening the image often helps OCR detect characters more accurately, especially when working with old scans or low-quality photocopies.
As each page is processed, the application updates a progress indicator so users can monitor the extraction process in real time. The OCR engine also returns a confidence score for every page, allowing users to estimate how reliable the recognized text is.
After all selected pages have been processed, the application combines the extracted text into a single document. Users can review the output, copy it directly from the browser, or export it as a TXT or JSON file for further use.
Since every stage of the workflow runs locally, the uploaded PDF never leaves the user’s device. This makes browser-based OCR an excellent solution for sensitive business documents, legal records, healthcare files, financial reports, and government paperwork.
Project Setup
We’ll build the PDF OCR application using standard web technologies.
Create the following project structure.
pdf-ocr-tool/
│── index.html
│── style.css
│── script.js
Next, include the required JavaScript libraries inside index.html.
These libraries provide everything needed to render PDF pages, recognize text, and manage PDF-related operations directly inside the browser.
What Libraries Are We Using?
This project combines several JavaScript libraries because OCR involves multiple processing stages.
The primary library is PDF.js, which loads the uploaded PDF document and renders every page as an image inside the browser. Since OCR engines work with images rather than PDF files directly, rendering each page is the first step of the workflow.
The application uses Tesseract.js to perform Optical Character Recognition. Tesseract is one of the most popular open-source OCR engines and supports dozens of languages, making it possible to recognize printed text from scanned documents without relying on any external API or cloud service.
We also include PDF-lib, which helps manage PDF-related operations and provides additional flexibility if future features such as annotations, metadata editing, or document modifications are added.
Together, these libraries create a complete browser-based OCR solution capable of rendering PDF pages, recognizing printed text, tracking recognition progress, reporting confidence scores, and exporting the extracted text while keeping every document private on the user's device.
Creating the Upload Interface
Every OCR workflow begins with selecting a PDF document. Before the application can recognize any text, it must first load the PDF into the browser and verify that it's a supported file type.
A good upload interface should be simple, intuitive, and accessible for both desktop and mobile users. Supporting drag-and-drop uploads alongside the traditional file picker gives users multiple ways to import their documents.
In this project, the upload section serves as the starting point for the entire OCR workflow. After a PDF is selected, the browser validates the file, reads it into memory, and prepares it for page rendering. Since the application runs completely inside the browser, no document is uploaded to an external server. This ensures confidential PDFs remain private throughout the OCR process.
The upload interface also provides clear instructions so users immediately understand how to begin using the tool.
Here's the HTML for the upload area:
Next, validate the uploaded file before loading it.
const pdfInput = document.getElementById("pdfInput");
pdfInput.addEventListener("change", async (event)=>{
const file = event.target.files[0];
if(!file) return;
if(file.type !== "application/pdf"){
alert("Please upload a valid PDF file.");
return;
}
loadPDF(file);
});
Once the validation succeeds, the PDF is loaded into memory and the application proceeds to generate preview thumbnails for each page.
Previewing Uploaded PDF Pages
After the PDF has been loaded successfully, the application generates page previews.
Instead of immediately starting OCR, users first see thumbnail images for every page in the uploaded document. This allows them to confirm that the correct file has been selected and inspect the document before extraction begins.
The preview stage is especially useful for large PDFs because users can quickly identify scanned pages, blank pages, rotated pages, or incorrect uploads without wasting time running OCR on the wrong document.
PDF.js renders every page as a canvas before displaying it inside the preview grid.
First, load the PDF document.
const pdf = await pdfjsLib.getDocument({
data: await file.arrayBuffer()
}).promise;
Next, render every page.
for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++){
const page = await pdf.getPage(pageNumber);
const viewport = page.getViewport({
scale:0.35
});
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
await page.render({
canvasContext:context,
viewport
}).promise;
previewContainer.appendChild(canvas);
}
Each rendered page becomes a thumbnail, allowing users to scroll through the document before choosing the OCR settings.
This visual confirmation greatly reduces mistakes when processing long reports, contracts, invoices, books, or multi-page scanned documents.
Configuring OCR Settings
Different PDF documents require different OCR configurations. A clean digital scan usually processes very quickly, while old photocopies or low-quality scans often require additional image enhancement to improve recognition accuracy.
Before starting OCR, the application allows users to customize several options that affect how text is extracted.
Users can choose whether OCR should process every page or only a specific page range. This is particularly useful when working with large documents where only a few pages contain important information.
The OCR engine also supports multiple recognition languages. Selecting the correct language helps improve accuracy because Tesseract uses language-specific dictionaries and character models during recognition.
For users who prioritize speed, the Fast mode completes OCR quickly while still producing good results. When working with low-quality scans or official documents, High Accuracy mode performs additional processing to improve recognition quality.
The application also includes optional image enhancement settings. Converting pages to grayscale, increasing contrast, or sharpening the scanned image often improves OCR accuracy by making printed characters easier to recognize.
These configurable options allow the OCR engine to adapt to many different document types without overwhelming users with unnecessary complexity.
The page selection section allows users to process either the entire document or only selected pages.
All Pages
Specific Pages
Users can also choose the OCR language.
Next, configure the OCR accuracy mode.
const mode = document.querySelector(
'input[name="accuracy"]:checked'
).value;
console.log(mode);
Finally, enable optional image enhancement features before OCR begins.
const grayscale = grayscaleCheckbox.checked;
const contrast = contrastCheckbox.checked;
const sharpen = sharpenCheckbox.checked;
console.log(
grayscale,
contrast,
sharpen
);
These settings allow the application to balance processing speed and recognition quality depending on the type of PDF being analyzed.
Improving OCR Accuracy Before Processing
One advantage of browser-based OCR is that the document can be optimized before recognition begins. Small image enhancements often have a significant impact on the quality of the extracted text.
For example, grayscale conversion removes unnecessary color information, allowing the OCR engine to focus only on character shapes. Increasing contrast helps distinguish text from the page background, while sharpening makes blurred letters easier to recognize.
These enhancements are especially valuable when processing old books, photocopies, historical records, receipts, handwritten forms, government documents, engineering drawings, and low-resolution scans.
Choosing the correct OCR language is equally important. A scanned Gujarati document processed using the English language model will usually produce poor recognition results. Selecting the matching language significantly improves OCR accuracy.
Taking a few moments to configure these settings before processing often produces cleaner extracted text, fewer recognition errors, and higher confidence scores, particularly when working with challenging documents.
Once the document has been uploaded, previewed, and the OCR settings have been configured, the application is ready to extract text from the selected pages.
Unlike searchable PDFs that already contain digital text, scanned PDF documents consist entirely of images. OCR works by examining each rendered page image, recognizing every visible character, and converting those characters into editable text.
The extraction process begins by rendering each selected PDF page as an image using PDF.js. Each rendered page is then passed to Tesseract.js, which analyzes the image pixel by pixel and reconstructs words, sentences, paragraphs, and punctuation.
If the user selected a specific page range, only those pages are processed. Otherwise, every page in the document is analyzed.
Because OCR can be computationally intensive, especially for high-resolution scans, the application processes one page at a time. This approach keeps memory usage lower while providing continuous progress updates to the user.
The recognized text from each page is appended to a single output document that can later be reviewed, copied, or exported.
First, create the OCR worker.
const worker = await Tesseract.createWorker(
selectedLanguage
);
Next, loop through the selected pages.
for(let page = startPage; page <= endPage; page++){
await processPage(page);
}
Now perform OCR on the rendered page.
const result = await worker.recognize(
canvas
);
const extractedText = result.data.text;
Append the extracted text to the final output.
finalText +=
`----- Page ${page} -----\n\n`;
finalText += extractedText;
finalText += "\n\n";
Once every page has been processed, terminate the OCR worker.
await worker.terminate();
Processing one page at a time allows users to monitor OCR progress while ensuring stable performance, even for large documents.
Tracking OCR Progress
OCR processing can take anywhere from a few seconds to several minutes depending on the size of the document, image quality, language, and selected accuracy mode.
Providing a progress indicator is important because users can immediately see that the application is actively processing the document instead of appearing frozen.
As each page finishes recognition, the progress bar updates automatically, displaying both the current page number and the overall completion percentage.
For example, a 42-page document may display messages such as "Processing Page 2 of 42" before eventually reaching the final page.
Showing real-time progress improves the overall user experience and makes it easier to estimate the remaining processing time.
The OCR engine reports its progress while recognizing each page.
logger: info => {
console.log(info);
}
Update the progress bar.
progressBar.style.width =
`${percentage}%`;
progressLabel.innerText =
`${percentage}%`;
Display the currently processed page.
status.innerText =
`Processing Page ${currentPage}
of ${totalPages}`;
Once the final page has been processed, the progress bar reaches one hundred percent and the extracted text becomes available for review.
Understanding OCR Confidence Scores
One useful feature of Tesseract.js is that it reports a confidence score for every page that it processes.
The confidence score estimates how accurately the OCR engine recognized the characters contained on a page. Higher confidence generally indicates cleaner scans, sharper text, and fewer recognition errors.
For example, a professionally scanned document with clear printed text may produce confidence scores above ninety-five percent, while older photocopies or blurry mobile phone images may produce lower values.
Displaying confidence scores helps users quickly identify pages that may require manual review or reprocessing.
In this application, every processed page displays its individual OCR confidence score after recognition finishes.
The OCR engine returns the confidence value together with the extracted text.
const confidence =
result.data.confidence;
Store each page's score.
confidenceScores.push({
page: currentPage,
confidence
});
Display the results.
confidenceScores.forEach(score=>{
console.log(
score.page,
score.confidence
);
});
Pages with lower confidence scores may contain faded text, handwritten notes, poor lighting, skewed scans, or low image resolution. Reviewing these pages helps improve the overall quality of the extracted document.
Optimizing OCR Accuracy
Even with a powerful OCR engine, the quality of the original document has a significant impact on the extracted text.
Scanned PDFs with sharp, high-resolution pages usually produce excellent results without additional processing. But documents containing faded printing, uneven lighting, shadows, handwritten annotations, or compression artifacts may require image enhancement before OCR begins.
The application includes several preprocessing options that improve recognition quality.
Grayscale conversion removes unnecessary color information and simplifies the image for the OCR engine. Increasing contrast helps separate text from the background, while sharpening improves character edges that may appear blurry in low-quality scans.
Selecting the correct recognition language is equally important. OCR models are trained for specific languages, so choosing the matching language greatly improves character recognition and reduces spelling mistakes.
Users should also select the appropriate accuracy mode. Fast Mode works well for clean digital scans, while High Accuracy Mode performs additional analysis that produces better results for difficult documents, although it requires more processing time.
Taking a few extra seconds to configure these settings often produces significantly cleaner text, higher confidence scores, and fewer manual corrections after extraction.
Once the OCR process finishes, the application combines the recognized text from every processed page into a single output area.
Instead of immediately downloading the results, users can first review the extracted text directly inside the browser. This provides an opportunity to verify the OCR output, check formatting, identify recognition errors, and ensure that the correct pages were processed.
The extracted text preserves the page sequence by separating the content from each page with a clear page heading. This makes it much easier to navigate large documents such as books, contracts, technical manuals, invoices, government records, and research papers.
For searchable PDFs, the extracted text is usually very accurate. For scanned documents, users can quickly compare the OCR output with the original page preview and decide whether additional image enhancement or a different OCR language would improve the results.
The application also includes a Copy button so users can instantly copy all extracted text to the clipboard without downloading a file.
First, display the extracted text.
document.getElementById(
"output"
).value = finalText;
Next, implement the copy feature.
async function copyText(){
await navigator.clipboard.writeText(
finalText
);
alert("Text copied successfully.");
}
Attach the event listener.
document.getElementById(
"copyButton"
).addEventListener(
"click",
copyText
);
Providing an in-browser preview allows users to verify OCR quality before exporting the results.
Exporting the OCR Results
After reviewing the extracted content, users can export it in different formats depending on how they intend to use the information.
Plain text files are ideal for editing inside any text editor, importing into word processors, or searching with desktop applications.
JSON exports are useful for developers building document management systems, AI applications, search engines, automation workflows, or APIs that consume structured OCR results.
Providing multiple export formats makes the OCR tool suitable for both everyday users and software developers.
Creating a downloadable TXT file is straightforward.
const blob = new Blob(
[finalText],
{
type:"text/plain"
}
);
Generate the download link.
const url = URL.createObjectURL(
blob
);
const link = document.createElement(
"a"
);
link.href = url;
link.download = "ocr-output.txt";
link.click();
JSON exports include additional information such as page numbers and confidence scores.
const report = {
text: finalText,
confidence: confidenceScores
};
downloadJSON(report);
These export options allow users to continue working with the extracted text in virtually any application.
Step 1: Upload Your PDF
The OCR workflow begins by uploading a PDF document using either the drag-and-drop area or the file picker.
Once a document has been selected, the browser validates the file format, loads the PDF into memory, and prepares it for page rendering. Since all processing occurs locally, the uploaded file never leaves the user's computer.
Step 2: Preview the Uploaded PDF
After the upload is complete, the application renders thumbnail previews of every page.
This allows users to verify that the correct document has been selected and inspect the page order before running OCR.
Previewing the document is particularly useful when processing large books, reports, legal documents, or scanned archives containing dozens of pages.
Step 3: Configure OCR Settings
Before text extraction begins, users configure the OCR options.
The application allows users to choose all pages or a specific page range, select the OCR language, switch between Fast and High Accuracy modes, and enable optional image enhancement features such as grayscale conversion, contrast improvement, and sharpening.
These settings help improve recognition quality depending on the condition of the scanned document.
Step 4: Start OCR Processing
After reviewing the settings, users click the Extract Text button.
The browser begins processing every selected page one by one. During this stage, each rendered page image is analyzed by the OCR engine, which recognizes printed characters and converts them into editable text.
Because OCR runs directly inside the browser, even confidential documents remain completely private throughout the process.
Step 5: Monitor Processing Progress
As OCR runs, the application displays a live progress indicator.
Users can monitor the current page being processed, overall completion percentage, and recognition progress in real time. For large documents, this provides useful feedback and reassures users that the application is actively processing the file.
Step 6: Review OCR Confidence Scores
Once recognition is complete, the application displays confidence scores for every processed page.
These values indicate how accurately the OCR engine recognized each page. Pages with lower confidence scores may contain faded text, skewed scans, or poor image quality and can be reviewed manually if necessary.
Confidence scores provide an additional layer of quality assurance before exporting the extracted text.
After OCR finishes, the complete extracted text appears inside the browser.
Users can scroll through the recognized content, compare it with the original document, and copy the text directly to the clipboard using the built-in Copy button.
This makes it easy to reuse the extracted information immediately without downloading a separate file.
Step 8: Export the Results
Finally, users can export the OCR results.
The application supports downloading the extracted text as a TXT file for general editing or as a JSON file for software development and automation workflows.
After selecting the preferred format, the browser generates the file instantly without uploading any data to external servers.
Performance Optimization Tips
OCR is one of the most computationally intensive operations performed inside a browser. Although modern JavaScript engines and OCR libraries are highly optimized, a few simple techniques can significantly improve performance.
Before processing begins, render PDF pages at an appropriate resolution. Extremely high-resolution images increase processing time without always improving recognition accuracy.
const viewport = page.getViewport({
scale:1.5
});
Processing pages sequentially instead of loading every page simultaneously reduces memory consumption for large documents.
for(let page = 1; page <= totalPages; page++){
await processPage(page);
}
Users should enable OCR only when working with scanned PDFs. Searchable PDFs already contain digital text, so OCR simply increases processing time without improving the results.
If the document contains hundreds of pages, allowing users to analyze only a selected page range can significantly reduce processing time.
Using grayscale images instead of full-color pages also improves recognition speed while reducing memory usage.
Whenever possible, choose the OCR language that matches the document. Smaller language models generally process faster and produce more accurate results than attempting recognition with an incorrect language.
Finally, remember to terminate the OCR worker after processing completes to release browser resources.
await worker.terminate();
These small optimizations produce a smoother user experience while making browser-based OCR practical even for large documents.
Important Notes from Real-World Use
OCR accuracy depends heavily on the quality of the original document.
Clean scans with high resolution, good lighting, and sharp printed text usually produce excellent recognition results. Older photocopies, faded documents, handwritten notes, or skewed scans may require image enhancement before OCR begins.
Before processing, always verify that the uploaded file is a valid PDF.
if(file.type !== "application/pdf"){
alert("Please upload a valid PDF.");
return;
}
Selecting the correct OCR language is equally important. Processing a Gujarati document with the English language model will significantly reduce recognition accuracy.
console.log(
"Selected Language:",
selectedLanguage
);
Users should also review OCR confidence scores after processing. Pages with lower confidence values often benefit from rescanning or using image enhancement options.
Because the entire workflow runs locally, browser-based OCR is well suited for confidential business reports, contracts, financial documents, legal records, healthcare files, and government paperwork that should never be uploaded to third-party services.
Common Mistakes to Avoid
One common mistake is enabling OCR for documents that already contain selectable text.
Searchable PDFs can usually be processed much faster by extracting the embedded text directly.
if(pdfHasText){
skipOCR();
}
Another mistake is choosing the wrong recognition language.
Always select the language that matches the document before starting OCR.
worker = await Tesseract.createWorker(
selectedLanguage
);
Some users also attempt OCR on extremely low-quality scans without enabling image enhancement.
Using grayscale conversion, contrast adjustment, or sharpening often improves recognition quality considerably.
Finally, always review the extracted text before exporting it.
Checking the OCR output and confidence scores helps identify pages that may require rescanning or additional processing before the results are used in business workflows.
Conclusion
In this tutorial, you built a browser-based PDF OCR to Text Converter using JavaScript.
You learned how to upload PDF documents, preview scanned pages, configure OCR settings, select recognition languages, improve image quality, extract text, monitor processing progress, review OCR confidence scores, and export the recognized text directly from the browser.
More importantly, you discovered how modern browsers can perform Optical Character Recognition locally without requiring a backend server or cloud-based OCR service.
This approach keeps document processing fast, private, and secure while giving users complete control over how scanned PDFs are converted into editable text.
You can try the complete implementation here:
Once you understand this workflow, you can extend the project further by adding handwriting recognition, AI-powered document summarization, automatic translation, named entity extraction, keyword detection, document classification, searchable PDF generation, or intelligent document automation.
