Extract text using the extractTextCompleted event in the PDF Viewer

23 Jul 20261 minute to read

The PDF Viewer can extract page text along with bounding information. Enable text extraction using the isExtractText property and handle the extractTextCompleted event to receive the extracted text and bounds for the document.

The following example shows how to enable text extraction and handle the completion event:

<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
    isExtractText={true}
    extractTextCompleted={extractTextCompleted}
    style={{ height: '640px' }}>
</PdfViewerComponent>

function extractTextCompleted(args){
    // Extract the Complete text of load document
    console.log(args);
    console.log(args.documentTextCollection[1]);
    // Extract the Text data.
    console.log(args.documentTextCollection[1][1].TextData);
    // Extract Text in the Page.
    console.log(args.documentTextCollection[1][1].PageText);
    // Extract Text along with Bounds
    console.log(args.documentTextCollection[1][1].TextData[0].Bounds);
};

Troubleshooting

  • If extractTextCompleted does not fire, verify that the document has finished loading.
  • If documentTextCollection is empty, confirm the serviceUrl points to a reachable PDF Viewer Web API service.
  • If documentTextCollection[i] returns undefined, check that the document contains the expected number of pages (page indexing starts at 0).

Sample

Find the sample: How to extract text