Section:

PDF Text Extractor Showcase Demo Code Sample

Requirements
View Demo
Web SDK
Full API

Quickly extract text from PDFs—either from entire pages or highlighted sections only.

This demo allows you to:

  • Upload your own PDF file.
  • Highlighting text to perform extraction.
  • Preview extracted text: Full page and highlighted text.

Implementation steps
To add PDF Text Extraction capability with WebViewer:

Step 1: Choose your preferred web stack for WebViewer.
Step 2: Add the ES6 JavaScript sample code provided in this guide.

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, Claude Sonnet 4 (Preview), October 14, 2025
3// File: showcase-demos/pdf-text-extractor/index.js
4import WebViewer from '@pdftron/webviewer';
5
6// Global variables to track state.
7let redactionDemoFile = "https://apryse.s3.amazonaws.com/public/files/samples/section-508.pdf";
8let pageCount = 0;
9let textContent = '';
10let annotTextContent = '';
11let currentPage = 0;
12
13// Function to initialize and load the Redaction Tool.
14function initializeWebViewer() {
15
16  const element = document.getElementById('viewer');
17  if (!element) {
18    console.error('Viewer div not found.');
19    return;
20  }
21
22  WebViewer({
23    path: '/lib',
24    initialDoc: redactionDemoFile,
25    licenseKey: 'YOUR_LICENSE_KEY',
26    fullAPI: true,
27    enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File. 
28  }, element).then(instance => {
29    // Define documentViewer for use in other functions.
30    const { documentViewer } = instance.Core;
31    documentViewer.addEventListener('documentLoaded', () => {
32      const { UI } = instance;
33      UI.setLayoutMode(UI.LayoutMode.Single);                  // Set the layout mode to single page view. 
34      UI.disableFadePageNavigationComponent();                 // Keep the page navigation component on screen all the time.
35      pageCount = documentViewer.getDocument().getPageCount(); // Update page count.   
36      setPage(1);                                              //Set 1st page to trigger text extraction.
37    });
38    // Event listeners for page changes.
39    documentViewer.addEventListener('pageNumberUpdated', viewerUpdated);
40    // Annotation change listener to update annotation text when annotations are modified.
41    instance.Core.documentViewer
42      .getAnnotationManager()
43      .addEventListener('annotationChanged', getAnnotListener);
44    // UI Section 
45    createUIElements();
46    // Trigger immediate UI update, if available.
47    if (window.updateUIContent) {
48      window.updateUIContent();
49    }
50  });
51}
52
53// Function to extract all text from a given page.
54async function getAllTextFromDocument(pageNumber) {
55  const doc = window.WebViewer.getInstance().Core.documentViewer.getDocument();
56  if (pageNumber > 0 && doc) {
57    await getText(pageNumber); // Only proceed if there is a valid document.
58    await getAnnotText(pageNumber);
59  } else {
60    console.warn('Document not available or invalid page number');
61  }
62};
63
64// Function to extract text from a given page.
65async function getText(pageNumber) {
66  const { documentViewer } = window.WebViewer.getInstance().Core;
67  const doc = documentViewer.getDocument();
68  // Check if document is loaded before proceeding.
69  if (!doc) {
70    return;
71  }
72
73  const newPageCount = doc.getPageCount();
74  await doc.loadPageText(pageNumber, (newText) => {
75    textContent = newText;
76    pageCount = newPageCount;
77    pageNumber = pageNumber;
78  });
79}
80
81// Function to extract text under annotations on a given page.
82async function getAnnotText(pageNumber) {
83  const { PDFNet, documentViewer } = window.WebViewer.getInstance().Core;
84  await PDFNet.initialize();
85  await documentViewer.getAnnotationsLoadedPromise(); // Ensure annotations are loaded.
86  const doc = await getPDFDocument(documentViewer, PDFNet);
87  const annotationManager = documentViewer.getAnnotationManager();
88  const annotList = annotationManager
89    .getAnnotationsList()
90    .filter((a) => a.getPageNumber() === pageNumber);
91  const xfdf_string = await annotationManager.exportAnnotations({ annotationList: annotList });
92  const textOutput = [];
93
94  if (!doc) {
95    console.warn('PDF document not available');
96    return;
97  }
98
99  // Run PDFNet methods with memory management.
100  await PDFNet.runWithCleanup(async () => {
101    // Lock the document before a write operation.
102    // runWithCleanup will auto unlock when complete.
103    try {
104      doc.lock();
105      const fdf_doc = await PDFNet.FDFDoc.createFromXFDF(xfdf_string);
106      await doc.fdfUpdate(fdf_doc);
107      const pageTemp = await doc.getPage(pageNumber);
108      const rect = await pageTemp.getCropBox();
109      const te = await PDFNet.TextExtractor.create();
110      te.begin(pageTemp, rect);
111      const annotCount = await pageTemp.getNumAnnots();
112      for (let i = 0; i < annotCount; ++i) {
113        const annot = await pageTemp.getAnnot(i);
114        const annotText = await te.getTextUnderAnnot(annot);
115        textOutput.push(annotText);
116      }
117    } catch (e) {
118      console.log('Document no longer exists, demo probably unmounted', e);
119    }
120    annotTextContent = textOutput.join('\n');    
121    updateGlobalVars(); // Update global variables after annotation extraction completes.
122    // Trigger immediate UI update, if available.
123    if (window.updateUIContent) {
124      window.updateUIContent();
125    }
126  });
127  // Trigger UI update after annotation extraction is complete.
128  if (window.updateUIElements) {
129    window.updateUIElements(pageNumber);
130  }
131};
132
133// Helper function to get PDFDoc from DocumentViewer.
134async function getPDFDocument(documentViewer, PDFNet) {
135  const currentDocument = documentViewer.getDocument();
136  let doc;
137  if (!currentDocument) return;
138  if (currentDocument.type === 'office') {
139    const coreControls = window.WebViewer.getInstance().Core;
140    const buff = await currentDocument.getFileData();
141    const split = currentDocument.filename.split('.');
142    const extension = split[split.length - 1];
143    const options = {
144      extension: extension,
145    };
146    const pdfBuffer = await coreControls.officeToPDFBuffer(buff, options);
147    doc = await PDFNet.PDFDoc.createFromBuffer(pdfBuffer);
148  } else {
149    doc = await currentDocument.getPDFDoc();
150  }
151  return doc;
152};
153
154// Function to set the current page and trigger text extraction.
155function setPage(pageNumber) {
156  // Validate page number.
157  if (isNaN(pageNumber) || pageNumber < 0 || pageNumber > pageCount) return;
158  window.WebViewer.getInstance().Core.documentViewer.setCurrentPage(Number(pageNumber));
159  currentPage = pageNumber;
160  // Trigger text extraction for the new page.
161  getAllTextFromDocument(pageNumber);
162};
163
164// Listener for annotation changes to update annotation text on the current page.
165function getAnnotListener() { 
166  getAllTextFromDocument(window.WebViewer.getInstance().Core.documentViewer.getCurrentPage());
167}
168
169// Function called on page change to update current page.
170function viewerUpdated() {
171  setPage(window.WebViewer.getInstance().Core.documentViewer.getCurrentPage());
172}
173
174// UI Elements
175// Function to create and initialize UI elements.
176function createUIElements() {
177  // Create a container for all controls (label, dropdown, and buttons).
178  // Dynamically load ui-elements.js, if not already loaded.
179  if (!window.SidePanel) {
180    const script = document.createElement('script');
181    script.src = '/showcase-demos/pdf-text-extractor/ui-elements.js';
182    script.onload = () => {
183      UIElements.init('viewer');
184
185    };
186    document.head.appendChild(script);
187  }
188}
189
190// Function to update global window variables.
191function updateGlobalVars() {
192  window.currentPage = currentPage;
193  window.pageCount = pageCount;
194  window.textContent = textContent;
195  window.annotTextContent = annotTextContent;
196}
197
198// Initialize the WebViewer.
199initializeWebViewer();
200

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales