|  | 
|  | 1 | +<template> | 
|  | 2 | +  <div id="app"> | 
|  | 3 | +    <button v-on:click="extractText">extractText</button> | 
|  | 4 | +    <button v-on:click="extractsText">extractsText</button> | 
|  | 5 | +    <ejs-pdfviewer | 
|  | 6 | +      id="pdfViewer" | 
|  | 7 | +      ref="pdfviewer" | 
|  | 8 | +      :documentPath="documentPath" | 
|  | 9 | +      :resourceUrl="resourceUrl" | 
|  | 10 | +      style="height: 640px;" | 
|  | 11 | +    > | 
|  | 12 | +    </ejs-pdfviewer> | 
|  | 13 | +  </div> | 
|  | 14 | +</template> | 
|  | 15 | + | 
|  | 16 | +<script> | 
|  | 17 | +import { | 
|  | 18 | +  PdfViewerComponent, | 
|  | 19 | +  Toolbar, | 
|  | 20 | +  Magnification, | 
|  | 21 | +  Navigation, | 
|  | 22 | +  Annotation, | 
|  | 23 | +  TextSelection, | 
|  | 24 | +  TextSearch, | 
|  | 25 | +  FormFields, | 
|  | 26 | +  FormDesigner, | 
|  | 27 | +  PageOrganizer, | 
|  | 28 | +} from '@syncfusion/ej2-vue-pdfviewer'; | 
|  | 29 | +
 | 
|  | 30 | +export default { | 
|  | 31 | +  name: 'App', | 
|  | 32 | +  components: { | 
|  | 33 | +    'ejs-pdfviewer': PdfViewerComponent, | 
|  | 34 | +  }, | 
|  | 35 | +  data() { | 
|  | 36 | +    return { | 
|  | 37 | +      documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', | 
|  | 38 | +      resourceUrl: 'https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib' | 
|  | 39 | +    }; | 
|  | 40 | +  }, | 
|  | 41 | +  provide: { | 
|  | 42 | +    PdfViewer: [ | 
|  | 43 | +      Toolbar, | 
|  | 44 | +      Magnification, | 
|  | 45 | +      Navigation, | 
|  | 46 | +      Annotation, | 
|  | 47 | +      TextSelection, | 
|  | 48 | +      TextSearch, | 
|  | 49 | +      FormFields, | 
|  | 50 | +      FormDesigner, | 
|  | 51 | +      PageOrganizer, | 
|  | 52 | +    ], | 
|  | 53 | +  }, | 
|  | 54 | +  methods: { | 
|  | 55 | +    extractText() { | 
|  | 56 | +      if (this.$refs.pdfviewer) { | 
|  | 57 | +        const viewer = this.$refs.pdfviewer.ej2Instances; | 
|  | 58 | +        viewer.extractText(1, 'TextOnly').then((val) => { | 
|  | 59 | +          console.log('Extracted Text from Page 1:'); | 
|  | 60 | +          console.log(val); | 
|  | 61 | +        }); | 
|  | 62 | +      } | 
|  | 63 | +    }, | 
|  | 64 | +    extractsText() { | 
|  | 65 | +      if (this.$refs.pdfviewer) { | 
|  | 66 | +        const viewer = this.$refs.pdfviewer.ej2Instances; | 
|  | 67 | +        viewer.extractText(0, 2, 'TextOnly').then((val) => { | 
|  | 68 | +          console.log('Extracted Text from Pages 0 to 2:'); | 
|  | 69 | +          console.log(val); | 
|  | 70 | +        }); | 
|  | 71 | +      } | 
|  | 72 | +    } | 
|  | 73 | +  } | 
|  | 74 | +}; | 
|  | 75 | +</script> | 
|  | 76 | + | 
|  | 77 | +<style> | 
|  | 78 | +@import "../node_modules/@syncfusion/ej2-base/styles/material.css"; | 
|  | 79 | +@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css"; | 
|  | 80 | +@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css"; | 
|  | 81 | +@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css"; | 
|  | 82 | +@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css"; | 
|  | 83 | +@import "../node_modules/@syncfusion/ej2-popups/styles/material.css"; | 
|  | 84 | +@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css"; | 
|  | 85 | +@import "../node_modules/@syncfusion/ej2-vue-pdfviewer/styles/material.css"; | 
|  | 86 | +</style> | 
0 commit comments