Interfaces
Annotation
Property | Type | Description |
---|---|---|
id | string | null | Unique identifier for the annotation, null when it is a new annotation |
annotationType | AnnotationType | Type of annotation (e.g., highlight, text, link) |
rotation | number | Rotation angle of the annotation |
rect | number[] | Rectangular boundary of the annotation [x1, y1, x2, y2] |
annotationFlags? | AnnotationFlag | Flags defining annotation behavior |
borderStyle? | AnnotationBorderStyle | Border styling properties |
color? | Uint8ClampedArray | null | Primary color of the annotation |
creationDate? | string | null | Date when annotation was created |
backgroundColor? | Uint8ClampedArray | null | Background color of the annotation |
borderColor? | Uint8ClampedArray | null | Border color of the annotation |
contentsObj? | AnnotationStringObj | Content text with direction information |
hasOwnCanvas? | boolean | Whether annotation has its own canvas element |
hasAppearance? | boolean | Whether annotation has appearance stream |
modificationDate? | string | null | Date when annotation was last modified |
quadPoints? | Float32Array | Quadrilateral points for text markup annotations |
subtype? | string | Annotation subtype identifier |
noRotate? | boolean | Whether annotation should not rotate with page |
noHTML? | boolean | Whether annotation should not render as HTML |
isEditable? | boolean | Whether annotation can be edited |
structParent? | number | Structure parent reference |
titleObj? | AnnotationStringObj | Title/author with direction information |
opacity? | number | Opacity level of the annotation |
file? | AnnotationAttachment | File attachment data |
dest? | OutlineDestinations | Link destination (for link annotations) |
url? | string | URL target (for link annotations) |
unsafeUrl? | string | Invalidate URL target |
action? | LinkAction | Navigation action (FirstPage, LastPage, etc.) |
newWindow? | boolean | Whether link opens in new window |
pageIndex? | number | Page index where annotation exists (editor prop) |
deleted? | boolean | Whether annotation is marked for deletion (editor prop) |
noView? | boolean | Whether annotation is hidden from view (editor prop) |
noPrint? | boolean | Whether annotation is excluded from printing (editor prop) |
fontSize? | number | Font size for text annotations (editor prop) |
contents? | string | Text content of the annotation (editor prop) |
AnnotationBorderStyle
Property | Type | Description |
---|---|---|
dashArray | number[] | Array defining the dash pattern for dashed borders |
horizontalCornerRadius | number | Horizontal corner radius for rounded borders |
style | number | Border style identifier |
verticalCornerRadius | number | Vertical corner radius for rounded borders |
width | number | Border width |
rawWidth | number | Original/unscaled border width |
AnnotationCallback
Type Definition
ts
type AnnotationCallback<T = Annotation> = (data: T) => void;
See also: Annotation
AnnotationColors
Type | Description |
---|---|
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,
}
Flag | Value | Description |
---|---|---|
INVISIBLE | 0x01 | Annotation is invisible and does not display |
HIDDEN | 0x02 | Annotation is hidden from view and interaction |
0x04 | Annotation should be printed | |
NOZOOM | 0x08 | Annotation does not scale with zoom |
NOROTATE | 0x10 | Annotation does not rotate with page rotation |
NOVIEW | 0x20 | Annotation is not displayed on screen but may print |
READONLY | 0x40 | Annotation cannot be edited or deleted |
LOCKED | 0x80 | Annotation cannot be deleted or its properties modified |
TOGGLENOVIEW | 0x100 | Toggles the NOVIEW flag behavior |
LOCKEDCONTENTS | 0x200 | Annotation contents cannot be modified |
AnnotationFreeTextFontColors
Type | Description |
---|---|
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 } | null | Accept 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
Type | Description |
---|---|
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 } | null | Accept 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
Property | Type | Description |
---|---|---|
icon | Component | VNode | string | Icon 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
Property | Type | Description |
---|---|---|
dir | string | Text direction (e.g., 'ltr', 'rtl') |
str | string | The 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,
}
Type | Value | Description |
---|---|---|
Text | 1 | Text annotation (sticky note) |
Link | 2 | Link annotation |
FreeText | 3 | Free text annotation |
Line | 4 | Line annotation |
Square | 5 | Square/rectangle annotation |
Circle | 6 | Circle/ellipse annotation |
Polygon | 7 | Polygon annotation |
Polyline | 8 | Polyline annotation |
Highlight | 9 | Highlight text markup annotation |
Underline | 10 | Underline text markup annotation |
Squiggly | 11 | Squiggly underline text markup annotation |
StrikeOut | 12 | Strikeout text markup annotation |
Stamp | 13 | Rubber stamp annotation |
Caret | 14 | Caret annotation |
Ink | 15 | Ink/freehand drawing annotation |
Popup | 16 | Popup annotation |
FileAttachment | 17 | File attachment annotation |
Sound | 18 | Sound annotation |
Movie | 19 | Movie annotation |
Widget | 20 | Interactive form widget |
Screen | 21 | Screen annotation |
PrinterMark | 22 | Printer's mark annotation |
TrapNet | 23 | Trap network annotation |
Watermark | 24 | Watermark annotation |
ThreeD | 25 | 3D annotation |
Redact | 26 | Redaction annotation |
FreeTextOption
(extends AnnotationOption
)
Property | Type | Description |
---|---|---|
fontColors | AnnotationFreeTextFontColors | Available font color options for free text annotations. |
fontSizes | number[] | 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
)
Property | Type | Description | Default |
---|---|---|---|
colors | AnnotationHighlightColors | Available 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
Property | Type | Description |
---|---|---|
label | string | A human-readable name for its value |
value | string | The corresponding value |
LinkAction
Type Definition
ts
type LinkAction = "FirstPage" | "LastPage" | "NextPage" | "PrevPage" | "GoBack" | "GoForward";
Value | Description |
---|---|
FirstPage | Navigate to the first page of the document |
LastPage | Navigate to the last page of the document |
NextPage | Navigate to the next page |
PrevPage | Navigate to the previous page |
GoBack | Navigate back in history |
GoForward | Navigate forward in history |
OutlineName
Property | Type | Description |
---|---|---|
name | string | Destination name type (e.g., 'WYZ', 'Fit', 'FitH', 'FitV') |
OutlineRef
Property | Type | Description |
---|---|---|
gen | number | Generation number of the PDF object |
num | number | Object 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
Property | Type | Description | Default |
---|---|---|---|
freeText | FreeTextOption | boolean | Can be false to hide the Free Text tool or an object to customize further | true |
highlight | HighlightOption | boolean | Can be false to hide the Highlight tool or an object to customize further | true |
image | ImageOption | boolean | Can be false to hide the Image tool or an object to customize further | true |
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>