Select annotation in Vue Pdfviewer component

11 Jun 20247 minutes to read

The PDF Viewer library allows you to select an annotation from a PDF document. Selecting an annotation can be done using the selectAnnotation() method. This method is used to select an annotation using its id.

The following steps are used to select an annotation from a PDF Document.

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

Step 2: The following code sample represents how to select an annotation in a button click.

<template>
  <div id="app">
    <button v-on:click="selectAnnotation">SelectAnnotation</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
    </ejs-pdfviewer>
  </div>
</template>

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

const pdfviewer = ref(null);
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

const selectAnnotation = function () {
  const viewer = pdfviewer.value.ej2Instances;
  // Unload the PDF document.
  viewer.annotationModule.selectAnnotation(viewer.annotationCollection[0].annotationId);
}

</script>
<template>
  <div id="app">
    <button v-on:click="selectAnnotation">SelectAnnotation</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :documentLoad="documentLoad">
    </ejs-pdfviewer>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
  },
  methods: {
    selectAnnotation: function () {
      const viewer = this.$refs.pdfviewer.ej2Instances;
      // Unload the PDF document.
      viewer.annotationModule.selectAnnotation(viewer.annotationCollection[0].annotationId);
    }
  }
}
</script>
<template>
  <div id="app">
    <button v-on:click="selectAnnotation">SelectAnnotation</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl"
      :documentLoad="documentLoad">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>

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

const pdfviewer = ref(null);
const serviceUrl = "https://services.syncfusion.com/vue/production/api/pdfviewer";
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
  ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner])

const selectAnnotation = function () {
  const viewer = pdfviewer.value.ej2Instances;
  // Unload the PDF document.
  viewer.annotationModule.selectAnnotation(viewer.annotationCollection[0].annotationId);
}

</script>
<template>
  <div id="app">
    <button v-on:click="selectAnnotation">SelectAnnotation</button>
    <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl"
      :documentLoad="documentLoad">
    </ejs-pdfviewer>
  </div>
</template>

<script>

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

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfviewerComponent
  },
  data() {
    return {
      serviceUrl: "https://services.syncfusion.com/vue/production/api/pdfviewer",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, Annotation,
      ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]
  },
  methods: {
    selectAnnotation: function () {
      const viewer = this.$refs.pdfviewer.ej2Instances;
      // Unload the PDF document.
      viewer.annotationModule.selectAnnotation(viewer.annotationCollection[0].annotationId);
    }
  }
}
</script>
<button id="selectAnnotation">SelectAnnotation</button>

<script>
    //Event triggers when you click the SelectAnnotation button.
    document.getElementById('selectAnnotation').addEventListener('click', () => {
        //API to select the annotation
        viewer.annotationModule.selectAnnotation(viewer.annotationCollection[0].annotationId);
    });
</script>

View sample in GitHub