Skip to content

Interfaces

Annotation

PropertyTypeDescription
idstring | nullUnique identifier for the annotation, null when it is a new annotation
annotationTypeAnnotationTypeType of annotation (e.g., highlight, text, link)
rotationnumberRotation angle of the annotation
rectnumber[]Rectangular boundary of the annotation [x1, y1, x2, y2]
annotationFlags?AnnotationFlagFlags defining annotation behavior
borderStyle?AnnotationBorderStyleBorder styling properties
color?Uint8ClampedArray | nullPrimary color of the annotation
creationDate?string | nullDate when annotation was created
backgroundColor?Uint8ClampedArray | nullBackground color of the annotation
borderColor?Uint8ClampedArray | nullBorder color of the annotation
contentsObj?AnnotationStringObjContent text with direction information
hasOwnCanvas?booleanWhether annotation has its own canvas element
hasAppearance?booleanWhether annotation has appearance stream
modificationDate?string | nullDate when annotation was last modified
quadPoints?Float32ArrayQuadrilateral points for text markup annotations
subtype?stringAnnotation subtype identifier
noRotate?booleanWhether annotation should not rotate with page
noHTML?booleanWhether annotation should not render as HTML
isEditable?booleanWhether annotation can be edited
structParent?numberStructure parent reference
titleObj?AnnotationStringObjTitle/author with direction information
opacity?numberOpacity level of the annotation
file?AnnotationAttachmentFile attachment data
dest?OutlineDestinationsLink destination (for link annotations)
url?stringURL target (for link annotations)
unsafeUrl?stringInvalidate URL target
action?LinkActionNavigation action (FirstPage, LastPage, etc.)
newWindow?booleanWhether link opens in new window
pageIndex?numberPage index where annotation exists (editor prop)
deleted?booleanWhether annotation is marked for deletion (editor prop)
noView?booleanWhether annotation is hidden from view (editor prop)
noPrint?booleanWhether annotation is excluded from printing (editor prop)
fontSize?numberFont size for text annotations (editor prop)
contents?stringText content of the annotation (editor prop)

AnnotationBorderStyle

PropertyTypeDescription
dashArraynumber[]Array defining the dash pattern for dashed borders
horizontalCornerRadiusnumberHorizontal corner radius for rounded borders
stylenumberBorder style identifier
verticalCornerRadiusnumberVertical corner radius for rounded borders
widthnumberBorder width
rawWidthnumberOriginal/unscaled border width

AnnotationCallback

Type Definition

ts
type AnnotationCallback<T = Annotation> = (data: T) => void;

See also: Annotation


AnnotationColors

TypeDescription
LabelValuePair[] | string[]An array of either LabelValuePair objects or color strings.
Remark: The label of LabelValuePair will apply to both aria-label and title attribute to ensure accessibility.

AnnotationFlag

Enum Definition

ts
enum AnnotationFlag {
  INVISIBLE = 0x01,
  HIDDEN = 0x02,
  PRINT = 0x04,
  NOZOOM = 0x08,
  NOROTATE = 0x10,
  NOVIEW = 0x20,
  READONLY = 0x40,
  LOCKED = 0x80,
  TOGGLENOVIEW = 0x100,
  LOCKEDCONTENTS = 0x200,
}
FlagValueDescription
INVISIBLE0x01Annotation is invisible and does not display
HIDDEN0x02Annotation is hidden from view and interaction
PRINT0x04Annotation should be printed
NOZOOM0x08Annotation does not scale with zoom
NOROTATE0x10Annotation does not rotate with page rotation
NOVIEW0x20Annotation is not displayed on screen but may print
READONLY0x40Annotation cannot be edited or deleted
LOCKED0x80Annotation cannot be deleted or its properties modified
TOGGLENOVIEW0x100Toggles the NOVIEW flag behavior
LOCKEDCONTENTS0x200Annotation contents cannot be modified

AnnotationFreeTextFontColors

TypeDescription
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 } | nullAccept AnnotationColors with a fixed length between 1 and 12 or null. If null, the default font colors will be used.
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  freeText: {
    // Set available font colors
    fontColors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" },    // Hex color
      { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  freeText: {
    // Set available font colors
    fontColors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" },    // Hex color
      { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import { defineComponent } from "vue";

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          { label: "Red", value: "red" },
          { label: "Green", value: "#007700" },    // Hex color
          { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
        ],
      },
    });
    return {
      annotationPlugin,
    };
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import { defineComponent } from "vue";

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          { label: "Red", value: "red" },
          { label: "Green", value: "#007700" },    // Hex color
          { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
        ],
      },
    });
    return {
      annotationPlugin,
    };
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

AnnotationHighlightColors

TypeDescription
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 } | nullAccept AnnotationColors with a fixed length between 1 and 6 or null. If null, the default highlight colors will be used.
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
      // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
      // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

AnnotationOption

PropertyTypeDescription
iconComponent | VNode | stringIcon for the annotation tool (can be a component, VNode, or string).
vue
<!-- ./components/IconHighlight.vue -->
<template>
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 6L9 17L4 12"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</template>
vue
<script setup lang="ts">
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Use a custom icon component for the highlight tool
    icon: IconHighlight,
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Use a custom icon component for the highlight tool
    icon: IconHighlight,
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
        icon: IconHighlight
      }
    });
		return {
			annotationPlugin
		}
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
        icon: IconHighlight
      }
    });
		return {
			annotationPlugin
		}
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

AnnotationStringObj

PropertyTypeDescription
dirstringText direction (e.g., 'ltr', 'rtl')
strstringThe actual string content

AnnotationType

Enum Definition

ts
enum AnnotationType {
  Text = 1,
  Link = 2,
  FreeText = 3,
  Line = 4,
  Square = 5,
  Circle = 6,
  Polygon = 7,
  Polyline = 8,
  Highlight = 9,
  Underline = 10,
  Squiggly = 11,
  StrikeOut = 12,
  Stamp = 13,
  Caret = 14,
  Ink = 15,
  Popup = 16,
  FileAttachment = 17,
  Sound = 18,
  Movie = 19,
  Widget = 20,
  Screen = 21,
  PrinterMark = 22,
  TrapNet = 23,
  Watermark = 24,
  ThreeD = 25,
  Redact = 26,
}
TypeValueDescription
Text1Text annotation (sticky note)
Link2Link annotation
FreeText3Free text annotation
Line4Line annotation
Square5Square/rectangle annotation
Circle6Circle/ellipse annotation
Polygon7Polygon annotation
Polyline8Polyline annotation
Highlight9Highlight text markup annotation
Underline10Underline text markup annotation
Squiggly11Squiggly underline text markup annotation
StrikeOut12Strikeout text markup annotation
Stamp13Rubber stamp annotation
Caret14Caret annotation
Ink15Ink/freehand drawing annotation
Popup16Popup annotation
FileAttachment17File attachment annotation
Sound18Sound annotation
Movie19Movie annotation
Widget20Interactive form widget
Screen21Screen annotation
PrinterMark22Printer's mark annotation
TrapNet23Trap network annotation
Watermark24Watermark annotation
ThreeD253D annotation
Redact26Redaction annotation

FreeTextOption (extends AnnotationOption)

PropertyTypeDescription
fontColorsAnnotationFreeTextFontColorsAvailable font color options for free text annotations.
fontSizesnumber[]List of font sizes for free text annotations.
vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      // Set available font colors
      fontColors: [
        {label: 'Red', value: 'red'},
        {label: 'Green', value: '#007700'},   // Hex color
        {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
      ]
      // Set available font sizes
      fontSizes: [ 12, 14, 16 ]
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      // Set available font colors
      fontColors: [
        {label: 'Red', value: 'red'},
        {label: 'Green', value: '#007700'},   // Hex color
        {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
      ]
      // Set available font sizes
      fontSizes: [ 12, 14, 16 ]
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},   // Hex color
          {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
        ],
        // Set available font sizes
        fontSizes: [ 12, 14, 16 ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},   // Hex color
          {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
        ],
        // Set available font sizes
        fontSizes: [ 12, 14, 16 ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

HighlightOption (extends AnnotationOption)

PropertyTypeDescriptionDefault
colorsAnnotationHighlightColorsAvailable highlight colors.["#CAAAFF" /* Purple */, "#65EDE9" /* Cyan */, "#FFACAC" /* Red */, "#FFBD82" /* Orange */, "#FCE244" /* Yellow */, "#A0F751" /* Green */]
vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
        // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
        // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

ImageOption (extends AnnotationOption)

Currently, there is no configurable property.


LabelValuePair

PropertyTypeDescription
labelstringA human-readable name for its value
valuestringThe corresponding value

LinkAction

Type Definition

ts
type LinkAction = "FirstPage" | "LastPage" | "NextPage" | "PrevPage" | "GoBack" | "GoForward";
ValueDescription
FirstPageNavigate to the first page of the document
LastPageNavigate to the last page of the document
NextPageNavigate to the next page
PrevPageNavigate to the previous page
GoBackNavigate back in history
GoForwardNavigate forward in history

OutlineName

PropertyTypeDescription
namestringDestination name type (e.g., 'WYZ', 'Fit', 'FitH', 'FitV')

OutlineRef

PropertyTypeDescription
gennumberGeneration number of the PDF object
numnumberObject number of the PDF reference

OutlineDestinations

Type Definition

ts
type OutlineDestinations = [
  // The first item is used to indicate the destination page
  OutlineRef | number,
  // Destination name object specifying the view type
  OutlineName,
  // Additional parameters specific to the destination type
  ...any[]
];

VPdfAnnotationPluginOptions

PropertyTypeDescriptionDefault
freeTextFreeTextOption | booleanCan be false to hide the Free Text tool or an object to customize furthertrue
highlightHighlightOption | booleanCan be false to hide the Highlight tool or an object to customize furthertrue
imageImageOption | booleanCan be false to hide the Image tool or an object to customize furthertrue
vue
<script setup lang="ts">
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin, { type VPdfAnnotationPluginOptions } from "@vue-pdf-viewer/annotation";

const options: VPdfAnnotationPluginOptions = {
  freeText: true,
  highlight: true,
  image: false // This will disable the image annotation tool
}
const annotationPlugin = VPdfAnnotationPlugin(options);

</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script setup>
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin, { type VPdfAnnotationPluginOptions } from "@vue-pdf-viewer/annotation";

const options: VPdfAnnotationPluginOptions = {
  freeText: true,
  highlight: true,
  image: false // This will disable the image annotation tool
}
const annotationPlugin = VPdfAnnotationPlugin(options);

</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: true,
      highlight: true,
      image: false // This will disable the image annotation tool
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>
vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: true,
      highlight: true,
      image: false // This will disable the image annotation tool
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>