Extract text using extractTextCompleted Event in React Pdfviewer component

3 Apr 20251 minute to read

The PDF Viewer library allows you to extract the text from a page along with the bounds. Text extraction can be done using the isExtractText property and extractTextCompleted event.

Here is an example of how you can use the isExtractText property and extractTextCompleted event:

<PdfViewerComponent
    id="container"
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    serviceUrl="https://services.syncfusion.com/react/production/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);
};

Find the sample how to Extract Text