Extract text using extractTextCompleted Event in Vue PDF Viewer control

Use the isExtractText property and the extractTextCompleted event to extract page text along with bounds.

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

Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.

Step 2: The following code snippet explains how to extract the text from a page.

<template>
  <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isExtractText="true"
    :extractTextCompleted="extractTextCompleted">
  </ejs-pdfviewer>
</template>

<script setup>
import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
  Annotation, FormDesigner, FormFields
} from '@syncfusion/ej2-vue-pdfviewer';
import { provide } from 'vue';

const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
const documentPath = "PDF_Succinctly.pdf";
const extractTextCompleted = function (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);
  // Extracts the first text of the PDF document along with its bounds
  console.log(args.documentTextCollection[1][1].TextData[0].Bounds);
}
provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
  Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields])
</script>
<template>
  <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :isExtractText="true"
    :extractTextCompleted="extractTextCompleted">
  </ejs-pdfviewer>
</template>

<script>
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
  BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
  Annotation, FormDesigner, FormFields
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: 'App',
  components: {
    'ejs-pdfviewer': PdfViewerComponent
  },
  data() {
    return {
      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
      documentPath: "PDF_Succinctly.pdf",
      extractTextCompleted: function (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);
        // Extracts the first text of the PDF document along with its bounds
        console.log(args.documentTextCollection[1][1].TextData[0].Bounds);
      }
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
    Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
  }
}
</script>

Find the Sample, how to Extract Text