Extracting text from PDF documents using JavaScript

Text extraction is based on a inhouse heuristic algorithm which attempts to find the human readable reading order in a document. The reading order is determined by a number of factors such as spacing, font size, font type, and more. What makes text extraction challenging is there is no clear definition in the PDF specification which describes semantic information or logical structures.

Use loadPageText API to capture text from a document page.

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement)
  .then(async instance => {
    const pageNumber = 1; // Extract the text in the first page
    const doc = instance.Core.documentViewer.getDocument();

    const text = await doc.loadPageText(pageNumber);
    // .. do something with text
    console.log(text);
  });

To perform advanced text extraction from a region of a PDF document page.

WebViewer({
  fullAPI: true,
  // Other instantiation options
})
  .then(instance => {
    const { PDFNet, documentViewer } = instance.Core;

    documentViewer.addEventListener('documentLoaded', async () => {
      await PDFNet.initialize();
      const doc = await documentViewer.getDocument().getPDFDoc();
      const firstPage = await doc.getPage(1);

      const txt = await PDFNet.TextExtractor.create();
      const rect = new PDFNet.Rect(0, 0, 612, 794);
      txt.begin(firstPage, rect); // Read the page.

      // Extract words one by one.
      let line = await txt.getFirstLine();
      for (; (await line.isValid()); line = (await line.getNextLine()))
      {
          for (word = await line.getFirstWord(); (await word.isValid()); word = (await word.getNextWord()))
          {
              // await word.getString();
          }
      }
    })
  })

Read a PDF File (Parse & Extract Text) Full sample code which illustrates the basic text extraction capabilities.

To extract text from under an annotation in the document after all annotations are loaded.

WebViewer({
  fullAPI: true,
  // Other instantiation options
})
  .then(instance => {
    const { PDFNet, documentViewer, annotManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', async () => {
      await PDFNet.initialize();
      const doc = await documentViewer.getDocument().getPDFDoc();

      // export annotations from the document
      const annots = await annotManager.exportAnnotations();

      // Run PDFNet methods with memory management
      await PDFNet.runWithCleanup(async () => {

        // lock the document before a write operation
        // runWithCleanup will auto unlock when complete
        doc.lock();

        // import annotations to PDFNet
        const fdf_doc = await PDFNet.FDFDoc.createFromXFDF(annots);
        await doc.fdfUpdate(fdf_doc);

        const page = await doc.getPage(1);
        const rect = await page.getCropBox();
        const annotation = await page.getAnnot(0);
        const te = await PDFNet.TextExtractor.create();
        te.begin(page, rect);
        const textData = await te.getTextUnderAnnot(annotation);
        console.log(textData);
      });
    })
  })

When we use the ElementReader class to read elements from a PDF document, we are often faced with data that is partial. For example, let us say that we are attempting to extract a sentence that says "This is a sample sentence." from a PDF document. We could potentially end up with two elements - "T" and "his is a sample sentence.". This is possible because in a PDF document, text objects are not always cleanly organized into words sentences, or paragraphs. The ElementReader class will return Element objects exactly as they are defined in the PDF page content stream.

An element of type e_text directly corresponds to a Tj element in the PDF document. Each e_text element represents a text run, which represents a sequence of text glyphs that use the same font and graphics attributes. Say, if there is a single word, whose letters are each presented with a different font, then each letter would be a separate text run. You may also encounter text runs that contain multiple words separated by spaces. The PDF format does not guarantee that the text will be presented in reading order.

All this just goes to say that attempting to use an ElementReader to extract text data from a PDF document is not guaranteed to return data in the order expected (reading order). The most straightforward approach to extract words and text from text-runs is using the pdftron.PDF.TextExtractor class, as shown in the TextExtract sample project - TextExtract Sample

TextExtractor will assemble words, lines, and paragraphs, remove duplicate strings, reconstruct text reading order, etc. Using TextExtractor you can also obtain bounding boxes for each word, line, or paragraph (along with style information such as font, color, etc). This information can be used to search for corresponding text elements using ElementReader.