Annotation Controller viewer>=4.3.0 & annotation>=1.6.0

AnnotationControl

An instance object for general annotation management. annotationControl is always available on the viewer instance regardless of whether the @vue-pdf-viewer/annotation plugin is loaded.

No Plugin Required

annotationControl is always defined on the viewer instance. It manages the viewer's internal annotation state, which is populated when the @vue-pdf-viewer/annotation plugin is loaded and the user creates or imports annotations.

Methods

Name	Description	Type
getAnnotations	Returns all current editable annotations held in the viewer's internal storage. Returns an empty array when no editable annotations are present or the annotation plugin has not been loaded.	() => Annotation[]
clearAnnotations	Removes all editor annotations from the viewer.	() => void

Example

Composition TS

<script setup lang="ts">
import { ref, computed } from 'vue'
import { VPdfViewer, type VPVInstance } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

const viewerRef = ref<VPVInstance>()
const annotationControl = computed(() => viewerRef.value?.annotationControl)

const annotationPlugin = VPdfAnnotationPlugin({ textSelection: true, freeText: true })

const logAnnotations = () => {
  const annotations = annotationControl.value?.getAnnotations() ?? []
  console.log(`${annotations.length} annotation(s):`, annotations)
}

const clearAll = () => {
  annotationControl.value?.clearAnnotations()
}
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <div class="toolbar">
      <button @click="logAnnotations">Log Annotations</button>
      <button @click="clearAll">Clear All</button>
    </div>
    <VPdfViewer
      ref="viewerRef"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { ref, computed } from 'vue'
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

const viewerRef = ref()
const annotationControl = computed(() => viewerRef.value?.annotationControl)

const annotationPlugin = VPdfAnnotationPlugin({ textSelection: true, freeText: true })

const logAnnotations = () => {
  const annotations = annotationControl.value?.getAnnotations() ?? []
  console.log(`${annotations.length} annotation(s):`, annotations)
}

const clearAll = () => {
  annotationControl.value?.clearAnnotations()
}
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <div class="toolbar">
      <button @click="logAnnotations">Log Annotations</button>
      <button @click="clearAll">Clear All</button>
    </div>
    <VPdfViewer
      ref="viewerRef"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { ref, computed, defineComponent } from 'vue'
import { VPdfViewer, type VPVInstance } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    const viewerRef = ref<VPVInstance>()
    const annotationControl = computed(() => viewerRef.value?.annotationControl)

    const annotationPlugin = VPdfAnnotationPlugin({ textSelection: true, freeText: true })

    const logAnnotations = () => {
      const annotations = annotationControl.value?.getAnnotations() ?? []
      console.log(`${annotations.length} annotation(s):`, annotations)
    }

    const clearAll = () => {
      annotationControl.value?.clearAnnotations()
    }

    return {
      viewerRef,
      annotationPlugin,
      logAnnotations,
      clearAll,
    }
  }
})
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <div class="toolbar">
      <button @click="logAnnotations">Log Annotations</button>
      <button @click="clearAll">Clear All</button>
    </div>
    <VPdfViewer
      ref="viewerRef"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { ref, computed, defineComponent } from 'vue'
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    const viewerRef = ref()
    const annotationControl = computed(() => viewerRef.value?.annotationControl)

    const annotationPlugin = VPdfAnnotationPlugin({ textSelection: true, freeText: true })

    const logAnnotations = () => {
      const annotations = annotationControl.value?.getAnnotations() ?? []
      console.log(`${annotations.length} annotation(s):`, annotations)
    }

    const clearAll = () => {
      annotationControl.value?.clearAnnotations()
    }

    return {
      viewerRef,
      annotationPlugin,
      logAnnotations,
      clearAll,
    }
  }
})
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <div class="toolbar">
      <button @click="logAnnotations">Log Annotations</button>
      <button @click="clearAll">Clear All</button>
    </div>
    <VPdfViewer
      ref="viewerRef"
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>